import {
  __decorateClass
} from "../../../chunks/chunk.QU3DSPNU.js";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { GdsElement } from "../../../gds-element.js";
import { TransitionalStyles } from "../../../transitional-styles.js";
import {
  gdsCustomElement,
  html
} from "../../../utils/helpers/custom-element-scoping.js";
import { GdsButton } from "../../button/button.component.js";
import { IconCheckmark } from "../../icon/icons/checkmark.component.js";
import { styles } from "./filter-chip.styles.js";
let GdsFilterChip = class extends GdsElement {
  constructor() {
    super(...arguments);
    this.selected = false;
    this.size = "large";
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "none");
    TransitionalStyles.instance.apply(this, "gds-filter-chip");
  }
  render() {
    const btnClasses = {
      "btn-p": !this.selected
    };
    return html`<gds-button
      class="btn"
      .size=${this.size === "large" ? "medium" : "small"}
      .rank=${this.selected ? "primary" : "secondary"}
      variant=${this._isUsingTransitionalStyles ? "ghost" : "default"}
      gds-role="option"
      gds-aria-selected=${this.selected}
    >
      <span class=${classMap(btnClasses)}><slot></slot></span>
      <gds-icon-checkmark
        slot="trail"
        style="display: ${this.selected ? "contents" : "none"}"
        size="1rem"
        class="icon"
      ></gds-icon-checkmark>
    </gds-button>`;
  }
};
GdsFilterChip.styles = [styles];
__decorateClass([
  property({ reflect: true, type: Boolean })
], GdsFilterChip.prototype, "selected", 2);
__decorateClass([
  property()
], GdsFilterChip.prototype, "value", 2);
__decorateClass([
  property({ reflect: true, type: String })
], GdsFilterChip.prototype, "size", 2);
GdsFilterChip = __decorateClass([
  gdsCustomElement("gds-filter-chip", {
    dependsOn: [GdsButton, IconCheckmark]
  })
], GdsFilterChip);
export {
  GdsFilterChip
};
