'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca0e0765.js');

const chipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.container{position:relative;font-family:var(--ifx-font-family)}.container .wrapper{display:inline-flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;background:#FFFFFF;border:1px solid #BFBBBB;border-radius:100px}.container .wrapper:hover{cursor:pointer;border:1px solid #575352}.container .wrapper:active{border:1px solid #0A8276}.container .wrapper .wrapper-label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.container .wrapper .wrapper-close-button ifx-icon{transition:0.3s;width:12px;height:12px}.container .wrapper .wrapper-close-button.show ifx-icon{transition:0.3s;transform:rotate(-180deg)}";

const Chip = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ifxDropdownMenu = index.createEvent(this, "ifxDropdownMenu", 7);
    this.placeholder = undefined;
    this.selectedValue = "";
  }
  handleOutsideClick(event) {
    const path = event.composedPath();
    if (!path.includes(this.el)) {
      this.closedMenu();
    }
  }
  handleDropdownItemValueEmission(event) {
    this.selectedValue = event.detail;
    this.ifxDropdownMenu.emit(event.detail);
    this.toggleMenu();
  }
  getDropdownMenu() {
    let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');
    return dropdownMenuComponent;
  }
  closedMenu() {
    let dropdownMenuComponent = this.getDropdownMenu();
    dropdownMenuComponent.isOpen = false;
  }
  toggleMenu() {
    let dropdownMenuComponent = this.getDropdownMenu();
    dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;
    this.toggleCloseIcon();
  }
  toggleCloseIcon() {
    const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button');
    closeIconWrapper.classList.toggle('show');
  }
  render() {
    return (index.h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, index.h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, index.h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), index.h("div", { class: "wrapper-close-button" }, index.h("ifx-icon", { icon: "chevrondown12" }))), index.h("slot", { name: "menu" })));
  }
  get el() { return index.getElement(this); }
};
Chip.style = chipCss;

exports.ifx_chip = Chip;

//# sourceMappingURL=ifx-chip.cjs.entry.js.map