xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-dropdown/xv-dropdown.css

@@ -0,0 +1,227 @@
+:host {
+  --dropdown-padding-x: 16px;
+  --dropdown-padding-y: 11px;
+  --dropdown-max-width: 300px;
+  display: block;
+  position: relative;
+  text-align: left;
+  max-width: min(var(--dropdown-max-width), 100%);
+}
+:host .label {
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+}
+:host .label ::slotted([slot=label]) {
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+}
+:host .control {
+  background-blend-mode: multiply;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px #8B8B8B inset;
+  transition: 0.2s ease-in-out background-color;
+  cursor: pointer;
+  margin: 4px 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background-color: var(--field-02, #FFF);
+  text-align: start;
+  inline-size: 100%;
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  block-size: calc(100% + 1px);
+  outline: none;
+  padding-block: var(--dropdown-padding-y);
+  padding-inline: var(--dropdown-padding-x);
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+:host .control_value, :host .control_placeholder {
+  flex: 1;
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary, #333);
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--fz-body, Tahoma);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  padding-inline: 0 1rem;
+}
+:host .control_placeholder {
+  color: var(--text-placeholder, #ACACAC);
+}
+:host .control_icon {
+  width: 18px;
+  height: 18px;
+}
+:host .control_icon.error {
+  color: var(--support-error, #F1290E);
+}
+:host .control_icon.warning {
+  color: var(--support-warning, #FF7F04);
+}
+:host .control_arrow {
+  box-sizing: border-box;
+  margin: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  text-align: start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  inset-inline-end: 0.75rem;
+  outline: none;
+  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+:host .control:hover {
+  background-color: var(--field-hover-02, #E9E9E9);
+}
+:host .control:active {
+  background-color: var(--layer-selected-02, #E3E3E3);
+}
+:host .options {
+  inset-block-start: 100%;
+  margin-block-start: 1px;
+  display: block;
+  max-block-size: 13.75rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  z-index: 10;
+  inline-size: 100%;
+  inset-inline: 0;
+  overflow-y: auto;
+  transition: max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  border-radius: 3px;
+  background-color: var(--field-02, #FFF);
+  scrollbar-width: thin;
+  scrollbar-color: var(--layer-accent-03) transparent;
+}
+:host .options ::slotted(.xv-dropdown-item) {
+  display: block;
+  max-block-size: 13.75rem;
+  inset-inline: 0;
+  box-sizing: border-box;
+  padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  color: var(--text-secondary, #515151);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  transition: 0.2s ease-in-out background-color;
+  user-select: none;
+}
+:host .options ::slotted(.xv-dropdown-item):after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  left: 10px;
+  width: calc(100% - 20px);
+  background-color: var(--border-subtle-01);
+}
+:host .options ::slotted(.xv-dropdown-item:hover) {
+  background-color: var(--layer-hover-02, #F7F7F7);
+}
+:host .options ::slotted(.xv-dropdown-item:active) {
+  background-color: var(--layer-selected-hover-02, #DADADA);
+}
+:host .options ::slotted(.xv-dropdown-item[selected]) {
+  background-color: var(--layer-selected-02, #E3E3E3);
+}
+:host .options ::slotted(.xv-dropdown-item[selected]:hover) {
+  background-color: var(--layer-selected-hover-02, #DADADA);
+}
+:host .options ::slotted(.xv-dropdown-item[disabled]) {
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:host .helper {
+  color: var(--text-helper, #646464);
+  font-family: var(--ff-heading, "IBM Plex Sans");
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  margin: 0;
+  padding: 0;
+}
+
+:host([open]) .control_arrow {
+  transform: rotate(180deg);
+}
+
+:host([disabled]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:host([disabled]) .control {
+  cursor: inherit;
+}
+:host([disabled]) .control:hover, :host([disabled]) .control:active, :host([disabled]) .control:focus-within {
+  background-color: transparent;
+}
+
+:host([error]) .control {
+  box-shadow: none;
+  outline: 2px solid var(--support-support-error, #F1290E);
+}
+:host([error]) .helper {
+  color: var(--text-error, #D62512);
+}
+
+:host([size=xs]) {
+  --dropdown-padding-y: 4px;
+}
+
+:host([size=sm]) {
+  --dropdown-padding-y: 7px;
+}
+
+:host([size=md]) {
+  --dropdown-padding-y: 11px;
+}
+
+:host([size=lg]) {
+  --dropdown-padding-y: 15px;
+}
+
+:host([size=xl]) {
+  --dropdown-padding-y: 16px;
+}

package/dist/collection/components/xv-dropdown/xv-dropdown.js

@@ -0,0 +1,340 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+import { forEach, setAttr } from "../../utils/utils";
+export class XvDropdown {
+    constructor() {
+        this.size = SIZE_VAR.MD;
+        this.selected = [];
+        this.selectedMap = new Map();
+        this.handleOpen = () => {
+            if (this.disabled || this.open)
+                return;
+            this.open = true;
+        };
+        this.handleClickOutside = (ev) => {
+            if (!this.open || this.el.contains(ev.target))
+                return;
+            if (this.open)
+                this.open = false;
+        };
+        this.addListeners = () => {
+            document.body.addEventListener('click', this.handleClickOutside);
+        };
+        this.removeListeners = () => {
+            document.body.removeEventListener('click', this.handleClickOutside);
+        };
+    }
+    openChangeHandle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.addListeners();
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    handleItemSelected({ detail }) {
+        const hasItem = this.selectedMap.has(detail.value);
+        if (this.multiple) {
+            if (detail.selected) {
+                if (!hasItem)
+                    this.selectedMap.set(detail.value, detail);
+            }
+            else {
+                if (hasItem) {
+                    if (this.required && this.selectedMap.size === 1)
+                        return;
+                    this.selectedMap.delete(detail.value);
+                }
+            }
+        }
+        else {
+            if (detail.selected) {
+                this.selectedMap.clear();
+                this.selectedMap.set(detail.value, detail);
+            }
+            else {
+                if (!this.required)
+                    this.selectedMap.clear();
+            }
+            this.open = false;
+        }
+        const optionElements = this.el.querySelectorAll('.xv-dropdown-item');
+        forEach(optionElements, (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
+        const values = Array.from(this.selectedMap.values());
+        this.selected = values.length === optionElements.length ?
+            ['Alle ausgewählt'] : values.length > 2 ?
+            [`${values.length} ausgewählt`] : values.map((v) => v.text);
+        this.changeSelection.emit(values);
+    }
+    render() {
+        return (h(Host, { key: '15875d176af5611e813f2964f0cc16b73f78f4a9', size: this.size, class: "xv-dropdown", role: "combobox", tabindex: this.disabled ? -1 : false }, h("label", { key: 'b54713d707c35f2949f211531a78bcce814edb68', class: "label" }, h("slot", { key: '260026fec6a1418e31e8c09624abcbd980cac52e', name: "label" }, this.label)), h("div", { key: 'fd62866b4c4c0ccdd0a73bbad312e52730c304bc', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.error && (h("svg", { key: 'a7cadc2b6a0bbf6fd6eec973295f5aa7d213aa41', class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: '4f7788a3c641883110852431c45cca12b66ea61b', fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))), (!this.error && !!this.warning) && (h("svg", { key: '47a4b4cb57cd92e4004ee0c87ec320690685b254', class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'b8899a6ebe68eac93bc2a302495f432e4c69c576', fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }))), h("svg", { key: 'db2f3eb74f7448bd2919e6d4d72724370ce32176', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'b901ab85d24518693cea72e894f200d0d26ca0fc', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '178935afee60cf396b2e2f0b7c8073e94892e2e8', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '07a6fda0c381d09bf275de08de770b09613ccb64', class: "helper" }, this.error || this.warning || this.helper))));
+    }
+    componentDidLoad() {
+        this.openChangeHandle();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+    static get is() { return "xv-dropdown-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multiple",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper",
+                "reflect": false
+            },
+            "warning": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "warning",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "selectedMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownItemData[]",
+                    "resolved": "DropdownItemData[]",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChangeHandle"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "itemSelected",
+                "method": "handleItemSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-dropdown.js.map

package/dist/collection/components/xv-dropdown/xv-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-dropdown-v2',\n  styleUrl: 'xv-dropdown.scss',\n  shadow: true,\n})\nexport class XvDropdown {\n  @Element() el: HTMLElement;\n  @Prop() disabled?: boolean;\n  @Prop() multiple?: boolean;\n  @Prop() required?: boolean;\n  @Prop({ reflect: true, mutable: true }) open?: boolean;\n  @Prop() error?: string;\n  @Prop() label?: string;\n  @Prop() helper?: string;\n  @Prop() warning?: string;\n  @Prop() placeholder?: string;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n  @State() selected: DropdownItemData['text'][] = [];\n  @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n  @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n  @Watch('open')\n  openChangeHandle() {\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.addListeners();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  @Listen('itemSelected')\n  handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n    const hasItem = this.selectedMap.has(detail.value);\n\n    if (this.multiple) {\n      if (detail.selected) {\n        if (!hasItem) this.selectedMap.set(detail.value, detail);\n      } else {\n        if (hasItem) {\n          if (this.required && this.selectedMap.size === 1) return;\n          this.selectedMap.delete(detail.value);\n        }\n      }\n    } else {\n      if (detail.selected) {\n        this.selectedMap.clear();\n        this.selectedMap.set(detail.value, detail);\n      } else {\n        if (!this.required) this.selectedMap.clear();\n      }\n      this.open = false;\n    }\n\n    const optionElements = this.el.querySelectorAll('.xv-dropdown-item');\n\n    forEach(\n      optionElements,\n      (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n    );\n\n    const values = Array.from(this.selectedMap.values());\n    this.selected = values.length === optionElements.length ?\n      ['Alle ausgewählt'] : values.length > 2 ?\n        [`${values.length} ausgewählt`] : values.map((v) => v.text);\n    this.changeSelection.emit(values);\n  }\n\n  private handleOpen = () => {\n    if (this.disabled || this.open) return;\n    this.open = true;\n  };\n\n  private handleClickOutside = (ev: MouseEvent) => {\n    if (!this.open || this.el.contains(ev.target as Node)) return;\n\n    if (this.open) this.open = false;\n  }\n\n  private addListeners = () => {\n    document.body.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeListeners = () => {\n    document.body.removeEventListener('click', this.handleClickOutside);\n  }\n\n  render() {\n    return (\n      <Host size={this.size} class=\"xv-dropdown\" role=\"combobox\" tabindex={this.disabled ? -1 : false}>\n        <label class=\"label\">\n          <slot name=\"label\">{this.label}</slot>\n        </label>\n\n        <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n          {this.selected.length ? (\n            <p class=\"control_value\">{this.selected.join(', ')}</p>\n          ) : (\n            <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n          )}\n\n          {this.error && (\n            <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n              <path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n            </svg>\n          )}\n          {(!this.error && !!this.warning) && (\n            <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n              <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n            </svg>\n          )}\n\n          <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n          </svg>\n        </div>\n\n        {this.open && <div class=\"options\">\n          <slot key=\"xv-dropdown-options\" />\n        </div>}\n\n        {(this.helper || this.error || this.warning) && (\n          <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n        )}\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openChangeHandle();\n  }\n\n  disconnectedCallback() {\n    this.removeListeners();\n  }\n}\n"]}