import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import '../../components/icon-button/icon-button';
import { emit } from '../../internal/event';
import { LocalizeController } from '../../utilities/localize';
import styles from './tag.styles';
/**
* @since 2.0
* @status stable
*
* @dependency sl-icon-button
*
* @slot - The tag's content.
*
* @event sl-remove - Emitted when the remove button is activated.
*
* @csspart base - The component's internal wrapper.
* @csspart content - The tag content.
* @csspart remove-button - The remove button.
* @csspart remove-button__base - The remove button's `base` part.
*/
@customElement('sl-tag')
export default class SlTag extends LitElement {
static styles = styles;
private readonly localize = new LocalizeController(this);
/** The tag's variant. */
@property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
/** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Draws a pill-style tag with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
/** Makes the tag removable. */
@property({ type: Boolean }) removable = false;
handleRemoveClick() {
emit(this, 'sl-remove');
}
render() {
return html`
${this.removable
? html`
`
: ''}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'sl-tag': SlTag;
}
}