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

package/components/bal-select.js

@@ -1,850 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as lodash_isnil } from './index3.js';
-import { p as rIC, d as waitAfterIdleCallback, h as deepReady, j as isDescendant, k as debounce } from './helpers.js';
-import { a as areArraysEqual } from './array.js';
-import { r as removeValue, p as preventDefault, l as length, g as getValues, i as includes, s as startsWith, a as addValue, f as findLabelByValue, b as findOptionByLabel, v as validateAfterBlur } from './utils.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { d as defineCustomElement$7 } from './bal-checkbox2.js';
-import { d as defineCustomElement$6 } from './bal-close2.js';
-import { d as defineCustomElement$5 } from './bal-icon2.js';
-import { d as defineCustomElement$4 } from './bal-popover2.js';
-import { d as defineCustomElement$3 } from './bal-popover-content2.js';
-import { d as defineCustomElement$2 } from './bal-tag2.js';
-import { a as isSpaceKey, c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, k as isBackspaceKey } from './keyboard.helpers.js';
-
-const watchForOptions = (containerEl, tagName, onChange) => {
-    /* tslint:disable-next-line */
-    if (typeof MutationObserver === 'undefined') {
-        return;
-    }
-    const mutation = new MutationObserver(mutationList => {
-        mutationList = mutationList.filter(record => record.target.nodeName === tagName.toUpperCase() || record.target.nodeName === 'bal-select'.toUpperCase());
-        if (mutationList.length > 0) {
-            onChange(undefined);
-        }
-    });
-    mutation.observe(containerEl, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-    });
-    return mutation;
-};
-
-const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-color-grey-1);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-2);--bal-select-control-input-option-background-hover:var(--bal-color-grey-2);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{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-select__control{display:-ms-flexbox;display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
-const BalSelectStyle0 = balSelectCss;
-
-const isHuman = true;
-const isNotHuman = false;
-const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.balChange = createEvent(this, "balChange", 7);
-        this.balInputClick = createEvent(this, "balInputClick", 7);
-        this.balInput = createEvent(this, "balInput", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balCancel = createEvent(this, "balCancel", 7);
-        this.balKeyPress = createEvent(this, "balKeyPress", 7);
-        this.didInit = false;
-        this.inputId = `bal-select-${selectIds++}`;
-        this.initialValue = [];
-        this.removeValue = (value) => {
-            if (!this.disabled) {
-                this.updateRawValue(removeValue(this.rawValue, value), isHuman);
-                if (this.multiple && this.typeahead) {
-                    this.setFocus();
-                }
-                this.fireBlur();
-            }
-        };
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.fireBlur = (ev = new CustomEvent('blur')) => {
-            if (!this.isPopoverOpen && !this.hasFocus) {
-                rIC(() => this.balBlur.emit(ev));
-            }
-        };
-        this.handleClick = (ev) => {
-            if (this.disabled || this.readonly) {
-                preventDefault(ev);
-            }
-        };
-        this.handlePopoverChange = (ev) => {
-            ev.stopPropagation();
-            if (this.isPopoverOpen !== ev.detail) {
-                this.isPopoverOpen = ev.detail;
-                if (this.isPopoverOpen) {
-                    this.updateFocus();
-                }
-                else {
-                    this.focusIndex = -1;
-                    if (this.multiple && this.typeahead) {
-                        this.updateInputValue('');
-                    }
-                    this.fireBlur(ev);
-                }
-            }
-        };
-        this.handleInputBlur = (ev) => {
-            preventDefault(ev);
-            const target = ev.relatedTarget;
-            if (target === null ||
-                (target &&
-                    target.nodeName &&
-                    (target.nodeName === 'BAL-MODAL' || target.nodeName === 'INPUT' || target.nodeName === 'BUTTON'))) {
-                this.validateAfterBlur(isHuman);
-            }
-            this.hasFocus = false;
-            this.fireBlur(ev);
-        };
-        this.handleInputFocus = (ev) => {
-            this.balFocus.emit(ev);
-            this.hasFocus = true;
-        };
-        this.handleInputClick = async (ev, isIconClick = false) => {
-            var _a, _b, _c, _d;
-            stopEventBubbling(ev);
-            if (this.isChipClicked(ev)) {
-                return;
-            }
-            if (this.disabled || this.readonly) {
-                preventDefault(ev);
-            }
-            else {
-                this.focusIndex = -1;
-                this.balInputClick.emit(ev);
-                if (this.typeahead) {
-                    if (this.isPopoverOpen && isIconClick) {
-                        await ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.dismiss());
-                    }
-                    else {
-                        await ((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.present());
-                    }
-                }
-                else {
-                    if (this.isPopoverOpen) {
-                        await ((_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.dismiss());
-                    }
-                    else {
-                        await ((_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.present());
-                    }
-                }
-            }
-        };
-        this.handleKeyPress = async (ev) => {
-            if (!this.isPopoverOpen && isSpaceKey(ev)) {
-                preventDefault(ev);
-                await this.open();
-            }
-            this.balKeyPress.emit(ev);
-        };
-        this.handleInputChange = (ev) => {
-            if (!this.disabled && !this.readonly) {
-                this.inputValue = ev.target.value;
-            }
-        };
-        this.handleInput = async (ev) => {
-            if (!this.disabled && !this.readonly) {
-                this.inputValue = ev.target.value;
-                if (!this.isPopoverOpen) {
-                    this.popoverElement.present();
-                }
-                this.focusIndex = -1;
-                this.updateFocus();
-                preventDefault(ev);
-                this.balInput.emit(this.inputValue);
-            }
-        };
-        this.handleOptionMouseEnter = (index) => {
-            this.focusIndex = index;
-        };
-        this.hasFocus = false;
-        this.inputValue = '';
-        this.focusIndex = -1;
-        this.isPopoverOpen = false;
-        this.options = new Map();
-        this.labelToScrollTo = '';
-        this.labelToSelectTo = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.filter = 'includes';
-        this.balTabindex = 0;
-        this.freeSolo = false;
-        this.multiple = false;
-        this.maxLength = undefined;
-        this.noDataLabel = undefined;
-        this.autocomplete = 'off';
-        this.typeahead = false;
-        this.selectionOptional = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.inverted = false;
-        this.placeholder = undefined;
-        this.scrollable = 250;
-        this.loading = false;
-        this.remote = false;
-        this.autoInvalidOff = false;
-        this.value = [];
-        this.rawValue = [];
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueWatcher() {
-        this.syncRawValue(false);
-    }
-    updateRawValue(newValue, isHuman = true) {
-        if (!areArraysEqual(newValue, this.rawValue || [])) {
-            this.rawValue = [...newValue];
-            this.syncNativeInput();
-            if (this.didInit && isHuman === true) {
-                if (this.multiple) {
-                    if (lodash_isnil(this.rawValue)) {
-                        this.emitChangeEvent([]);
-                    }
-                    else {
-                        this.emitChangeEvent([...this.rawValue]);
-                    }
-                }
-                else {
-                    if (lodash_isnil(this.rawValue) || length(this.rawValue) === 0) {
-                        this.emitChangeEvent(undefined);
-                    }
-                    else {
-                        this.emitChangeEvent(this.rawValue[0]);
-                    }
-                }
-            }
-        }
-    }
-    emitChangeEvent(detail) {
-        this.balChange.emit(detail);
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        const debounceUpdateOptions = debounce(() => this.updateOptions(), 0);
-        this.initialValue = this.value;
-        debounceUpdateOptions();
-        this.mutationO = watchForOptions(this.el, 'bal-select-option', () => {
-            debounceUpdateOptions();
-        });
-    }
-    componentWillLoad() {
-        this.waitForOptionsAndThenUpdateRawValues();
-        this.isInsideOfFooter();
-        if (!lodash_isnil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
-            const firstOption = this.options.get(this.rawValue[0]);
-            if (!lodash_isnil(firstOption)) {
-                this.inputValue = firstOption.label;
-            }
-        }
-    }
-    componentDidLoad() {
-        this.syncRawValue(false);
-        if (!this.multiple) {
-            this.inputElement.value = this.inputValue;
-        }
-        this.didInit = true;
-    }
-    disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenOnClick(ev) {
-        if (this.disabled && ev.target && ev.target === this.el) {
-            preventDefault(ev);
-        }
-    }
-    resetHandler(ev) {
-        const formElement = ev.target;
-        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
-            if (this.resetHandlerTimer) {
-                clearTimeout(this.resetHandlerTimer);
-            }
-            this.resetHandlerTimer = setTimeout(() => {
-                this.value = this.initialValue;
-                this.syncRawValue(false);
-                this.syncNativeInput();
-                if (this.nativeSelectEl) {
-                    const options = Array.from(this.nativeSelectEl.options);
-                    options.forEach(o => (o.selected = true));
-                }
-            }, 0);
-        }
-    }
-    async handleKeyDown(ev) {
-        if (this.isPopoverOpen) {
-            if (isArrowDownKey(ev) || isArrowUpKey(ev)) {
-                preventDefault(ev);
-                this.navigateWithArrowKey(ev);
-                this.updateFocus();
-            }
-            if (isEnterKey(ev)) {
-                preventDefault(ev);
-                this.selectedFocusedOption();
-            }
-            if (isEscapeKey(ev)) {
-                this.cancel();
-            }
-            if (isBackspaceKey(ev) && this.typeahead && this.multiple) {
-                if (this.inputElement.value === '' && length(this.rawValue) > 0) {
-                    const valuesArray = getValues(this.rawValue);
-                    this.removeValue(valuesArray[length(this.rawValue) - 1]);
-                }
-            }
-            if (!this.typeahead && ev.key.length === 1) {
-                this.focusOptionByLabel(ev.key);
-            }
-            if (isSpaceKey(ev) && !this.typeahead) {
-                preventDefault(ev);
-            }
-        }
-        else {
-            if (this.hasFocus) {
-                if (isArrowDownKey(ev) || isArrowUpKey(ev)) {
-                    preventDefault(ev);
-                    await this.open();
-                }
-                if (!this.typeahead && ev.key.length === 1) {
-                    this.selectOptionByLabel(ev.key);
-                }
-            }
-        }
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Sets the focus on the input element
-     */
-    async setFocus() {
-        if (this.inputElement && !this.disabled) {
-            await waitAfterIdleCallback();
-            this.inputElement.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.focusIndex = -1;
-        if (this.inputElement) {
-            this.updateInputValue('');
-            this.updateRawValue([], isHuman);
-            this.value = this.multiple ? [] : '';
-        }
-    }
-    /**
-     * Opens the popover
-     */
-    async open() {
-        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
-            await this.popoverElement.present();
-        }
-    }
-    /**
-     * Closes the popover
-     */
-    async close() {
-        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
-            this.blurSelect();
-        }
-    }
-    /**
-     * Cancel the popover
-     */
-    async cancel() {
-        this.labelToScrollTo = '';
-        this.close();
-        this.scrollTo(0);
-        this.balCancel.emit();
-    }
-    /**
-     * Select option by passed value
-     */
-    async select(value) {
-        const option = this.options.get(value);
-        if (!lodash_isnil(option)) {
-            this.optionSelected(option);
-        }
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    async waitForOptionsAndThenUpdateRawValues() {
-        clearTimeout(this.waitForOptionsAndThenUpdateRawValuesTimer);
-        await deepReady(this.el);
-        const hasOptions = this.options.size > 0;
-        if (hasOptions) {
-            if (!this.remote) {
-                this.syncRawValue(isNotHuman);
-            }
-        }
-        else {
-            this.waitForOptionsAndThenUpdateRawValuesTimer = setTimeout(() => this.waitForOptionsAndThenUpdateRawValues(), 10);
-        }
-    }
-    async updateOptions() {
-        const optionElements = this.getChildOpts();
-        const options = new Map();
-        for (let index = 0; index < optionElements.length; index++) {
-            const element = optionElements[index];
-            options.set(element.value, {
-                value: element.value,
-                label: element.label,
-                disabled: element.disabled,
-                id: element.for,
-                textContent: element.textContent,
-                innerHTML: element.innerHTML,
-            });
-        }
-        if (!this.selectionOptional && Array.isArray(this.rawValue)) {
-            for (let index = 0; index < this.rawValue.length; index++) {
-                const val = this.rawValue[index];
-                if (!options.has(val)) {
-                    const newRawValue = removeValue(this.rawValue, val);
-                    this.updateRawValue(newRawValue, isNotHuman);
-                }
-            }
-        }
-        this.options = new Map(options);
-        if (!this.typeahead) {
-            await this.syncNativeInput();
-        }
-        if (this.didInit && !this.remote) {
-            this.validateAfterBlur();
-        }
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get optionArray() {
-        const options = Array.from(this.options, ([_, value]) => value);
-        if (!this.typeahead || this.remote) {
-            return options;
-        }
-        return options.filter(option => this.filter === 'includes'
-            ? includes(option.textContent, this.inputValue)
-            : startsWith(option.textContent, this.inputValue));
-    }
-    hasOptions() {
-        return this.optionArray.length > 0;
-    }
-    get inputPlaceholder() {
-        if (this.multiple) {
-            if (length(this.rawValue) < 1) {
-                return this.placeholder;
-            }
-            return undefined;
-        }
-        else {
-            if (!lodash_isnil(this.rawValue) && length(this.rawValue) > 0) {
-                return undefined;
-            }
-        }
-        return this.placeholder;
-    }
-    getChildOpts() {
-        return Array.from(this.el.querySelectorAll('bal-select-option'));
-    }
-    getPopoverContent() {
-        return this.popoverElement.querySelector('.bal-popover__content__inner');
-    }
-    updateFocus() {
-        if (this.focusIndex < -1) {
-            this.focusIndex = -1;
-        }
-        const visibleOptions = this.optionArray;
-        if (visibleOptions.length > 0) {
-            if (visibleOptions.length <= this.focusIndex) {
-                this.focusIndex = visibleOptions.length - 1;
-            }
-            const option = visibleOptions[this.focusIndex];
-            if (option && option.id) {
-                const focusedElement = this.el.querySelector(`button#${option.id}`);
-                if (focusedElement) {
-                    clearTimeout(this.updateFocusTimer);
-                    this.updateFocusTimer = setTimeout(() => {
-                        this.scrollToFocusedOption(focusedElement);
-                    }, 0);
-                }
-            }
-        }
-        else {
-            this.focusIndex = -1;
-        }
-    }
-    scrollToFocusedOption(focusedElement) {
-        if (focusedElement && this.popoverElement) {
-            const popoverContentElement = this.getPopoverContent();
-            if (popoverContentElement) {
-                // up
-                const topOfOption = focusedElement.offsetTop;
-                const topOfPopoverContent = popoverContentElement.scrollTop;
-                if (topOfOption < topOfPopoverContent) {
-                    popoverContentElement.scrollTop = topOfOption;
-                }
-                // down
-                const bottomOfOption = focusedElement.offsetTop + focusedElement.clientHeight;
-                const bottomOfPopoverContent = popoverContentElement.scrollTop + popoverContentElement.clientHeight;
-                if (bottomOfOption > bottomOfPopoverContent) {
-                    popoverContentElement.scrollTop = popoverContentElement.scrollTop + focusedElement.clientHeight;
-                }
-            }
-        }
-    }
-    scrollTo(scrollTop) {
-        const popoverContentElement = this.getPopoverContent();
-        if (popoverContentElement) {
-            popoverContentElement.scrollTop = scrollTop;
-        }
-    }
-    selectedFocusedOption() {
-        const visibleOptions = this.optionArray;
-        if (visibleOptions.length > this.focusIndex) {
-            const focusedOption = visibleOptions[this.focusIndex];
-            if (focusedOption) {
-                this.optionSelected(focusedOption);
-            }
-        }
-    }
-    navigateWithArrowKey(ev) {
-        if (isArrowDownKey(ev)) {
-            this.focusIndex = this.focusIndex + 1;
-        }
-        else {
-            if (isArrowUpKey(ev)) {
-                this.focusIndex = this.focusIndex - 1;
-            }
-        }
-    }
-    focusOptionByLabel(key) {
-        this.labelToScrollTo = this.labelToScrollTo + key;
-        clearTimeout(this.clearScrollToValue);
-        this.clearScrollToValue = setTimeout(() => {
-            this.scrollToLabel(this.labelToScrollTo);
-        }, 600);
-    }
-    selectOptionByLabel(key) {
-        this.labelToSelectTo = this.labelToSelectTo + key;
-        clearTimeout(this.clearSelectValue);
-        this.clearSelectValue = setTimeout(() => {
-            this.selectLabel(this.labelToSelectTo);
-            this.labelToSelectTo = '';
-        }, 600);
-    }
-    async selectLabel(label) {
-        if (label !== ' ') {
-            const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!lodash_isnil(option) && option.id) {
-                const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!lodash_isnil(optionElement)) {
-                    const index = this.optionArray.indexOf(option);
-                    this.focusIndex = index;
-                    this.select(option.value);
-                }
-            }
-            this.labelToScrollTo = '';
-        }
-    }
-    async scrollToLabel(label) {
-        if (label !== ' ') {
-            const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!lodash_isnil(option) && option.id) {
-                const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!lodash_isnil(optionElement)) {
-                    const index = this.optionArray.indexOf(option);
-                    this.focusIndex = index;
-                    this.scrollTo(optionElement.offsetTop);
-                }
-            }
-            this.labelToScrollTo = '';
-        }
-    }
-    /********************************************************
-     * VALUE & FILTER & SELECTION
-     ********************************************************/
-    syncRawValue(isHuman = true) {
-        let newValue = [];
-        if (!lodash_isnil(this.value) && this.value !== '') {
-            if (Array.isArray(this.value)) {
-                newValue = [...this.value.filter(v => !lodash_isnil(v))];
-            }
-            else {
-                if (this.value.split('').includes(',')) {
-                    newValue = [
-                        ...this.value
-                            .split(',')
-                            .filter(v => v)
-                            .map(v => v.trim()),
-                    ];
-                }
-                else {
-                    newValue = [this.value];
-                }
-            }
-        }
-        // trigger the raw value change
-        this.updateRawValue(newValue, isHuman);
-    }
-    blurSelect() {
-        this.popoverElement.dismiss();
-    }
-    optionSelected(selectedOption) {
-        const valuesArray = getValues(this.rawValue);
-        const isAlreadySelected = valuesArray.some(v => v === selectedOption.value);
-        this.updateValue(selectedOption.value, !isAlreadySelected);
-        if (!this.multiple) {
-            this.blurSelect();
-        }
-        else {
-            if (this.typeahead) {
-                this.setFocus();
-            }
-        }
-    }
-    updateValue(newValue, isSelected = true) {
-        if (this.multiple) {
-            if (isSelected) {
-                this.updateRawValue(addValue(this.rawValue, newValue, this.multiple), isHuman);
-            }
-            else {
-                this.updateRawValue(removeValue(this.rawValue, newValue), isHuman);
-            }
-        }
-        else {
-            this.updateRawValue(addValue(this.rawValue, newValue, this.multiple), isHuman);
-            if (this.rawValue && this.rawValue.length > 0) {
-                this.updateInputValue(findLabelByValue(this.options, this.rawValue[0]));
-            }
-        }
-    }
-    validateAfterBlur(isHuman = isNotHuman) {
-        let newRawValue = this.rawValue;
-        if (this.didInit && !this.multiple) {
-            if (this.typeahead && (this.selectionOptional || this.remote)) {
-                const typedOption = findOptionByLabel(this.options, this.inputElement.value);
-                if (typedOption) {
-                    newRawValue = [typedOption.value];
-                }
-                else {
-                    newRawValue = [this.inputElement.value];
-                }
-            }
-            else {
-                newRawValue = validateAfterBlur(this.rawValue, this.options, this.inputElement.value);
-            }
-            this.updateRawValue(newRawValue, isHuman);
-        }
-    }
-    syncNativeInput() {
-        if (!this.multiple) {
-            if (length(this.rawValue) > 0) {
-                const valuesArray = getValues(this.rawValue);
-                let label = findLabelByValue(this.options, valuesArray[0]);
-                if (!this.multiple && this.typeahead && this.selectionOptional && label === '') {
-                    label = valuesArray.join(', ');
-                }
-                return this.updateInputValue(label);
-            }
-        }
-        return Promise.resolve();
-    }
-    updateInputValue(value) {
-        return new Promise(resolve => {
-            if (this.updateInputValueTimer) {
-                clearTimeout(this.updateInputValueTimer);
-            }
-            this.updateInputValueTimer = setTimeout(() => {
-                if (!lodash_isnil(this.inputElement)) {
-                    this.inputElement.value = value;
-                    this.inputValue = value;
-                    resolve();
-                }
-            }, 0);
-        });
-    }
-    isChipClicked(ev) {
-        let isChipClicked = false;
-        if (this.multiple) {
-            const chips = this.selectionEl.querySelectorAll('bal-tag');
-            const target = ev.target;
-            chips.forEach(chip => {
-                const isChip = isDescendant(chip, target) || chip === target;
-                if (isChip) {
-                    isChipClicked = isChip;
-                }
-            });
-        }
-        return isChipClicked;
-    }
-    isInsideOfFooter() {
-        this.inverted = this.el.closest('bal-footer') !== null;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        var _a;
-        const Chip = (props) => (h("bal-tag", { key: '79401261d2710c20cf092eb9fbb7fb9df4a8b58c', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
-        const valuesArray = getValues(this.rawValue);
-        const block = BEM.block('select');
-        const nativeEl = block.element('native');
-        const controlEl = block.element('control');
-        const controlIconEl = controlEl.element('icon');
-        const controlSelectionsEl = controlEl.element('selections');
-        const controlInputEl = controlEl.element('input');
-        const popoverContentEl = block.element('popover');
-        const popoverContentEmptyEl = popoverContentEl.element('empty');
-        const optionEl = block.element('option');
-        const optionContentEl = optionEl.element('content');
-        const optionContentCheckboxEl = optionContentEl.element('checkbox');
-        const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '6f73b54fd82f27f6aec3afde83fa9b6df2b2783b', role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: 'acac08e4b77913e59024df94a888d06a9f839084', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '0bb66730c86b7730411c2ccee9fa1a1903b51df5', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '65ad688a0ea4c704e25eedf57cdde2f0b7042839', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '5c92ecce5f080f9219838cefa496b8f86e6a5e1e', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
-                .modifier('clickable')
-                .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
-            .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: 'f3fdeee4cd978843101e662b9654ff48c379a706', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
-                ? 'grey-light'
-                : this.inverted
-                    ? 'white'
-                    : this.invalid
-                        ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '858a34fd9deb5e3f681f44587d4b1092f0107386', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
-                .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '5df467dccba15602535dfacaae0ea7b410cf3d6d', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
-                .modifier('hidden')
-                .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["valueWatcher"]
-    }; }
-    static get style() { return BalSelectStyle0; }
-}, [0, "bal-select", {
-        "name": [1],
-        "invalid": [4],
-        "filter": [1],
-        "balTabindex": [2, "bal-tabindex"],
-        "freeSolo": [4, "free-solo"],
-        "multiple": [4],
-        "maxLength": [2, "max-length"],
-        "noDataLabel": [1, "no-data-label"],
-        "autocomplete": [1],
-        "typeahead": [4],
-        "selectionOptional": [4, "selection-optional"],
-        "disabled": [4],
-        "readonly": [4],
-        "required": [4],
-        "inverted": [4],
-        "placeholder": [1],
-        "scrollable": [2],
-        "loading": [4],
-        "remote": [4],
-        "autoInvalidOff": [516, "auto-invalid-off"],
-        "value": [1025],
-        "hasFocus": [32],
-        "inputValue": [32],
-        "focusIndex": [32],
-        "isPopoverOpen": [32],
-        "options": [32],
-        "labelToScrollTo": [32],
-        "labelToSelectTo": [32],
-        "ariaForm": [32],
-        "rawValue": [32],
-        "setFocus": [64],
-        "getValue": [64],
-        "clear": [64],
-        "open": [64],
-        "close": [64],
-        "cancel": [64],
-        "select": [64],
-        "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"], [8, "keydown", "handleKeyDown"]], {
-        "value": ["valueWatcher"]
-    }]);
-__decorate([
-    Logger('bal-select'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Select.prototype, "createLogger", null);
-let selectIds = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-select", "bal-checkbox", "bal-close", "bal-icon", "bal-popover", "bal-popover-content", "bal-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Select);
-            }
-            break;
-        case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "bal-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "bal-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "bal-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-tag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { S as Select, d as defineCustomElement$1 } from './bal-select2.js';
 
 const BalSelect = Select;
 const defineCustomElement = defineCustomElement$1;