@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,1350 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { iconChevronDownSmall, iconClear, iconPlus, } from "@siemens/ix-icons/icons";
+import { h, Host, } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
+import { ArrowFocusController } from "../utils/focus";
+import { HookValidationLifecycle, } from "../utils/input";
+import { OnListener } from "../utils/listener";
+import { makeRef } from "../utils/make-ref";
+import { createMutationObserver } from "../utils/mutation-observer";
+/**
+ * @form-ready 2.6.0
+ */
+export class Select {
+    constructor() {
+        /**
+         * A Boolean attribute indicating that an option with a non-empty string value must be selected
+         *
+         * @since 2.6.0
+         */
+        this.required = false;
+        /**
+         * Current selected value.
+         * This corresponds to the value property of ix-select-items
+         * @since 2.0.0
+         */
+        this.value = [];
+        /**
+         * 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 = 'Select an option';
+        /**
+         * Information inside of dropdown if no items where found with current filter text
+         *
+         * @since 1.5.0
+         */
+        this.i18nNoMatches = 'No matches';
+        /**
+         * Hide list header
+         *
+         * @since 1.5.0
+         */
+        this.hideListHeader = false;
+        this.dropdownShow = false;
+        this.selectedLabels = [];
+        this.isDropdownEmpty = false;
+        this.inputFilterText = '';
+        this.inputValue = '';
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.dropdownWrapperRef = makeRef();
+        this.dropdownAnchorRef = makeRef();
+        this.inputRef = makeRef();
+        this.touched = false;
+        this.itemObserver = createMutationObserver(() => {
+            if (!this.arrowFocusController) {
+                return;
+            }
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        });
+        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+    }
+    get nonShadowItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+    }
+    get visibleNonShadowItems() {
+        return this.nonShadowItems.filter((item) => !item.classList.contains('display-none'));
+    }
+    get shadowItems() {
+        return Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item'));
+    }
+    get visibleShadowItems() {
+        return this.shadowItems.filter((item) => !item.classList.contains('display-none'));
+    }
+    get items() {
+        return [...this.nonShadowItems, ...this.shadowItems];
+    }
+    get visibleItems() {
+        return this.items.filter((item) => !item.classList.contains('display-none'));
+    }
+    get selectedItems() {
+        return this.items.filter((item) => item.selected);
+    }
+    get addItemButton() {
+        return this.hostElement.shadowRoot.querySelector('.add-item');
+    }
+    get isSingleMode() {
+        return this.mode === 'single';
+    }
+    get isMultipleMode() {
+        return this.mode === 'multiple';
+    }
+    get isEveryDropdownItemHidden() {
+        return this.items.every((item) => item.classList.contains('display-none'));
+    }
+    watchValue(value) {
+        this.value = value;
+        this.updateSelection();
+    }
+    watchDropdownShow(show) {
+        if (show && this.dropdownElement) {
+            this.itemObserver.observe(this.dropdownElement, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        else {
+            this.cleanupResources();
+        }
+    }
+    cleanupResources() {
+        var _a, _b;
+        (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.arrowFocusController = undefined;
+        (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    onItemClicked(event) {
+        const newId = event.detail;
+        this.itemClick(newId);
+    }
+    updateFormInternalValue(value) {
+        if (Array.isArray(value)) {
+            this.formInternals.setFormValue(value.join(','));
+            return;
+        }
+        this.formInternals.setFormValue(value);
+    }
+    /** @internal */
+    async hasValidValue() {
+        return this.required && !!this.hasValue();
+    }
+    hasValue() {
+        if (Array.isArray(this.value)) {
+            return !!this.value.length;
+        }
+        return !!this.value;
+    }
+    focusDropdownItem(index) {
+        var _a, _b;
+        this.navigationItem = undefined;
+        if (index < this.visibleNonShadowItems.length) {
+            const nestedDropdownItem = (_b = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-dropdown-item');
+            if (!nestedDropdownItem) {
+                return;
+            }
+            requestAnimationFrame(() => {
+                var _a, _b;
+                (_b = (_a = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            });
+        }
+    }
+    itemClick(newId) {
+        const oldValue = this.value;
+        const value = this.toggleValue(newId);
+        this.value = value;
+        const defaultPrevented = this.emitValueChange(value);
+        if (defaultPrevented) {
+            this.value = oldValue;
+            return;
+        }
+        this.updateSelection();
+    }
+    emitAddItem(value) {
+        var _a;
+        if (value === undefined || value.trim() === '') {
+            return false;
+        }
+        const { defaultPrevented } = this.addItem.emit(value);
+        if (defaultPrevented) {
+            return true;
+        }
+        const newItem = document.createElement('ix-select-item');
+        newItem.value = value;
+        newItem.label = value;
+        (_a = this.customItemsContainerElement) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
+        this.clearInput();
+        this.itemClick(value);
+        return false;
+    }
+    toggleValue(itemValue) {
+        if (!this.isMultipleMode) {
+            return itemValue;
+        }
+        if (!this.value) {
+            return [itemValue];
+        }
+        let value = this.value;
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+        if (value.includes(itemValue)) {
+            return value.filter((value) => value !== itemValue);
+        }
+        else {
+            return [...value, itemValue];
+        }
+    }
+    updateSelection() {
+        var _a, _b;
+        let ids = [];
+        if (this.value) {
+            ids = Array.isArray(this.value) ? [...this.value] : [this.value];
+        }
+        this.items.forEach((item) => {
+            item.selected = ids.some((i) => {
+                if (typeof i !== typeof item.value) {
+                    return i.toString() === item.value.toString();
+                }
+                else {
+                    return i === item.value;
+                }
+            });
+        });
+        this.selectedLabels = this.selectedItems.map((item) => item.label);
+        if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
+            this.inputValue = (_b = this.selectedLabels[0]) !== null && _b !== void 0 ? _b : '';
+        }
+        else {
+            this.inputValue = '';
+        }
+        this.inputElement && (this.inputElement.value = this.inputValue);
+    }
+    emitValueChange(value) {
+        const { defaultPrevented } = this.valueChange.emit(value);
+        if (defaultPrevented) {
+            return true;
+        }
+        this.updateFormInternalValue(value);
+        return false;
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
+            var _a;
+            this.dropdownShow = true;
+            this.inputChange.emit((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value);
+        });
+    }
+    componentWillLoad() {
+        this.updateSelection();
+        this.updateFormInternalValue(this.value);
+    }
+    componentDidRender() {
+        if (!this.dropdownShow ||
+            this.arrowFocusController ||
+            !this.dropdownElement) {
+            return;
+        }
+        this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
+        this.arrowFocusController.wrap =
+            !this.isAddItemVisible() && !this.visibleShadowItems.length;
+    }
+    onLabelChange(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.updateSelection();
+    }
+    disconnectedCallback() {
+        this.cleanupResources();
+    }
+    itemExists(item) {
+        return this.items.find((i) => i.label === item);
+    }
+    dropdownVisibilityChanged(event) {
+        var _a, _b;
+        this.dropdownShow = event.detail;
+        if (event.detail) {
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
+            this.removeHiddenFromItems();
+            this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+        }
+        else {
+            this.navigationItem = undefined;
+            this.updateSelection();
+            this.inputFilterText = '';
+        }
+    }
+    async onKeyDown(event) {
+        if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+            await this.onArrowNavigation(event, event.code);
+        }
+        if (!this.dropdownShow) {
+            return;
+        }
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            await this.onEnterNavigation(event.target);
+        }
+        if (event.code === 'Escape') {
+            this.dropdownShow = false;
+        }
+    }
+    async onEnterNavigation(el) {
+        if (this.isMultipleMode) {
+            return;
+        }
+        const trimmedInput = this.inputFilterText.trim();
+        const itemLabel = el === null || el === void 0 ? void 0 : el.label;
+        const item = this.itemExists(trimmedInput);
+        if (item) {
+            this.itemClick(item.value);
+        }
+        else if (this.editable && !this.itemExists(itemLabel)) {
+            const defaultPrevented = this.emitAddItem(trimmedInput);
+            if (defaultPrevented) {
+                return;
+            }
+        }
+        this.dropdownShow = false;
+        this.updateSelection();
+    }
+    async onArrowNavigation(event, key) {
+        var _a;
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropdownShow = true;
+        if (!this.navigationItem && document.activeElement === this.hostElement) {
+            if (this.visibleItems.length) {
+                this.applyFocusTo(this.visibleItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            return;
+        }
+        const moveUp = key === 'ArrowUp';
+        const indexNonShadow = document.activeElement
+            ? this.visibleNonShadowItems.indexOf(document.activeElement)
+            : -1;
+        // Slotted select items
+        if (indexNonShadow === 0) {
+            if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems.pop());
+            }
+            return;
+        }
+        else if (indexNonShadow !== -1 &&
+            indexNonShadow === this.visibleNonShadowItems.length - 1) {
+            if (this.visibleShadowItems.length) {
+                this.applyFocusTo(this.visibleShadowItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            return;
+        }
+        if (!this.navigationItem) {
+            return;
+        }
+        if (this.isAddItemVisible() &&
+            ((_a = this.addItemElement) === null || _a === void 0 ? void 0 : _a.contains(await this.navigationItem.getDropdownItemElement()))) {
+            if (moveUp) {
+                this.applyFocusTo(this.visibleItems.pop());
+            }
+            else if (this.visibleItems.length) {
+                this.applyFocusTo(this.visibleItems.shift());
+            }
+            return;
+        }
+        // Custom select items
+        const indexShadow = this.visibleShadowItems.indexOf(this.navigationItem);
+        if (moveUp) {
+            if (indexShadow === 0) {
+                if (this.visibleNonShadowItems.length) {
+                    this.applyFocusTo(this.visibleNonShadowItems.pop());
+                }
+                else if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);
+            }
+        }
+        else {
+            if (indexShadow === this.visibleShadowItems.length - 1) {
+                if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+                else {
+                    this.applyFocusTo(this.visibleItems.shift());
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);
+            }
+        }
+    }
+    applyFocusTo(element) {
+        if (!element) {
+            return;
+        }
+        this.navigationItem = element;
+        setTimeout(() => {
+            var _a, _b, _c, _d;
+            (_d = (_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown-item')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
+        });
+    }
+    focusAddItemButton() {
+        var _a, _b;
+        if (this.addItemButton) {
+            (_b = (_a = this.addItemButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            this.navigationItem = this.addItemElement;
+        }
+    }
+    filterItemsWithTypeahead() {
+        var _a, _b;
+        this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
+            return;
+        }
+        if (this.inputFilterText) {
+            this.items.forEach((item) => {
+                var _a;
+                item.classList.remove('display-none');
+                if (!((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.inputFilterText.toLowerCase()))) {
+                    item.classList.add('display-none');
+                }
+            });
+        }
+        else {
+            this.removeHiddenFromItems();
+        }
+        if (this.arrowFocusController) {
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        }
+        this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    }
+    removeHiddenFromItems() {
+        this.items.forEach((item) => {
+            item.classList.remove('display-none');
+        });
+    }
+    clearInput() {
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        this.inputFilterText = '';
+    }
+    clear() {
+        this.clearInput();
+        this.selectedLabels = [];
+        this.value = [];
+        this.emitValueChange([]);
+        this.dropdownShow = false;
+    }
+    onInputBlur(event) {
+        this.ixBlur.emit();
+        this.touched = true;
+        if (this.editable) {
+            return;
+        }
+        if (this.isSingleMode) {
+            return;
+        }
+        const target = event.target;
+        if (!this.dropdownShow && this.mode !== 'multiple') {
+            target.value = this.selectedLabels.toString();
+        }
+    }
+    placeholderValue() {
+        if (this.disabled) {
+            return '';
+        }
+        if (this.readonly) {
+            return '';
+        }
+        if (this.editable) {
+            return this.i18nPlaceholderEditable;
+        }
+        return this.i18nPlaceholder;
+    }
+    isAddItemVisible() {
+        return (!this.itemExists(this.inputFilterText) &&
+            this.editable &&
+            this.inputFilterText);
+    }
+    onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+        this.isInfo = isInfo;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /**
+     * Returns the native input element used in the component.
+     */
+    getNativeInputElement() {
+        if (this.inputElement) {
+            return Promise.resolve(this.inputElement);
+        }
+        else {
+            return Promise.reject(new Error('Input element not found'));
+        }
+    }
+    /**
+     * Focuses the input field
+     */
+    async focusInput() {
+        const inputElement = await this.getNativeInputElement();
+        if (inputElement) {
+            inputElement.focus();
+        }
+    }
+    /**
+     * Check if the input field has been touched.
+     * @internal
+     * */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '55e80c58e958e97655e20cba14b287ca41fe776d', "aria-disabled": a11yBoolean(this.disabled), class: {
+                disabled: this.disabled,
+            } }, h("ix-field-wrapper", { key: '50ed9d3c9b6e70f2e1d684bdac081c2efdd1c773', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '483a09e87ba81dc50db0d30c9858872af2603ff9', class: {
+                select: true,
+                disabled: this.disabled,
+                readonly: this.readonly,
+            }, ref: (ref) => {
+                this.dropdownAnchorRef(ref);
+                if (!this.editable)
+                    this.dropdownWrapperRef(ref);
+            } }, h("div", { key: '9e18c8c0882aaf5aadc80d259cd91ce1f7f52f82', class: "input-container" }, h("div", { key: '29307561099593acfb45603cebd2136d06ce547b', class: "chips" }, this.isMultipleMode
+            ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.itemClick(item.value);
+                } }, item.label)))
+            : '', h("div", { key: 'ea337cc33b09f544899a9d3d47764f880c8dfcff', class: "trigger" }, h("input", { key: 'ffeb71a4df620ea1611ecf69eca18015ef148496', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+                'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
+            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
+                this.inputElement = ref;
+                this.inputRef(ref);
+            }, onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+                this.navigationItem = undefined;
+            }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
+            !this.disabled &&
+            !this.readonly &&
+            (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: iconClear, ghost: true, oval: true, size: "16", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clear();
+            } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: iconChevronDownSmall, ghost: true, ref: (ref) => {
+                if (this.editable)
+                    this.dropdownWrapperRef(ref);
+            } }))))))), h("ix-dropdown", { key: '04161cb0115afc2e60efd249d393a9e81f42fe61', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+                'display-none': this.disabled || this.readonly,
+            }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+                var _a, _b;
+                const styleOverwrites = {};
+                const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                if (minWidth) {
+                    styleOverwrites.minWidth = `${minWidth}px`;
+                }
+                if (this.dropdownWidth) {
+                    styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`;
+                }
+                if (this.dropdownMaxWidth) {
+                    styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
+                }
+                return styleOverwrites;
+            } }, h("div", { key: '5a61493471aa83b381f064cfc40df1801784e965', class: {
+                'select-list-header': true,
+                hidden: this.hideListHeader || this.isDropdownEmpty,
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '26c2660ab8c2ff9d65d5255b1a23e775898d3b7b', onSlotchange: () => {
+                this.updateSelection();
+            } }), h("div", { key: '62f0835c1eb2c3678e22790c030f911b262abf54', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+                'add-item': true,
+            }, label: this.inputFilterText, onItemClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.emitAddItem(this.inputFilterText);
+            }, onFocus: () => (this.navigationItem = this.addItemElement), ref: (ref) => {
+                this.addItemElement = ref;
+            } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
+    }
+    static get is() { return "ix-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "A string that represents the element's name attribute,\ncontaining a name that identifies the element when submitting the form."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "A Boolean attribute indicating that an option with a non-empty string value must be selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Label for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Warning text for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Info text for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Error text for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Valid text for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Helper text for the select component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Show helper, error, info, warning text as tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.0.0"
+                        }],
+                    "text": "Current selected value.\nThis corresponds to the value property of ix-select-items"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear button"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": 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": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Select list header"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-select-list-header",
+                "reflect": false,
+                "defaultValue": "'Select an option'"
+            },
+            "i18nNoMatches": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.5.0"
+                        }],
+                    "text": "Information inside of dropdown if no items where found with current filter text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-no-matches",
+                "reflect": false,
+                "defaultValue": "'No matches'"
+            },
+            "hideListHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.5.0"
+                        }],
+                    "text": "Hide list header"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-list-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dropdownWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.7.0"
+                        }],
+                    "text": "The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\")."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-width",
+                "reflect": false
+            },
+            "dropdownMaxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.7.0"
+                        }],
+                    "text": "The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\nBy default the maximum width of the dropdown element is set to 100%."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-max-width",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dropdownShow": {},
+            "selectedLabels": {},
+            "isDropdownEmpty": {},
+            "navigationItem": {},
+            "inputFilterText": {},
+            "inputValue": {},
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.0.0"
+                        }],
+                    "text": "Value changed"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.0.0"
+                        }],
+                    "text": "Event dispatched whenever the text input changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "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": {}
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur input"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Returns the native input element used in the component.",
+                    "tags": []
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the input field",
+                    "tags": []
+                }
+            },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Check if the input field has been touched.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "dropdownShow",
+                "methodName": "watchDropdownShow"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "itemClick",
+                "method": "onItemClicked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "ix-select-item:valueChange",
+                "method": "onLabelChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "ix-select-item:labelChange",
+                "method": "onLabelChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}
+__decorate([
+    OnListener('keydown', (self) => self.dropdownShow)
+], Select.prototype, "onKeyDown", null);
+__decorate([
+    HookValidationLifecycle()
+], Select.prototype, "onValidationChange", null);
+//# sourceMappingURL=select.js.map