@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/collection/components/select/select.js

@@ -6,48 +6,26 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class Select {
   constructor() {
-    /**
-     * Indices of selected items
-     */
     this.selectedIndices = [];
-    /**
-     * Show clear button
-     */
     this.allowClear = false;
-    /**
-     * Selection mode
-     */
     this.mode = 'single';
-    /**
-     * Select is extendable
-     */
     this.editable = false;
-    /**
-     * If true the select will be in disabled state
-     */
     this.disabled = false;
-    /**
-     * If true the select will be in readonly mode
-     */
     this.readonly = false;
-    /**
-     * Input field placeholder
-     */
     this.i18nPlaceholder = 'Select an option';
-    /**
-     * Input field placeholder for editable select
-     */
     this.i18nPlaceholderEditable = 'Type of select option';
-    /**
-     * Select list header
-     */
     this.i18nSelectListHeader = 'Please select an option';
     this.dropdownShow = false;
+    this.value = undefined;
+    this.dropdownWrapperRef = undefined;
+    this.dropdownAnchor = undefined;
     this.isDropdownEmpty = false;
     this.hasFocus = false;
+    this.navigationItem = undefined;
+    this.inputText = undefined;
   }
   get items() {
     return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
@@ -218,292 +196,293 @@ export class Select {
   }
   render() {
     var _a, _b, _c;
-    return (h(Host, null,
-      h("div", { class: {
-          'form-control': true,
-          select: true,
-          focus: this.hasFocus,
-          editable: this.editable,
-          disabled: this.disabled,
-          readonly: this.readonly,
-        }, ref: (ref) => {
-          this.dropdownAnchor = ref;
-          if (!this.editable)
-            this.dropdownWrapperRef = ref;
-        } },
-        h("div", { class: "input-container" },
-          this.isMultipleMode ? (h("div", { class: "chips" }, (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              this.emitItemClick(item.value);
-            } }, item.label))))) : null,
-          h("div", { class: "trigger" },
-            h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
-                'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
-              }, placeholder: this.editable
-                ? this.i18nPlaceholderEditable
-                : this.i18nPlaceholder, value: this.getInputValue(), ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }),
-            this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
-                if (this.editable)
-                  this.dropdownWrapperRef = ref;
-              } },
-              h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))),
-        this.allowClear && (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.clear();
-          } })) : null),
-      h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, style: {
-          width: '100%',
-        }, class: {
-          'd-none': this.disabled ||
-            this.readonly ||
-            (this.isDropdownEmpty && !this.editable),
-        }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true },
-        h("div", { class: "select-list-header" }, this.i18nSelectListHeader),
-        h("slot", null),
-        h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }),
-        this.itemExists(this.inputText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
-            'add-item': true,
-            'd-none': !(this.editable && this.inputText),
-          }, label: this.inputText, onItemClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.emitAddItem(this.inputText);
-          } })))));
+    return (h(Host, null, h("div", { class: {
+        'form-control': true,
+        select: true,
+        focus: this.hasFocus,
+        editable: this.editable,
+        disabled: this.disabled,
+        readonly: this.readonly,
+      }, ref: (ref) => {
+        this.dropdownAnchor = ref;
+        if (!this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, h("div", { class: "input-container" }, this.isMultipleMode ? (h("div", { class: "chips" }, (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitItemClick(item.value);
+      } }, item.label))))) : null, h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+        'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
+      }, placeholder: this.editable
+        ? this.i18nPlaceholderEditable
+        : this.i18nPlaceholder, value: this.getInputValue(), ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
+        if (this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))), this.allowClear && (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.clear();
+      } })) : null), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, style: {
+        width: '100%',
+      }, class: {
+        'd-none': this.disabled ||
+          this.readonly ||
+          (this.isDropdownEmpty && !this.editable),
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("div", { class: "select-list-header" }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+        'add-item': true,
+        'd-none': !(this.editable && this.inputText),
+      }, label: this.inputText, onItemClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitAddItem(this.inputText);
+      } })))));
   }
   static get is() { return "ix-select"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select.css"]
-  }; }
-  static get properties() { return {
-    "selectedIndices": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indices of selected items"
-      },
-      "attribute": "selected-indices",
-      "reflect": false,
-      "defaultValue": "[]"
-    },
-    "allowClear": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show clear button"
-      },
-      "attribute": "allow-clear",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'single' | 'multiple'",
-        "resolved": "\"multiple\" | \"single\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selection mode"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'single'"
-    },
-    "editable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Select is extendable"
-      },
-      "attribute": "editable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If true the select will be in disabled state"
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If true the select will be in readonly mode"
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "i18nPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedIndices": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indices of selected items"
+        },
+        "attribute": "selected-indices",
+        "reflect": false,
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Input field placeholder"
+      "allowClear": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show clear button"
+        },
+        "attribute": "allow-clear",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "i-1-8n-placeholder",
-      "reflect": false,
-      "defaultValue": "'Select an option'"
-    },
-    "i18nPlaceholderEditable": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'single' | 'multiple'",
+          "resolved": "\"multiple\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selection mode"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'single'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Input field placeholder for editable select"
+      "editable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Select is extendable"
+        },
+        "attribute": "editable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "i-1-8n-placeholder-editable",
-      "reflect": false,
-      "defaultValue": "'Type of select option'"
-    },
-    "i18nSelectListHeader": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true the select will be in disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Select list header"
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true the select will be in readonly mode"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "i-1-8n-select-list-header",
-      "reflect": false,
-      "defaultValue": "'Please select an option'"
-    }
-  }; }
-  static get states() { return {
-    "dropdownShow": {},
-    "value": {},
-    "dropdownWrapperRef": {},
-    "dropdownAnchor": {},
-    "isDropdownEmpty": {},
-    "hasFocus": {},
-    "navigationItem": {},
-    "inputText": {}
-  }; }
-  static get events() { return [{
-      "method": "itemSelectionChange",
-      "name": "itemSelectionChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Item selection changed"
+      "i18nPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Input field placeholder"
+        },
+        "attribute": "i-1-8n-placeholder",
+        "reflect": false,
+        "defaultValue": "'Select an option'"
       },
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      }
-    }, {
-      "method": "addItem",
-      "name": "addItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Item added to selection"
+      "i18nPlaceholderEditable": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Input field placeholder for editable select"
+        },
+        "attribute": "i-1-8n-placeholder-editable",
+        "reflect": false,
+        "defaultValue": "'Type of select option'"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "i18nSelectListHeader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Select list header"
+        },
+        "attribute": "i-1-8n-select-list-header",
+        "reflect": false,
+        "defaultValue": "'Please select an option'"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownShow": {},
+      "value": {},
+      "dropdownWrapperRef": {},
+      "dropdownAnchor": {},
+      "isDropdownEmpty": {},
+      "hasFocus": {},
+      "navigationItem": {},
+      "inputText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelectionChange",
+        "name": "itemSelectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item selection changed"
+        },
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        }
+      }, {
+        "method": "addItem",
+        "name": "addItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item added to selection"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "selectedIndices",
-      "methodName": "watchSelectedIndices"
-    }, {
-      "propName": "inputText",
-      "methodName": "watchInputText"
-    }]; }
-  static get listeners() { return [{
-      "name": "itemClick",
-      "method": "onItemClicked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "onKeyDown",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "selectedIndices",
+        "methodName": "watchSelectedIndices"
+      }, {
+        "propName": "inputText",
+        "methodName": "watchInputText"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "itemClick",
+        "method": "onItemClicked",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }