@scania/tegel 1.18.0-beta.0 → 1.18.0-beta.2

package/dist/esm/tds-dropdown_2.entry.js

@@ -1,560 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
-
-/**
- * Find the next focusable element index in a list of focusable elements.
- * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
- * @param nextItemIndex The index in the list to start the search on.
- */
-const findNextFocusableElement = (items, nextItemIndex) => {
-    if (items[nextItemIndex] === undefined) {
-        return 0;
-    }
-    for (let index = nextItemIndex; index < items.length; index++) {
-        if (!items[index].disabled) {
-            return index;
-        }
-    }
-};
-
-/**
- * Find the previous focusable element index in a list of focusable elements.
- *
- * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
- * @param nextItemIndex The index in the list to start the search on.
- */
-const findPreviousFocusableElement = (items, previousItemIndex) => {
-    if (items[previousItemIndex] === undefined) {
-        return items.length - 1;
-    }
-    for (let index = previousItemIndex; index >= 0; index--) {
-        if (!items[index].disabled) {
-            return index;
-        }
-    }
-};
-
-/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
- *
- * Appends a hidden input element to allow the component
- * work within and get picked up by a <form>.
- * @param element The element on which the input with be appended.
- * @param name Name of the input.
- * @param value The value of the input.
- * @param disabled Disables the input if true.
- * @param additionalAttributes Additional attributes that should be passed to the input.
- */
-const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
-    let input = element.querySelector('input');
-    if (!element.querySelector('input')) {
-        input = element.ownerDocument.createElement('input');
-        input.type = 'hidden';
-        if (additionalAttributes) {
-            additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
-        }
-        element.appendChild(input);
-    }
-    input.disabled = disabled;
-    input.name = name;
-    input.value = value || '';
-};
-
-const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-negative)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
-const TdsDropdownStyle0 = dropdownCss;
-
-const TdsDropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.tdsChange = createEvent(this, "tdsChange", 6);
-        this.tdsFocus = createEvent(this, "tdsFocus", 6);
-        this.tdsBlur = createEvent(this, "tdsBlur", 6);
-        this.tdsInput = createEvent(this, "tdsInput", 6);
-        this.setDefaultOption = () => {
-            if (this.defaultValue) {
-                const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
-                if (children.length === 0) {
-                    console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
-                    return;
-                }
-                const defaultValues = this.multiselect
-                    ? new Set(this.defaultValue.split(','))
-                    : [this.defaultValue];
-                const childrenMap = new Map(children.map((element) => [element.value, element]));
-                const matchedValues = Array.from(defaultValues).filter((value) => {
-                    const element = childrenMap.get(value);
-                    if (element) {
-                        element.setSelected(true);
-                        return true;
-                    }
-                    return false;
-                });
-                if (matchedValues.length > 0) {
-                    this.value = [...new Set(this.value ? [...this.value, ...matchedValues] : matchedValues)];
-                    this.setValueAttribute();
-                }
-                else {
-                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
-                }
-            }
-        };
-        /* Returns a list of all children that are tds-dropdown-option elements */
-        this.getChildren = () => {
-            const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
-            if (tdsDropdownOptions.length === 0) {
-                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
-            }
-            else
-                return tdsDropdownOptions;
-        };
-        this.getOpenDirection = () => {
-            var _a, _b, _c, _d, _e;
-            if (this.openDirection === 'auto' || !this.openDirection) {
-                const dropdownMenuHeight = (_b = (_a = this.dropdownList) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
-                const distanceToBottom = (_e = (_d = (_c = this.host).getBoundingClientRect) === null || _d === void 0 ? void 0 : _d.call(_c).top) !== null && _e !== void 0 ? _e : 0;
-                const viewportHeight = window.innerHeight;
-                if (distanceToBottom + dropdownMenuHeight + 57 > viewportHeight) {
-                    return 'up';
-                }
-                return 'down';
-            }
-            return this.openDirection;
-        };
-        /* Toggles the open state of the Dropdown and sets focus to the input element */
-        this.handleToggleOpen = () => {
-            if (!this.disabled) {
-                this.open = !this.open;
-                if (this.open) {
-                    this.focusInputElement();
-                }
-            }
-        };
-        /* Focuses the input element in the Dropdown, if the reference is present. */
-        this.focusInputElement = () => {
-            if (this.inputElement)
-                this.inputElement.focus();
-        };
-        this.getSelectedChildren = () => {
-            var _a;
-            return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((stringValue) => {
-                const matchingElement = this.getChildren().find((element) => element.value === stringValue);
-                return matchingElement;
-            }).filter(Boolean);
-        };
-        this.getSelectedChildrenLabels = () => {
-            var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
-        };
-        this.getValue = () => {
-            const labels = this.getSelectedChildrenLabels();
-            if (!labels) {
-                return '';
-            }
-            return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
-        };
-        this.setValueAttribute = () => {
-            var _a;
-            if (!this.value || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
-                this.host.removeAttribute('value');
-            }
-            else {
-                this.host.setAttribute('value', this.value.map((val) => val).toString());
-            }
-        };
-        this.handleFilter = (event) => {
-            this.tdsInput.emit(event);
-            const query = event.target.value.toLowerCase();
-            /* Check if the query is empty, and if so, show all options */
-            const children = this.getChildren();
-            if (query === '') {
-                children.forEach((element) => {
-                    element.removeAttribute('hidden');
-                    return element;
-                });
-                this.filterResult = null;
-                /* Hide the options that do not match the query */
-            }
-            else {
-                this.filterResult = children.filter((element) => {
-                    if (!this.normalizeString(element.textContent)
-                        .toLowerCase()
-                        .includes(this.normalizeString(query).toLowerCase())) {
-                        element.setAttribute('hidden', '');
-                    }
-                    else {
-                        element.removeAttribute('hidden');
-                    }
-                    return !element.hasAttribute('hidden');
-                }).length;
-            }
-        };
-        this.handleFilterReset = () => {
-            this.reset();
-            this.inputElement.value = '';
-            this.handleFilter({ target: { value: this.inputElement.value } });
-            this.inputElement.focus();
-        };
-        this.handleFocus = (event) => {
-            this.tdsFocus.emit(event);
-        };
-        this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
-        };
-        this.handleChange = () => {
-            var _a, _b;
-            this.tdsChange.emit({
-                name: this.name,
-                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
-            });
-        };
-        this.name = undefined;
-        this.disabled = false;
-        this.helper = undefined;
-        this.label = undefined;
-        this.labelPosition = undefined;
-        this.modeVariant = null;
-        this.openDirection = 'auto';
-        this.placeholder = undefined;
-        this.size = 'lg';
-        this.error = false;
-        this.multiselect = false;
-        this.filter = false;
-        this.normalizeText = true;
-        this.noResultText = 'No result';
-        this.defaultValue = undefined;
-        this.open = false;
-        this.value = undefined;
-        this.filterResult = undefined;
-        this.filterFocus = undefined;
-    }
-    /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
-    async reset() {
-        this.dropdownList.scrollTop = 0;
-        this.internalReset();
-        this.handleChange();
-    }
-    /** Method for setting the value of the Dropdown.
-     *
-     * Single selection example:
-     *
-     * <code>
-     *  dropdown.setValue('option-1', 'Option 1');
-     * </code>
-     *
-     * Multiselect example:
-     *
-     * <code>
-     *  dropdown.setValue(['option-1', 'option-2']);
-     * </code>
-     */
-    //  The label is optional here ONLY to not break the API. Should be removed for 2.0.
-    // @ts-ignore
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    async setValue(value, label) {
-        let nextValue;
-        if (typeof value === 'string')
-            nextValue = [value];
-        else
-            nextValue = value;
-        if (!this.multiselect && nextValue.length > 1) {
-            console.warn('Tried to select multiple items, but multiselect is not enabled.');
-            nextValue = [nextValue[0]];
-        }
-        nextValue = [...new Set(nextValue)];
-        this.internalReset();
-        for (let i = 0; i < nextValue.length; i++) {
-            const optionExist = this.getChildren().some((element) => element.value === nextValue[i]);
-            if (!optionExist) {
-                nextValue.splice(i, 1);
-            }
-        }
-        this.value = nextValue;
-        this.setValueAttribute();
-        this.selectChildrenAsSelectedBasedOnSelectionProp();
-        this.handleChange();
-        /* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
-        /* https://tegel.atlassian.net/browse/CDEP-2703 */
-        const selection = this.getSelectedChildren().map((element) => ({
-            value: element.value,
-            label: element.textContent.trim(),
-        }));
-        // Update inputElement value and placeholder text
-        if (this.filter) {
-            this.inputElement.value = this.getValue();
-        }
-        return selection;
-    }
-    /**
-     * @internal
-     */
-    async appendValue(value) {
-        if (this.multiselect && this.value) {
-            this.setValue([...this.value, value]);
-        }
-        else {
-            this.setValue(value);
-        }
-    }
-    /** Method for removing a selected value in the Dropdown. */
-    async removeValue(oldValue) {
-        var _a, _b;
-        let label;
-        if (this.multiselect) {
-            (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
-                var _a;
-                if (element.value === oldValue) {
-                    this.value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter((value) => value !== element.value);
-                    label = element.textContent.trim();
-                    element.setSelected(false);
-                }
-                return element;
-            });
-        }
-        else {
-            this.reset();
-        }
-        this.handleChange();
-        this.setValueAttribute();
-        /* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
-        /* https://tegel.atlassian.net/browse/CDEP-2703 */
-        return (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => ({ value, label }));
-    }
-    /** Method for closing the Dropdown. */
-    async close() {
-        this.open = false;
-    }
-    onAnyClick(event) {
-        if (this.open) {
-            // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-            const isClickOutside = !event.composedPath().includes(this.host);
-            if (isClickOutside) {
-                this.open = false;
-            }
-        }
-    }
-    async onKeyDown(event) {
-        // Get the active element
-        const { activeElement } = document;
-        if (!activeElement) {
-            return;
-        }
-        const children = this.getChildren();
-        if (event.key === 'ArrowDown') {
-            /* Get the index of the current focus index, if there is no
-            nextElementSibling return the index for the first child in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? children.findIndex((element) => element === activeElement.nextElementSibling)
-                : 0;
-            const elementIndex = findNextFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
-        }
-        else if (event.key === 'ArrowUp') {
-            /* Get the index of the current focus index, if there is no
-            previousElementSibling return the index for the first last in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
-                : 0;
-            const elementIndex = findPreviousFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
-        }
-        else if (event.key === 'Escape') {
-            this.open = false;
-        }
-    }
-    // If the Dropdown gets closed,
-    // this sets the value of the dropdown to the current selection labels or null if no selection is made.
-    handleOpenState() {
-        if (this.filter && this.multiselect) {
-            if (!this.open) {
-                this.inputElement.value = this.getValue();
-            }
-        }
-    }
-    componentWillLoad() {
-        this.setDefaultOption();
-    }
-    /** Method to handle slot changes */
-    handleSlotChange() {
-        this.setDefaultOption();
-    }
-    /** Method to check if we should normalize text */
-    normalizeString(text) {
-        return this.normalizeText ? text.normalize('NFD').replace(/\p{Diacritic}/gu, '') : text;
-    }
-    /** Method that resets the dropdown without emitting an event. */
-    internalReset() {
-        this.getChildren().forEach((element) => {
-            element.setSelected(false);
-            return element;
-        });
-        this.value = null;
-        this.setValueAttribute();
-    }
-    selectChildrenAsSelectedBasedOnSelectionProp() {
-        this.getChildren().forEach((element) => {
-            this.value.forEach((selection) => {
-                if (element.value !== selection) {
-                    // If not multiselect, we need to unselect all other options.
-                    if (!this.multiselect) {
-                        element.setSelected(false);
-                    }
-                }
-                else {
-                    element.setSelected(true);
-                }
-            });
-        });
-    }
-    render() {
-        var _a, _b, _c, _d;
-        appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: 'c756dc7221c39b901524bd0c28938bd166e412bc', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '5184a8c84d24e0f13379c95fc7ceb7791f1e25ab', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '601bc322ce765ed1ee52e1ee6a0894fcb335485b', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
-                filter: true,
-                focus: this.filterFocus,
-                disabled: this.disabled,
-                error: this.error,
-            } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
-                    label-inside-as-placeholder
-                    ${this.size}
-                    ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
-                    ` }, this.label)), h("input", {
-            // eslint-disable-next-line no-return-assign
-            ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
-                this.filterFocus = false;
-                if (this.multiselect) {
-                    this.inputElement.value = this.getValue();
-                }
-                this.handleBlur(event);
-            }, onFocus: (event) => {
-                this.open = true;
-                this.filterFocus = true;
-                if (this.multiselect) {
-                    this.inputElement.value = '';
-                }
-                this.handleFocus(event);
-                this.handleFilter({ target: { value: '' } });
-            }, onKeyDown: (event) => {
-                if (event.key === 'Escape') {
-                    this.open = false;
-                }
-            }
-        })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    this.handleFilterReset();
-                }
-            }, class: `clear-icon ${this.open && this.inputElement.value !== '' ? '' : 'hide'}`, name: "cross", size: "16px" }), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    this.handleToggleOpen();
-                }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
-                if (event.key === 'Escape') {
-                    this.open = false;
-                }
-            }, class: `
-                ${this.value ? 'value' : 'placeholder'}
-                ${this.open ? 'open' : 'closed'}
-                ${this.error ? 'error' : ''}
-                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
-                    label-inside-as-placeholder
-                    ${this.size}
-                    ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '71042ce1a28e3598ee37977b86ae887c68caad1d', ref: (element) => (this.dropdownList = element), class: `dropdown-list
-            ${this.size}
-            ${this.open ? 'open' : 'closed'}
-            ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'bf606ae5c67258fc04df20474cde59ff00ea90eb', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '2a1b20c4ad0acf3f6c7de06ef3e6a84e7879f398', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1c4cb2ca717f28fe16306729ae6cf555358a1a65', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '6b3a6054fa2e1f1b77c8520cdfab20ef5e7a4bf9', name: "error", size: "16px" }), this.helper))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenState"]
-    }; }
-};
-TdsDropdown.style = TdsDropdownStyle0;
-
-const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
-const TdsDropdownOptionStyle0 = dropdownOptionCss;
-
-const TdsDropdownOption = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.tdsSelect = createEvent(this, "tdsSelect", 6);
-        this.tdsFocus = createEvent(this, "tdsFocus", 6);
-        this.tdsBlur = createEvent(this, "tdsBlur", 6);
-        this.componentWillRender = () => {
-            this.parentElement =
-                this.host.parentElement.tagName === 'TDS-DROPDOWN'
-                    ? this.host.parentElement
-                    : this.host.getRootNode().host;
-            this.multiselect = this.parentElement.multiselect;
-            this.size = this.parentElement.size;
-            this.label = this.host.textContent.trim();
-        };
-        this.handleSingleSelect = () => {
-            if (!this.disabled) {
-                this.selected = true;
-                this.parentElement.appendValue(this.value);
-                this.parentElement.close();
-                this.tdsSelect.emit({
-                    value: this.value,
-                    selected: this.selected,
-                });
-            }
-        };
-        this.handleMultiselect = (event) => {
-            if (!this.disabled) {
-                if (event.detail.checked) {
-                    this.parentElement.appendValue(this.value);
-                    this.selected = true;
-                    this.tdsSelect.emit({
-                        value: this.value,
-                        selected: this.selected,
-                    });
-                }
-                else {
-                    this.parentElement.removeValue(this.value);
-                    this.selected = false;
-                    this.tdsSelect.emit({
-                        value: this.value,
-                        selected: this.selected,
-                    });
-                }
-                event.stopPropagation();
-            }
-        };
-        this.handleFocus = (event) => {
-            this.tdsFocus.emit(event);
-        };
-        this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
-        };
-        this.value = undefined;
-        this.disabled = false;
-        this.selected = false;
-        this.multiselect = undefined;
-        this.size = 'lg';
-    }
-    /** Method to select/deselect an option. */
-    async setSelected(selected) {
-        this.selected = selected;
-    }
-    render() {
-        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
-          ${this.size}
-          ${this.selected ? 'selected' : ''}
-          ${this.disabled ? 'disabled' : ''}
-          ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
-                if (event.key === 'Escape') {
-                    this.parentElement.close();
-                }
-            } }, h("tds-checkbox", { onTdsChange: (event) => {
-                this.handleMultiselect(event);
-            }, disabled: this.disabled, checked: this.selected, class: {
-                [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
-                this.handleSingleSelect();
-            }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return getElement(this); }
-};
-TdsDropdownOption.style = TdsDropdownOptionStyle0;
-
-export { TdsDropdown as tds_dropdown, TdsDropdownOption as tds_dropdown_option };

package/dist/esm/tds-side-menu-user-image_2.entry.js

@@ -1,33 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
-
-const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
-const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
-
-const TdsSideMenuUserImage = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.src = undefined;
-        this.alt = undefined;
-    }
-    render() {
-        return (h(Host, { key: 'cd4bcc9ba4ce93b20e39ab0782136518a99899a3' }, h("slot", { key: '09bf0b847a54c03474e9d5dcaad8d0a5a347dbfc' }), this.src && h("img", { key: '8d74e3733d69ac50f4fe07557b91aec07aa74605', src: this.src, alt: this.alt })));
-    }
-};
-TdsSideMenuUserImage.style = TdsSideMenuUserImageStyle0;
-
-const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
-const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
-
-const TdsSideMenuUserLabel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.heading = undefined;
-        this.subheading = undefined;
-    }
-    render() {
-        return (h(Host, { key: '5b26493d17e356fa885a7b615ed4bda03e751eb6' }, this.heading, this.subheading && h("div", { key: '2dc511289427ef2ea490fec0308119c42956113c', class: "subheading" }, this.subheading)));
-    }
-};
-TdsSideMenuUserLabel.style = TdsSideMenuUserLabelStyle0;
-
-export { TdsSideMenuUserImage as tds_side_menu_user_image, TdsSideMenuUserLabel as tds_side_menu_user_label };

package/dist/tegel/p-06d2fa56.entry.js

@@ -1 +0,0 @@
-import{r,h as t,H as s,g as a}from"./p-2049fab2.js";import{g as e}from"./p-11648030.js";import{i as o}from"./p-0bd4c19c.js";import"./p-3fe9cbbf.js";const h=class{constructor(t){r(this,t),this.uuid=e(),this.open=!1,this.buttonEl=void 0,this.hasListTypeMenu=!1}onAnyClick(r){!r.composedPath().includes(this.host)&&(this.open=!1)}componentDidLoad(){const r=!!this.host.querySelector("tds-header-launcher-list");this.hasListTypeMenu=r}toggleLauncher(){this.open=!this.open}render(){this.ariaAttributes=Object.assign(Object.assign({},this.ariaAttributes),o(this.host,["role"]));const r=Object.assign(Object.assign({},this.ariaAttributes),{"aria-expanded":`${this.open}`,"aria-controls":`launcher-${this.uuid}`,class:"button",active:this.open,onClick:()=>{this.toggleLauncher()},ref:r=>{this.buttonEl=r}});return t(s,{key:"28c3cec9d319219a00783f0743fc7e035b9b63f5"},t("div",{key:"a4372783a69578e1965bb14b2b3ad12e2752c472",class:{wrapper:!0,"state-open":this.open,"state-list-type-menu":this.hasListTypeMenu}},t("tds-header-launcher-button",Object.assign({key:"cad014a13dcd193c0b829033d600c07a342a78cc"},r)),this.buttonEl&&t("tds-popover-canvas",{key:"64c9c7e77f6e6825bd0ace40543e10c1444cb290",id:`tds-launcher-${this.uuid}`,class:"menu",referenceEl:this.buttonEl,placement:"bottom-start",show:this.open,offsetDistance:0,modifiers:[{name:"flip",options:{fallbackPlacements:[]}}]},this.open?t("slot",null):null)))}get host(){return a(this)}};h.style=":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";export{h as tds_header_launcher}

package/dist/tegel/p-088bfcd4.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as e,H as a,g as o}from"./p-2049fab2.js";import{g as r}from"./p-11648030.js";import{h as d}from"./p-ae110fc2.js";const i=class{constructor(e){t(this,e),this.tdsClose=s(this,"tdsClose",7),this.getIconName=()=>{switch(this.variant){case"information":default:return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick"}},this.handleClose=()=>{this.tdsClose.emit({toastId:this.toastId}).defaultPrevented||(this.hidden=!0)},this.handleShow=()=>{this.tdsClose.emit({toastId:this.toastId}).defaultPrevented||(this.hidden=!1)},this.toastId=r(),this.header=void 0,this.subheader=void 0,this.variant="information",this.hidden=!1,this.closable=!0,this.toastRole="alert"}async hideToast(){this.hidden=!0}async showToast(){this.hidden=!1}render(){const t=d("header",this.host),s=d("subheader",this.host),o=d("actions",this.host);return e(a,{key:"ee07540896c1aae0d8025b16e6b7794f1c5d8f4a",toastRole:this.toastRole,"aria-describedby":this.host.getAttribute("aria-describedby"),class:{hide:this.hidden,show:!this.hidden}},e("div",{key:"20a502c69ea5923dbd53fb8749c0c03a4aa4977b",class:`\n            wrapper\n            ${this.variant}`},e("tds-icon",{key:"4167e597b4603cdb7d522a8b86dcc9c5c382ecaa",name:this.getIconName(),size:"20px"}),e("div",{key:"31921a5a61b34711669cbc93583291581e95c86f",class:"content"},e("div",{key:"6d45456ec0c53cba6714af755a6fc2fa4db4405a",class:"header-subheader"},this.header&&e("div",{key:"3ac77ce9dfea028f0207214d99221ea5de0025cd",class:"header"},this.header),t&&e("slot",{key:"c746b1e1bd696fa8ed85e39bea4b6df0404a1a14",name:"header"}),this.subheader&&e("div",{key:"3f6496b6942d9a6ff9a425cd60e396d813f4da1b",class:"subheader"},this.subheader),s&&e("slot",{key:"8c3c3a8f926dbc077c63a562cd54afba693d6ea6",name:"subheader"})),o&&e("div",{key:"dc5e027546c10825168bf0907280479f29688c3d",class:"toast-bottom "+(s||this.subheader?"subheader":"no-subheader")},e("slot",{key:"e7593549992a4842a7f6c35ab93c06b902ad469b",name:"actions"}))),this.closable&&e("button",{key:"7b3d02c1b27263f550445a18a3f94a5064375a78",onClick:this.handleClose,class:"close"},e("tds-icon",{key:"69dffbd7b7e6be0dabd264683ea1bbf7c9413fae",name:"cross",size:"20px"}))))}get host(){return o(this)}};i.style=":host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 22px;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1;max-width:250px;word-break:break-word}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{margin-top:12px}:host slot[name=actions]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";export{i as tds_toast}

package/dist/tegel/p-0f38bea7.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as s,H as a,g as i}from"./p-2049fab2.js";const o=class{constructor(s){t(this,s),this.tdsCollapse=e(this,"tdsCollapse",3),this.internalTdsCollapse=e(this,"internalTdsCollapse",6),this.handleClick=()=>{this.tdsCollapse.emit({collapsed:!this.collapsed}).defaultPrevented||(this.collapsed=!this.collapsed,this.internalTdsCollapse.emit({collapsed:this.collapsed}))},this.collapsed=!1}collapseSideMenuEventHandler(t){this.collapsed=t.detail.collapsed}connectedCallback(){this.sideMenuEl=this.host.closest("tds-side-menu"),this.collapsed=this.sideMenuEl.collapsed}render(){return s(a,{key:"15266cdc6a39373563c89553817e1a6777f01f1c",role:"button",tabindex:"0",onClick:()=>{this.handleClick()}},s("div",{key:"813da1c78798289b4eed8342b6c00a837ae04b24",class:{wrapper:!0,"state-collapsed":this.collapsed}},s("tds-side-menu-item",{key:"44321406d890c741fff0ad1df9576588a6658ea5",class:{button:!0}},s("a",{key:"7e214b15daa5dac9df931a5d15f6ed80a52b5f7d"},s("svg",{key:"61928c3ba4c6e2357a426f0c0ca1a0de86365b6a",class:"icon",slot:"icon",fill:"none",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},s("path",{key:"5cbbfe5239506f994a0b17f11cae1ded3c1f643e","fill-rule":"evenodd","clip-rule":"evenodd",d:"M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z",fill:"currentColor"})),!this.collapsed&&s("slot",{key:"b63370f60320b46557e7d40cfad048e29c60109f"})))))}get host(){return i(this)}};o.style=":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";export{o as tds_side_menu_collapse_button}