@baloise/ds-core 17.2.4 → 17.2.5-nightly.20250115

package/components/bal-dropdown2.js

@@ -1,773 +0,0 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { i as inheritAttributes } from './attributes.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { p as rIC, b as waitAfterFramePaint, l as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers.js';
-import { b as balBrowser } from './browser.js';
-import { a as areArraysEqual } from './array.js';
-import { l as lodash_isnil } from './index3.js';
-import { F as FOCUS_KEYS } from './focus-visible.js';
-import { b as balFloatingUi } from './floating-ui.js';
-import { D as DropdownOptionUtil } from './option.js';
-import { c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-
-class DropdownAutoFillUtil {
-    constructor() {
-        this.handleAutoFill = async (ev) => {
-            stopEventBubbling(ev);
-            if (this.isAutoFillAllowed()) {
-                this.component.isAutoFilled = true;
-                const autoFillValue = this.component.nativeEl.value;
-                const newValue = await this.parseAutoFillValueWithOptions(autoFillValue);
-                if (newValue === undefined) {
-                    this.component.isAutoFilled = false;
-                    return;
-                }
-                if (!areArraysEqual(newValue, this.component.rawValue)) {
-                    this.component.valueUtil.updateRawValueBySelection(newValue, true);
-                }
-            }
-        };
-    }
-    connectedCallback(component) {
-        this.component = component;
-    }
-    isAutoFillAllowed() {
-        return !this.component.multiple;
-    }
-    async parseAutoFillValueWithOptions(autoFillValue) {
-        const options = await this.component.listEl.getOptions();
-        const value = undefined;
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (option.value === autoFillValue || option.label === autoFillValue) {
-                return [option.value];
-            }
-        }
-        return value;
-    }
-}
-
-const i18nBalDropdown = {
-    de: {
-        clearable: 'Löschen',
-        open: 'Öffnen',
-        close: 'Schließen',
-    },
-    en: {
-        clearable: 'clear',
-        open: 'Open',
-        close: 'Close',
-    },
-    fr: {
-        clearable: 'Effacer',
-        open: 'Ouvrir',
-        close: 'Fermer',
-    },
-    it: {
-        clearable: 'Cancellare',
-        open: 'Apri',
-        close: 'Chiudi',
-    },
-    nl: {
-        clearable: 'Wissen',
-        open: 'Open',
-        close: 'Sluiten',
-    },
-    es: {
-        clearable: 'Limpiar',
-        open: 'Abrir',
-        close: 'Cerrar',
-    },
-    pl: {
-        clearable: 'Wyczyść',
-        open: 'Otwórz',
-        close: 'Zamknij',
-    },
-    pt: {
-        clearable: 'Limpar',
-        open: 'Abrir',
-        close: 'Fechar',
-    },
-    sv: {
-        clearable: 'Rensa',
-        open: 'Öppna',
-        close: 'Stäng',
-    },
-    fi: {
-        clearable: 'Tyhjennä',
-        open: 'Avaa',
-        close: 'Sulje',
-    },
-};
-
-class DropdownEventsUtil {
-    constructor() {
-        this.handlePointerDown = () => {
-            this.component.isKeyboardMode = false;
-        };
-        this.handleKeydown = (ev) => {
-            this.component.isKeyboardMode = FOCUS_KEYS.includes(ev.key);
-        };
-    }
-    connectedCallback(component) {
-        this.component = component;
-    }
-    handleFocus(ev) {
-        this.component.hasFocus = true;
-        this.component.balFocus.emit(ev);
-    }
-    handleBlur(ev) {
-        if (!this.component.isExpanded) {
-            this.component.hasFocus = false;
-            rIC(() => this.component.balBlur.emit(ev));
-        }
-    }
-    handleClick(ev) {
-        if (!this.component.valueUtil.isDisabled()) {
-            if (this.component.chips) {
-                const targetEl = ev.target;
-                const closeEl = targetEl.closest('bal-close');
-                if (closeEl) {
-                    return;
-                }
-            }
-            if (this.component.clearable) {
-                const targetEl = ev.target;
-                const clearEl = targetEl.closest('.bal-dropdown__clear');
-                if (clearEl) {
-                    this.component.valueUtil.updateRawValueBySelection([]);
-                    return;
-                }
-            }
-            this.component.popupUtil.toggleList();
-        }
-    }
-    handleOutsideClick(ev) {
-        var _a;
-        if (this.component.isExpanded) {
-            if (!this.component.el.contains(ev.target)) {
-                this.component.isExpanded = false;
-                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
-                this.component.hasFocus = false;
-                rIC(() => this.component.balBlur.emit(ev));
-            }
-        }
-    }
-}
-
-class DropdownFocusUtil {
-    connectedCallback(component) {
-        this.component = component;
-    }
-    focusOptionByLabel(key, options = {}) {
-        this.component.labelToFocus = (this.component.labelToFocus + key).trim();
-        if (this.component.labelToFocus.length > 0) {
-            clearTimeout(this.keyHitTimeout);
-            this.keyHitTimeout = setTimeout(() => {
-                var _a;
-                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusByLabel(this.component.labelToFocus, options);
-            }, 100);
-            clearTimeout(this.timeout);
-            this.timeout = setTimeout(async () => {
-                this.component.labelToFocus = '';
-            }, 1000);
-        }
-    }
-}
-
-class DropdownFormSubmitUtil {
-    connectedCallback(component) {
-        this.component = component;
-        this.component.initialValue = this.component.value;
-    }
-    componentDidRender() {
-        if (this.component.selectEl) {
-            const options = this.component.selectEl.querySelectorAll('option');
-            options.forEach(option => {
-                if (this.component.rawValue.includes(option.value)) {
-                    option.selected = true;
-                }
-            });
-        }
-    }
-    // @Listen('reset', { capture: true, target: 'document' })
-    handle(ev) {
-        const formElement = ev.target;
-        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.component.el)) {
-            if (this.resetHandlerTimer) {
-                clearTimeout(this.resetHandlerTimer);
-            }
-            this.resetHandlerTimer = setTimeout(() => {
-                const newRawValue = this.component.valueUtil.parseValueString(this.component.initialValue);
-                this.component.valueUtil.updateRawValueBySelection(newRawValue);
-            }, 0);
-        }
-    }
-}
-const DropdownNativeSelect = ({ name, httpFormSubmit, multiple, required, disabled, rawValue, refSelectEl, }) => {
-    const block = BEM.block('dropdown');
-    return httpFormSubmit ? (h("select", { class: Object.assign({}, block.element('root').element('select').class()), "aria-hidden": "true", name: name, multiple: multiple, required: required, disabled: disabled, tabindex: -1, ref: refSelectEl }, rawValue.map((value) => (h("option", { key: value, value: value, selected: true }, value))))) : ('');
-};
-
-const DropdownIcon = ({ size, theme, icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
-    const block = BEM.block('dropdown');
-    if (loading) {
-        return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
-    }
-    else if (clearable && filled && !disabled) {
-        return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', tabIndex: -1, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)), block
-                .element('clear')
-                .modifier('theme-purple')
-                .class(theme === 'purple')) },
-            h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: theme === 'purple' ? 'close' : 'close-circle', size: size, color: theme === 'purple' ? 'primary' : 'grey' })));
-    }
-    else {
-        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, size: size, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : !filled && theme === 'purple' ? 'primary-light' : 'primary' }));
-    }
-};
-
-const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPropOptions, required, filter, multiple, contentHeight, refPanelEl, refListEl, }) => {
-    const block = BEM.block('dropdown');
-    return (h("div", { id: `${inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(isExpanded)), ref: refPanelEl },
-        h("bal-option-list", { multiple: multiple, disabled: isDisabled, filter: filter, required: required, contentHeight: contentHeight, ref: refListEl },
-            h("slot", null),
-            hasPropOptions
-                ? rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
-                : '')));
-};
-
-class DropdownPopupUtil {
-    constructor() {
-        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
-            lib
-                .computePosition(referenceEl, floatingEl, {
-                placement: 'bottom-start',
-                middleware: [lib.flip(), lib.shift()],
-            })
-                .then(({ x, y }) => {
-                Object.assign(floatingEl.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-            });
-        };
-    }
-    connectedCallback(component) {
-        this.component = component;
-    }
-    toggleList() {
-        if (!this.component.valueUtil.isDisabled()) {
-            if (this.component.isExpanded) {
-                this.collapseList();
-            }
-            else {
-                this.expandList();
-            }
-        }
-    }
-    async expandList() {
-        var _a;
-        if (this.component.panelEl) {
-            const lib = await balFloatingUi.load();
-            this.component.panelCleanup = lib.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(lib, this.component.el, this.component.panelEl));
-        }
-        this.component.isExpanded = true;
-        await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
-    }
-    collapseList() {
-        var _a;
-        this.component.isExpanded = false;
-        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
-        if (this.component.panelCleanup) {
-            this.component.panelCleanup();
-        }
-    }
-}
-
-class DropdownValueUtil {
-    connectedCallback(component) {
-        this.component = component;
-    }
-    componentDidLoad() {
-        setTimeout(() => this.valueChanged(this.component.value, undefined), 0);
-    }
-    isDisabled() {
-        return this.component.disabled || this.component.readonly;
-    }
-    isFilled() {
-        return this.component.rawValue && this.component.rawValue.length > 0;
-    }
-    valueChanged(newValue, oldValue) {
-        const newValueType = typeof newValue;
-        const oldValueType = typeof oldValue;
-        if (newValueType !== oldValueType) {
-            this.updateRawValueByValueProp(newValue);
-        }
-        if (newValueType === 'string' && newValue !== oldValue) {
-            this.updateRawValueByValueProp(newValue);
-        }
-        if (Array.isArray(newValue) && Array.isArray(oldValue) && !areArraysEqual(newValue, oldValue)) {
-            this.updateRawValueByValueProp(newValue);
-        }
-    }
-    updateRawValueBySelection(newRawValue = [], isAutoFilled = false) {
-        this.component.isAutoFilled = isAutoFilled;
-        this.updateRawValue(newRawValue);
-        if (this.component.multiple) {
-            this.component.balChange.emit(this.component.rawValue);
-        }
-        else {
-            this.component.balChange.emit(this.component.rawValue[0]);
-        }
-    }
-    parseValueString(newValue = []) {
-        let newRawValue = [];
-        if (!lodash_isnil(newValue) && newValue !== '') {
-            if (Array.isArray(newValue)) {
-                newRawValue = [...newValue.filter(v => !lodash_isnil(v))];
-            }
-            else {
-                if (newValue.split('').includes(',')) {
-                    newRawValue = [
-                        ...newValue
-                            .split(',')
-                            .filter(v => v)
-                            .map(v => v.trim()),
-                    ];
-                }
-                else {
-                    newRawValue = [newValue];
-                }
-            }
-        }
-        return newRawValue;
-    }
-    updateRawValueByValueProp(newValue = []) {
-        const newRawValue = this.parseValueString(newValue);
-        this.updateRawValue(newRawValue);
-    }
-    async updateRawValue(newRawValue = []) {
-        this.component.rawValue = newRawValue;
-        if (this.component.listEl) {
-            await this.component.listEl.updateSelected(this.component.rawValue);
-        }
-        await this.updateInputContent();
-    }
-    removeOption(option) {
-        const newRawValue = this.component.rawValue.filter(value => value !== option.value);
-        this.updateRawValueBySelection(newRawValue);
-    }
-    async updateInputContent() {
-        await waitAfterFramePaint();
-        if (this.component.listEl) {
-            this.component.choices = await this.component.listEl.getSelectedOptions(this.component.rawValue);
-            this.component.inputLabel = this.component.choices
-                .map(option => option.label.trim())
-                .sort()
-                .join(',');
-        }
-    }
-}
-const DropdownValue = ({ inlineLabel, filled, chips, placeholder, choices, invalid, disabled, readonly, onRemoveChip, }) => {
-    const block = BEM.block('dropdown');
-    if (filled) {
-        if (chips) {
-            return (h("div", { class: Object.assign({}, block.element('root').element('content').element('chips').class()) }, choices.map(option => (h("bal-tag", { key: option.value, "data-test": "bal-dropdown-chip", size: "small", invalid: invalid, disabled: disabled || readonly, closable: !(disabled || readonly), onBalCloseClick: () => onRemoveChip(option) }, option.label)))));
-        }
-        else {
-            return (inlineLabel && `${inlineLabel}: `) + choices.map(option => option.label).join(', ');
-        }
-    }
-    else {
-        return placeholder;
-    }
-};
-
-const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
-    const block = BEM.block('dropdown');
-    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", name: name, autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
-    if (httpFormSubmit) {
-        return h(Input, null);
-    }
-    return (h("form", { novalidate: true },
-        h(Input, null)));
-};
-
-const balDropdownCss = ":root{--bal-dropdown-control-background:var(--bal-color-white);--bal-dropdown-control-background-hover:var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background:var(--bal-color-grey-1);--bal-dropdown-control-native-input-background:transparent;--bal-dropdown-control-native-input-background-hover:transparent;--bal-dropdown-control-input-inverted-footer-background:transparent;--bal-dropdown-control-input-inverted-footer-background-hover:transparent;--bal-dropdown-control-input-multiple-background:transparent;--bal-dropdown-control-input-multiple-background-read-only-selection:transparent;--bal-dropdown-control-input-option-background:transparent;--bal-dropdown-control-input-option-background-selected:var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused:var(--bal-color-grey-2);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-2);--bal-dropdown-control-border-radius:var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color:var(--bal-color-grey-2);--bal-dropdown-control-border-color:var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused:var(--bal-color-primary);--bal-dropdown-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within:var(--bal-color-primary);--bal-dropdown-option-border-top-color:var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused:var(--bal-color-primary);--bal-dropdown-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color:var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;-ms-flex:1;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;-webkit-box-shadow:var(--bal-shadow-none);box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:-ms-flexbox;display:flex;width:100%;text-align:left;gap:.5rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{-ms-flex:1;flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size:var(--bal-text-size-normal);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:-webkit-autofill{opacity:1}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:block;visibility:hidden;opacity:0;min-width:100%;width:100%;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}.bal-dropdown__list--expanded{visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded,.bal-dropdown__root--theme-purple-expanded:hover,.bal-dropdown__root--theme-purple-expanded:active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:\"\";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}";
-const BalDropdownStyle0 = balDropdownCss;
-
-const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.balChange = createEvent(this, "balChange", 7);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.inputId = `bal-dropdown-${balDropdownIds++}`;
-        this.inheritedAttributes = {};
-        this.initialValue = [];
-        this.nativeOptions = [];
-        this.valueUtil = new DropdownValueUtil();
-        this.eventsUtil = new DropdownEventsUtil();
-        this.popupUtil = new DropdownPopupUtil();
-        this.optionUtil = new DropdownOptionUtil();
-        this.formSubmitUtil = new DropdownFormSubmitUtil();
-        this.focusUtil = new DropdownFocusUtil();
-        this.autoFillUtil = new DropdownAutoFillUtil();
-        /**
-         * LIFECYCLE
-         * ------------------------------------------------------
-         */
-        this.hasConnected = false;
-        this.listenToOptionChange = (ev) => {
-            this.optionUtil.listenToOptionChange(ev);
-        };
-        this.listenOnClickOutside = (ev) => {
-            this.eventsUtil.handleOutsideClick(ev);
-        };
-        this.resetHandler = (ev) => {
-            this.formSubmitUtil.handle(ev);
-        };
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.handleAutoFill = async (ev) => {
-            this.log('(handleAutoFill)', ev, this.nativeEl.value);
-            this.autoFillUtil.handleAutoFill(ev);
-        };
-        this.handleKeyDown = (ev) => {
-            var _a, _b, _c, _d, _e;
-            if (ev && ev.key) {
-                if (this.isExpanded) {
-                    /**
-                     * ⬇️ Arrow up key
-                     */
-                    if (isArrowDownKey(ev)) {
-                        stopEventBubbling(ev);
-                        (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focusNext();
-                        /**
-                         * ⬆️ Arrow up key
-                         */
-                    }
-                    else if (isArrowUpKey(ev)) {
-                        stopEventBubbling(ev);
-                        (_b = this.listEl) === null || _b === void 0 ? void 0 : _b.focusPrevious();
-                        /**
-                         * Go to top of the list
-                         */
-                    }
-                    else if (ev.key === 'Home' || ev.key === 'PageUp') {
-                        stopEventBubbling(ev);
-                        (_c = this.listEl) === null || _c === void 0 ? void 0 : _c.focusFirst();
-                        /**
-                         * Go to bottom of the list
-                         */
-                    }
-                    else if (ev.key === 'End' || ev.key === 'PageDown') {
-                        stopEventBubbling(ev);
-                        (_d = this.listEl) === null || _d === void 0 ? void 0 : _d.focusLast();
-                        /**
-                         * Select focused option
-                         */
-                    }
-                    else if (isEnterKey(ev)) {
-                        stopEventBubbling(ev);
-                        (_e = this.listEl) === null || _e === void 0 ? void 0 : _e.selectByFocus();
-                        /**
-                         * Close list
-                         */
-                    }
-                    else if (ev.key === 'Tab' || isEscapeKey(ev)) {
-                        this.popupUtil.collapseList();
-                        /**
-                         * Focus on label
-                         */
-                    }
-                    else if (ev.key.length === 1) {
-                        this.focusUtil.focusOptionByLabel(ev.key);
-                    }
-                }
-                else {
-                    /**
-                     * Open list
-                     */
-                    if (isEnterKey(ev) || isSpaceKey(ev)) {
-                        stopEventBubbling(ev);
-                        this.popupUtil.expandList();
-                        /**
-                         * Focus on label
-                         */
-                    }
-                    else if (ev.key.length === 1) {
-                        this.focusUtil.focusOptionByLabel(ev.key, { select: true });
-                    }
-                }
-            }
-            else {
-                // Close the popup on autofill
-                if (this.isExpanded) {
-                    this.popupUtil.collapseList();
-                }
-            }
-        };
-        this.rawOptions = [];
-        this.choices = [];
-        this.rawValue = [];
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.isAutoFilled = false;
-        this.isKeyboardMode = false;
-        this.inputLabel = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.httpFormSubmit = defaultConfig.httpFormSubmit;
-        this.labelToFocus = '';
-        this.autocomplete = 'off';
-        this.name = this.inputId;
-        this.placeholder = '';
-        this.inlineLabel = '';
-        this.icon = 'caret-down';
-        this.size = '';
-        this.theme = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.multiple = false;
-        this.chips = false;
-        this.clearable = false;
-        this.invalid = false;
-        this.required = false;
-        this.loading = false;
-        this.filter = 'includes';
-        this.contentHeight = 262;
-        this.inverted = false;
-        this.options = [];
-        this.value = [];
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    async optionChanged() {
-        this.optionUtil.optionChanged();
-    }
-    valueChanged(newValue, oldValue) {
-        this.valueUtil.valueChanged(newValue, oldValue);
-    }
-    connectedCallback() {
-        if (!this.hasConnected) {
-            this.eventsUtil.connectedCallback(this);
-            this.valueUtil.connectedCallback(this);
-            this.popupUtil.connectedCallback(this);
-            this.optionUtil.connectedCallback(this);
-            this.formSubmitUtil.connectedCallback(this);
-            this.focusUtil.connectedCallback(this);
-            this.autoFillUtil.connectedCallback(this);
-        }
-        addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
-        if (balBrowser.hasDocument) {
-            addEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
-            addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
-            addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
-            addEventListener(document, 'click', this.listenOnClickOutside);
-            addEventListener(document, 'reset', this.resetHandler, {
-                capture: true,
-            });
-        }
-        this.hasConnected = true;
-    }
-    disconnectedCallback() {
-        removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
-        if (balBrowser.hasDocument) {
-            removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
-            removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
-            removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
-            removeEventListener(document, 'click', this.listenOnClickOutside);
-            removeEventListener(document, 'reset', this.resetHandler, {
-                capture: true,
-            });
-        }
-    }
-    async componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
-        await this.optionUtil.componentWillRender();
-    }
-    componentDidRender() {
-        this.formSubmitUtil.componentDidRender();
-    }
-    componentDidLoad() {
-        this.valueUtil.componentDidLoad();
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-        this.region = state.region;
-        this.httpFormSubmit = state.httpFormSubmit;
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Sets the focus on the input element
-     */
-    async setFocus() {
-        if (this.nativeEl && !this.valueUtil.isDisabled()) {
-            await waitAfterIdleCallback();
-            this.nativeEl.focus();
-        }
-    }
-    /**
-     * Returns the value of the component
-     */
-    async getValue() {
-        return this.rawValue;
-    }
-    /**
-     * Sets the value to `[]`, the input value to ´''´ and the focus index to ´0´.
-     */
-    async clear() {
-        this.valueUtil.updateRawValueBySelection([]);
-    }
-    /**
-     * Opens the popup with option list
-     */
-    async open() {
-        if (!this.valueUtil.isDisabled() && this.panelEl) {
-            await this.popupUtil.expandList();
-        }
-    }
-    /**
-     * Closes the popup with option list
-     */
-    async close() {
-        if (!this.valueUtil.isDisabled() && this.panelEl) {
-            await this.popupUtil.collapseList();
-        }
-    }
-    /**
-     * Select option by passed value
-     */
-    async select(newValue) {
-        const parsedNewValue = this.valueUtil.parseValueString(newValue);
-        this.valueUtil.updateRawValueBySelection(parsedNewValue);
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('dropdown');
-        const isFilled = this.valueUtil.isFilled();
-        const hasSize = this.size !== '';
-        const size = `size-${this.size}`;
-        const hasTheme = this.theme !== '';
-        const theme = `theme-${this.theme}`;
-        const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
-        return (h(Host, { key: '76447733642f7e5cfafaee1d23b7db1d458fea13', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'f15d237a0aa27c7bc6d578b107547c2ba7b36ad3', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
-                .element('root')
-                .modifier(theme + '-filled')
-                .class(isFilled && hasTheme)), block
-                .element('root')
-                .modifier(theme + '-expanded')
-                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '8cd1f403f473212d52bb1d992e506e0db483ad11', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '5e58e0734c37d2827515449e5fe61f3fe489ad01', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'f289ba14f7120bfad09dfdfc2f034bdacaf52d74', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: 'c32cb85f707db22ed5774d0a6bbd904bc63ea69c', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'b263377bf16e268d3f555242e15325ba36d2b91f', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'cdfb11f2ef449f82ddf32f944cea8faea9027372', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '0a281eed8eea22ec5a345d8a1db295ad85b874ed' }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "options": ["optionChanged"],
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return BalDropdownStyle0; }
-}, [4, "bal-dropdown", {
-        "autocomplete": [1],
-        "name": [1],
-        "placeholder": [1],
-        "inlineLabel": [1, "inline-label"],
-        "icon": [1],
-        "size": [1],
-        "theme": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "multiple": [4],
-        "chips": [4],
-        "clearable": [4],
-        "invalid": [4],
-        "required": [4],
-        "loading": [4],
-        "filter": [1],
-        "contentHeight": [2, "content-height"],
-        "inverted": [4],
-        "options": [16],
-        "value": [1],
-        "rawOptions": [32],
-        "choices": [32],
-        "rawValue": [32],
-        "hasFocus": [32],
-        "isExpanded": [32],
-        "isAutoFilled": [32],
-        "isKeyboardMode": [32],
-        "inputLabel": [32],
-        "ariaForm": [32],
-        "language": [32],
-        "region": [32],
-        "httpFormSubmit": [32],
-        "labelToFocus": [32],
-        "configChanged": [64],
-        "setFocus": [64],
-        "getValue": [64],
-        "clear": [64],
-        "open": [64],
-        "close": [64],
-        "select": [64],
-        "setAriaForm": [64]
-    }, undefined, {
-        "options": ["optionChanged"],
-        "value": ["valueChanged"]
-    }]);
-__decorate([
-    Logger('bal-dropdown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Dropdown.prototype, "createLogger", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Dropdown.prototype, "configChanged", null);
-let balDropdownIds = 0;
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-dropdown"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Dropdown);
-            }
-            break;
-    } });
-}
-
-export { Dropdown as D, defineCustomElement as d };