@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/atoms/tttx-button-v2/tttx-button-v2.js

@@ -1,436 +1,436 @@
-import { Host, h, } from '@stencil/core';
-export class TttxButton {
-  constructor() {
-    this.calculateDropdownDirection = () => {
-      const rect = this.host.getBoundingClientRect();
-      const dropdownEl = this.host.querySelector('.dropdown-list');
-      const dropdownWidth = dropdownEl ? dropdownEl.offsetWidth : 260;
-      const spaceRight = window.innerWidth - rect.right;
-      const spaceLeft = rect.left;
-      if (spaceRight > dropdownWidth) {
-        this.dropdownDirection = 'right';
-      }
-      else if (spaceLeft > dropdownWidth) {
-        this.dropdownDirection = 'left';
-      }
-      else {
-        this.dropdownDirection = 'left';
-      }
-    };
-    this.toggleDropdown = () => {
-      if (!this.isDisabled) {
-        if (!this.dropdownOpen) {
-          this.calculateDropdownDirection();
-        }
-        this.dropdownOpen = !this.dropdownOpen;
-      }
-    };
-    this.handleDropdownItemClick = (index) => {
-      this.dropdownOpen = false;
-      this.optionSelect.emit(index);
-    };
-    this.notext = false;
-    this.icon = undefined;
-    this.label = undefined;
-    this.iconcolor = 'black';
-    this.iconposition = 'left';
-    this.iconStart = undefined;
-    this.iconEnd = undefined;
-    this.design = 'primary';
-    this.disabled = false;
-    this.type = 'button';
-    this.href = undefined;
-    this.options = [];
-    this.size = 'M';
-    this.dropdownOpen = false;
-    this.dropdownDirection = 'left';
-  }
-  get isDisabled() {
-    return this.disabled || this.design === 'disabled';
-  }
-  get parsedOptions() {
-    if (Array.isArray(this.options)) {
-      return this.options.map(opt => typeof opt === 'string'
-        ? { label: opt }
-        : {
-          id: opt.id,
-          label: opt.label,
-          icon: opt.icon,
-        });
-    }
-    try {
-      const parsed = JSON.parse(this.options);
-      return parsed.map((opt) => typeof opt === 'string'
-        ? { label: opt }
-        : {
-          id: opt.id,
-          label: opt.label,
-          icon: opt.icon,
-        });
-    }
-    catch (_a) {
-      return [];
-    }
-  }
-  get iconSize() {
-    switch (this.size) {
-      case 'L':
-        return 24;
-      case 'M':
-        return 20;
-      case 'S':
-      default:
-        return 16;
-    }
-  }
-  componentWillLoad() {
-    const validDesigns = [
-      'primary',
-      'secondary',
-      'default',
-      'disabled',
-      'danger',
-      'light',
-      'success',
-      'warning',
-      'transparent',
-    ];
-    const validSizes = ['S', 'M', 'L'];
-    if (!validDesigns.includes(this.design)) {
-      this.design = 'primary';
-    }
-    if (!validSizes.includes(this.size)) {
-      this.size = 'M';
-    }
-    if (['primary', 'danger', 'light', 'success', 'warning'].includes(this.design)) {
-      this.iconcolor = 'white';
-    }
-    if (this.design === 'transparent') {
-      this.iconcolor = '#1479c6';
-    }
-  }
-  handleClickOutside(event) {
-    if (this.dropdownOpen && !this.host.contains(event.target)) {
-      this.dropdownOpen = false;
-      this.dropdownCloseEvent.emit();
-    }
-  }
-  renderButtonContent() {
-    var _a;
-    return (h("div", { class: "button-content" }, this.iconStart && (h("div", { class: "icon-left" }, h("tttx-icon_1_9_101", { icon: this.iconStart, color: this.iconcolor, size: this.iconSize }))), !this.notext && (h("div", { class: "label-text" }, h("span", null, (_a = this.label) !== null && _a !== void 0 ? _a : h("slot", null)))), this.iconEnd && (h("div", { class: "icon-right" }, h("tttx-icon_1_9_101", { icon: this.iconEnd, color: this.iconcolor, size: this.iconSize }))), this.type === 'dropdown' && (h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_101", { icon: "keyboard_arrow_down", color: this.iconcolor, size: this.iconSize })))));
-  }
-  renderDropdownList() {
-    if (this.type !== 'dropdown' || !this.dropdownOpen)
-      return null;
-    const dropdownClasses = `dropdown-list dropdown-${this.dropdownDirection}`;
-    return (h("ul", { class: dropdownClasses, role: "listbox" }, this.parsedOptions.map((item, index) => (h("li", { class: "dropdown-option", role: "option", tabindex: 0, key: index, onClick: () => this.handleDropdownItemClick(index) }, h("div", { class: "dropdown-item-content" }, item.icon && (h("tttx-icon_1_9_101", { icon: item.icon, color: "black", size: this.iconSize, class: "dropdown-item-icon" })), h("span", { class: "dropdown-item-label" }, item.label)))))));
-  }
-  render() {
-    const classes = [
-      'button',
-      `btn-${this.design}`,
-      this.iconStart ? 'icon-start' : '',
-      this.iconEnd ? 'icon-end' : '',
-      this.notext ? 'notext' : '',
-      this.type === 'dropdown' ? 'dropdown-button' : '',
-      `btn-size-${this.size.toLowerCase()}`,
-    ]
-      .filter(Boolean)
-      .join(' ');
-    return (h(Host, null, h("div", { class: "button-wrapper" }, h("button", { class: classes, disabled: this.isDisabled, onClick: this.type === 'dropdown' ? this.toggleDropdown : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.dropdownOpen) : undefined }, this.renderButtonContent()), this.renderDropdownList())));
-  }
-  static get is() { return "tttx-button-v2_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-button-v2.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-button-v2.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "notext": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "notext",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "iconcolor": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconcolor",
-        "reflect": false,
-        "defaultValue": "'black'"
-      },
-      "iconposition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconposition",
-        "reflect": false,
-        "defaultValue": "'left'"
-      },
-      "iconStart": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon-start",
-        "reflect": false
-      },
-      "iconEnd": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon-end",
-        "reflect": false
-      },
-      "design": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'primary'\n    | 'secondary'\n    | 'default'\n    | 'disabled'\n    | 'danger'\n    | 'light'\n    | 'success'\n    | 'warning'\n    | 'transparent'",
-          "resolved": "\"danger\" | \"default\" | \"disabled\" | \"light\" | \"primary\" | \"secondary\" | \"success\" | \"transparent\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "design",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'button' | 'dropdown'",
-          "resolved": "\"button\" | \"dropdown\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'button'"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "options": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | { id?: string; label: string; icon?: string }[]",
-          "resolved": "string | { id?: string; label: string; icon?: string; }[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "options",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'S' | 'M' | 'L'",
-          "resolved": "\"L\" | \"M\" | \"S\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'M'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "dropdownOpen": {},
-      "dropdownDirection": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "optionSelect",
-        "name": "optionSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
-        "method": "dropdownCloseEvent",
-        "name": "dropdownCloseEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClickOutside",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h, } from '@stencil/core';
+export class TttxButton {
+  constructor() {
+    this.calculateDropdownDirection = () => {
+      const rect = this.host.getBoundingClientRect();
+      const dropdownEl = this.host.querySelector('.dropdown-list');
+      const dropdownWidth = dropdownEl ? dropdownEl.offsetWidth : 260;
+      const spaceRight = window.innerWidth - rect.right;
+      const spaceLeft = rect.left;
+      if (spaceRight > dropdownWidth) {
+        this.dropdownDirection = 'right';
+      }
+      else if (spaceLeft > dropdownWidth) {
+        this.dropdownDirection = 'left';
+      }
+      else {
+        this.dropdownDirection = 'left';
+      }
+    };
+    this.toggleDropdown = () => {
+      if (!this.isDisabled) {
+        if (!this.dropdownOpen) {
+          this.calculateDropdownDirection();
+        }
+        this.dropdownOpen = !this.dropdownOpen;
+      }
+    };
+    this.handleDropdownItemClick = (index) => {
+      this.dropdownOpen = false;
+      this.optionSelect.emit(index);
+    };
+    this.notext = false;
+    this.icon = undefined;
+    this.label = undefined;
+    this.iconcolor = 'black';
+    this.iconposition = 'left';
+    this.iconStart = undefined;
+    this.iconEnd = undefined;
+    this.design = 'primary';
+    this.disabled = false;
+    this.type = 'button';
+    this.href = undefined;
+    this.options = [];
+    this.size = 'M';
+    this.dropdownOpen = false;
+    this.dropdownDirection = 'left';
+  }
+  get isDisabled() {
+    return this.disabled || this.design === 'disabled';
+  }
+  get parsedOptions() {
+    if (Array.isArray(this.options)) {
+      return this.options.map(opt => typeof opt === 'string'
+        ? { label: opt }
+        : {
+          id: opt.id,
+          label: opt.label,
+          icon: opt.icon,
+        });
+    }
+    try {
+      const parsed = JSON.parse(this.options);
+      return parsed.map((opt) => typeof opt === 'string'
+        ? { label: opt }
+        : {
+          id: opt.id,
+          label: opt.label,
+          icon: opt.icon,
+        });
+    }
+    catch (_a) {
+      return [];
+    }
+  }
+  get iconSize() {
+    switch (this.size) {
+      case 'L':
+        return 24;
+      case 'M':
+        return 20;
+      case 'S':
+      default:
+        return 16;
+    }
+  }
+  componentWillLoad() {
+    const validDesigns = [
+      'primary',
+      'secondary',
+      'default',
+      'disabled',
+      'danger',
+      'light',
+      'success',
+      'warning',
+      'transparent',
+    ];
+    const validSizes = ['S', 'M', 'L'];
+    if (!validDesigns.includes(this.design)) {
+      this.design = 'primary';
+    }
+    if (!validSizes.includes(this.size)) {
+      this.size = 'M';
+    }
+    if (['primary', 'danger', 'light', 'success', 'warning'].includes(this.design)) {
+      this.iconcolor = 'white';
+    }
+    if (this.design === 'transparent') {
+      this.iconcolor = '#1479c6';
+    }
+  }
+  handleClickOutside(event) {
+    if (this.dropdownOpen && !this.host.contains(event.target)) {
+      this.dropdownOpen = false;
+      this.dropdownCloseEvent.emit();
+    }
+  }
+  renderButtonContent() {
+    var _a;
+    return (h("div", { class: "button-content" }, this.iconStart && (h("div", { class: "icon-left" }, h("tttx-icon_1_9_103", { icon: this.iconStart, color: this.iconcolor, size: this.iconSize }))), !this.notext && (h("div", { class: "label-text" }, h("span", null, (_a = this.label) !== null && _a !== void 0 ? _a : h("slot", null)))), this.iconEnd && (h("div", { class: "icon-right" }, h("tttx-icon_1_9_103", { icon: this.iconEnd, color: this.iconcolor, size: this.iconSize }))), this.type === 'dropdown' && (h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_103", { icon: "keyboard_arrow_down", color: this.iconcolor, size: this.iconSize })))));
+  }
+  renderDropdownList() {
+    if (this.type !== 'dropdown' || !this.dropdownOpen)
+      return null;
+    const dropdownClasses = `dropdown-list dropdown-${this.dropdownDirection}`;
+    return (h("ul", { class: dropdownClasses, role: "listbox" }, this.parsedOptions.map((item, index) => (h("li", { class: "dropdown-option", role: "option", tabindex: 0, key: index, onClick: () => this.handleDropdownItemClick(index) }, h("div", { class: "dropdown-item-content" }, item.icon && (h("tttx-icon_1_9_103", { icon: item.icon, color: "black", size: this.iconSize, class: "dropdown-item-icon" })), h("span", { class: "dropdown-item-label" }, item.label)))))));
+  }
+  render() {
+    const classes = [
+      'button',
+      `btn-${this.design}`,
+      this.iconStart ? 'icon-start' : '',
+      this.iconEnd ? 'icon-end' : '',
+      this.notext ? 'notext' : '',
+      this.type === 'dropdown' ? 'dropdown-button' : '',
+      `btn-size-${this.size.toLowerCase()}`,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (h(Host, null, h("div", { class: "button-wrapper" }, h("button", { class: classes, disabled: this.isDisabled, onClick: this.type === 'dropdown' ? this.toggleDropdown : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.dropdownOpen) : undefined }, this.renderButtonContent()), this.renderDropdownList())));
+  }
+  static get is() { return "tttx-button-v2_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-button-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-button-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "notext": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "notext",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "iconcolor": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iconcolor",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "iconposition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iconposition",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-start",
+        "reflect": false
+      },
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-end",
+        "reflect": false
+      },
+      "design": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'primary'\n    | 'secondary'\n    | 'default'\n    | 'disabled'\n    | 'danger'\n    | 'light'\n    | 'success'\n    | 'warning'\n    | 'transparent'",
+          "resolved": "\"danger\" | \"default\" | \"disabled\" | \"light\" | \"primary\" | \"secondary\" | \"success\" | \"transparent\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "design",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'dropdown'",
+          "resolved": "\"button\" | \"dropdown\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "options": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | { id?: string; label: string; icon?: string }[]",
+          "resolved": "string | { id?: string; label: string; icon?: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'S' | 'M' | 'L'",
+          "resolved": "\"L\" | \"M\" | \"S\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'M'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownOpen": {},
+      "dropdownDirection": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "optionSelect",
+        "name": "optionSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "dropdownCloseEvent",
+        "name": "dropdownCloseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClickOutside",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}