import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { LocalizeController } from '../../utilities/localize.mjs';
import FlowUiIconButton from '../icon-button/icon-button.component.mjs';
import styles from './tag.styles.mjs';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
class FlowUiTag extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.variant = "neutral";
    this.size = "medium";
    this.pill = false;
    this.removable = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.pill = boolean(this.pill, true);
    this.removable = boolean(this.removable, true);
  }
  handleRemoveClick() {
    this.emit("flow-ui-remove");
  }
  render() {
    return html`
      <span
        part="base"
        class=${classMap({
      tag: true,
      // Types
      "tag--primary": this.variant === "primary",
      "tag--secondary": this.variant === "secondary",
      "tag--success": this.variant === "success",
      "tag--neutral": this.variant === "neutral",
      "tag--warning": this.variant === "warning",
      "tag--danger": this.variant === "danger",
      "tag--text": this.variant === "text",
      // Sizes
      "tag--small": this.size === "small",
      "tag--medium": this.size === "medium",
      "tag--large": this.size === "large",
      // Modifiers
      "tag--pill": this.pill,
      "tag--removable": this.removable
    })}
      >
        <slot part="content" class="tag__content"></slot>

        ${this.removable ? html`
              <flow-ui-icon-button
                part="remove-button"
                exportparts="base:remove-button__base"
                name="x-lg"
                library="system"
                label=${this.localize.term("remove")}
                class="tag__remove"
                @click=${this.handleRemoveClick}
                tabindex="-1"
              ></flow-ui-icon-button>
            ` : ""}
      </span>
    `;
  }
}
FlowUiTag.styles = styles;
FlowUiTag.dependencies = { "flow-icon-button": FlowUiIconButton };
__decorateClass([
  property({ reflect: true })
], FlowUiTag.prototype, "variant", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiTag.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiTag.prototype, "pill", 2);
__decorateClass([
  property({ type: Boolean })
], FlowUiTag.prototype, "removable", 2);

export { FlowUiTag as default };
