@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

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

@@ -1,509 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * 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';
-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.isDropdownEmpty = false;
-    this.hasFocus = false;
-  }
-  get items() {
-    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
-  }
-  get selectedItems() {
-    return this.items.filter((item) => item.selected);
-  }
-  get addItemButton() {
-    return this.hostElement.querySelector('.add-item');
-  }
-  get isSingleMode() {
-    return this.mode === 'single';
-  }
-  get isMultipleMode() {
-    return this.mode === 'multiple';
-  }
-  watchSelectedIndices(newId) {
-    if (newId) {
-      this.selectValue([...newId]);
-    }
-  }
-  onItemClicked(event) {
-    const newId = event.detail;
-    this.emitItemClick(newId);
-  }
-  watchInputText(newValue) {
-    if (!this.editable) {
-      return;
-    }
-    if (this.itemExists(newValue)) {
-      return;
-    }
-  }
-  emitItemClick(newId) {
-    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
-      if (this.selectedIndices.includes(newId)) {
-        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
-      }
-      else {
-        this.selectedIndices = [...this.selectedIndices, newId];
-      }
-    }
-    else {
-      this.selectedIndices = [newId];
-    }
-    this.selectValue(this.selectedIndices);
-    this.itemSelectionChange.emit(this.selectedIndices);
-  }
-  emitAddItem(value) {
-    if (value.trim() === '') {
-      return;
-    }
-    const test = document.createElement('ix-select-item');
-    test.value = value;
-    test.label = value;
-    this.addItemRef.appendChild(test);
-    this.clearInput();
-    this.emitItemClick(value);
-    this.addItem.emit(value);
-  }
-  selectValue(ids) {
-    this.items.forEach((item) => {
-      item.selected = ids.some((i) => i === item.value);
-    });
-    this.value = this.selectedItems.map((item) => item.label);
-  }
-  componentWillLoad() {
-    if (this.selectedIndices) {
-      this.selectValue(Array.isArray(this.selectedIndices)
-        ? this.selectedIndices
-        : [this.selectedIndices]);
-    }
-  }
-  itemExists(item) {
-    return this.items.find((i) => i.label === item);
-  }
-  dropdownVisibilityChanged(event) {
-    this.dropdownShow = event.detail;
-    if (event.detail) {
-      this.inputRef.focus();
-      this.inputRef.select();
-      this.navigationItem = this.items[0];
-      this.setHoverEffectForNavigatedSelectItem();
-      this.removeHiddenFromItems();
-    }
-    this.hasFocus = event.detail;
-  }
-  async onKeyDown(event) {
-    if (!this.dropdownShow) {
-      return;
-    }
-    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-      this.onArrowNavigation(event);
-    }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      await this.onEnterNavigation();
-    }
-    if (event.code === 'Escape') {
-      this.dropdownShow = false;
-    }
-  }
-  async onEnterNavigation() {
-    var _a, _b;
-    if (this.editable && !this.itemExists(this.inputText)) {
-      this.emitAddItem(this.inputText);
-      this.navigationItem = this.items[this.items.length - 1];
-    }
-    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
-    await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
-    if (this.isSingleMode && !this.editable) {
-      this.dropdownShow = false;
-    }
-  }
-  onArrowNavigation(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    const selectItems = this.items.filter((i) => !i.classList.contains('d-none'));
-    const index = selectItems.indexOf(this.navigationItem);
-    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
-      this.navigationItem = selectItems[index + 1];
-    }
-    else if (event.code === 'ArrowUp' && index > 0) {
-      this.navigationItem = selectItems[index - 1];
-    }
-    this.setHoverEffectForNavigatedSelectItem();
-  }
-  setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item) => {
-      item.hover = item === this.navigationItem;
-    });
-  }
-  filterItemsWithTypeahead() {
-    this.inputText = this.inputRef.value;
-    if (this.inputText) {
-      this.items.forEach((item) => {
-        item.classList.remove('d-none');
-        if (!item.label.toLowerCase().includes(this.inputText.toLowerCase())) {
-          item.classList.add('d-none');
-        }
-      });
-    }
-    else {
-      this.removeHiddenFromItems();
-    }
-    this.isDropdownEmpty = this.items.every((item) => item.classList.contains('d-none'));
-  }
-  removeHiddenFromItems() {
-    this.items.forEach((item) => {
-      item.classList.remove('d-none');
-    });
-  }
-  clearInput() {
-    this.inputRef.value = '';
-    this.inputText = '';
-  }
-  clear() {
-    this.clearInput();
-    this.value = [];
-    this.selectedIndices = [];
-    this.itemSelectionChange.emit(null);
-  }
-  getInputValue() {
-    var _a;
-    if (this.isSingleMode) {
-      return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
-    }
-    return null;
-  }
-  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);
-          } })))));
-  }
-  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": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Input field placeholder"
-      },
-      "attribute": "i-1-8n-placeholder",
-      "reflect": false,
-      "defaultValue": "'Select an option'"
-    },
-    "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'"
-    },
-    "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
-    }]; }
-}

package/dist/collection/components/select-item/select-item.css

@@ -1,14 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-:host {
-  display: block;
-}
-:host ix-dropdown-item button {
-  margin-left: 1rem;
-}

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

@@ -1,169 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * 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, Method, Prop } from '@stencil/core';
-export class SelectItem {
-  constructor() {
-    /**
-     * Whether the item is selected.
-     */
-    this.selected = false;
-    /**
-     * ***Internal***
-     */
-    this.hover = false;
-  }
-  /**
-   * Internal
-   * @param event
-   */
-  async onItemClick(event) {
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    this.itemClick.emit(this.value);
-  }
-  componentDidRender() {
-    if (!this.value) {
-      throw Error('ix-select-item must have a `value` property');
-    }
-  }
-  render() {
-    return (h(Host, null,
-      h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
-  }
-  static get is() { return "ix-select-item"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["select-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select-item.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Displayed name of the item"
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "value": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Item value"
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the item is selected."
-      },
-      "attribute": "selected",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hover": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "***Internal***"
-      },
-      "attribute": "hover",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "itemClick",
-      "name": "itemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Item clicked"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "onItemClick": {
-      "complexType": {
-        "signature": "(event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "event"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "CustomEvent": {
-            "location": "global"
-          },
-          "HTMLIxDropdownItemElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Internal",
-        "tags": [{
-            "name": "param",
-            "text": "event"
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "hostElement"; }
-}