import { h } from "@stencil/core";
export class Chip {
  constructor() {
    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 (h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), h("div", { class: "wrapper-close-button" }, h("ifx-icon", { icon: "chevrondown12" }))), h("slot", { name: "menu" })));
  }
  static get is() { return "ifx-chip"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["chip.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["chip.css"]
    };
  }
  static get properties() {
    return {
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "placeholder",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "selectedValue": {}
    };
  }
  static get events() {
    return [{
        "method": "ifxDropdownMenu",
        "name": "ifxDropdownMenu",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "CustomEvent",
          "resolved": "CustomEvent<any>",
          "references": {
            "CustomEvent": {
              "location": "global",
              "id": "global::CustomEvent"
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "mousedown",
        "method": "handleOutsideClick",
        "target": "document",
        "capture": false,
        "passive": true
      }, {
        "name": "ifxDropdownItem",
        "method": "handleDropdownItemValueEmission",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=chip.js.map