npm - @baloise/ds-core - Versions diffs - 19.9.5 → 20.0.0-next.4 - Mend

@baloise/ds-core 19.9.5 → 20.0.0-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2774) hide show

package/dist/esm/bal-check_7.entry.js DELETED Viewed

@@ -1,2172 +0,0 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-BdVwMG9u.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { F as FOCUS_KEYS } from './focus-visible-DqCbGYzv.js';
-import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
-import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-DYvzaBlM.js';
-import { i as isDescendant, v as hasTagName, r as rIC, a as waitAfterFramePaint, o as addEventListener, p as removeEventListener, b as waitAfterIdleCallback, m as raf } from './helpers-BNj87EbG.js';
-import { L as Logger } from './log-CwssmmaV.js';
-import { i as isSpaceKey, d as isArrowDownKey, b as isArrowUpKey, a as isEnterKey, j as isEscapeKey } from './keyboard.helpers-BERg8BNc.js';
-import { L as ListenToElementStates, B as BalElementStateListener } from './element-states.decorator-B68ANq1p.js';
-import { a as areArraysEqual } from './array-CDfSqLEo.js';
-import { L as ListenToFocus } from './focus.decorator-C1s3OoqI.js';
-import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
-import { b as balBrowser } from './browser-B1u-Mq75.js';
-import { i as isNil } from './index-zWZxKBfo.js';
-import { b as balFloatingUi } from './floating-ui-gZ7E41T8.js';
-import { D as DropdownOptionUtil } from './option-BLp4ll3i.js';
-import { d as defaultConfig } from './config.default-RE8-gLMQ.js';
-import { L as ListenToConfig } from './config.decorator-3bfyZ-0Y.js';
-import { i as includes, s as startsWith } from './utils-C_qktPg7.js';
-import './config.utils-B7jugjyM.js';
-import './listener-CClDIhvK.js';
-import './index-B4k_dH6V.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-const balCheckCss = ":root{--bal-check-size:1.5rem;--bal-check-border-width:2px;--bal-check-border-radius:var(--bal-radius-normal);--bal-check-color-inverted:var(--bal-color-white);--bal-check-border-color:var(--bal-color-primary);--bal-check-border-color-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-checked:var(--bal-color-primary);--bal-check-border-color-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-background:transparent;--bal-check-background-hovered:var(--bal-color-grey-2);--bal-check-background-pressed:var(--bal-color-grey-2);--bal-check-background-checked:var(--bal-color-primary);--bal-check-background-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-background-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-invalid:var(--bal-color-border-danger);--bal-check-border-color-invalid-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-pressed:var(--bal-color-border-danger-pressed);--bal-check-border-color-invalid-checked:var(--bal-color-border-danger);--bal-check-border-color-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-invalid:transparent;--bal-check-background-invalid-hovered:var(--bal-color-danger-1);--bal-check-background-invalid-pressed:var(--bal-color-danger-1);--bal-check-background-invalid-checked:var(--bal-color-border-danger);--bal-check-background-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-background-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-disabled:var(--bal-color-grey-2);--bal-check-border-color-disabled:var(--bal-color-border-grey-dark);--bal-check-background-checked-disabled:var(--bal-color-border-grey-dark);--bal-check-border-color-checked-disabled:var(--bal-color-border-grey-dark)}.bal-check{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--bal-check-size);max-width:var(--bal-check-size);height:var(--bal-check-size);max-height:var(--bal-check-size);border-radius:var(--bal-check-border-radius);overflow:hidden;border:var(--bal-check-border-width) solid var(--bal-check-border-color);background-color:var(--bal-check-background)}@media (hover: hover)and (pointer: fine){.bal-check--hovered,.bal-check:hover{background:var(--bal-check-background-hovered);border-color:var(--bal-check-border-color-hovered)}}.bal-check--pressed,.bal-check:active{background:var(--bal-check-background-pressed);border-color:var(--bal-check-border-color-pressed)}.bal-check bal-icon{opacity:0}.bal-check--checked{background-color:var(--bal-check-background-checked);border-color:var(--bal-check-border-color-checked)}.bal-check--checked bal-icon{opacity:1}@media (hover: hover)and (pointer: fine){.bal-check--checked.bal-check--hovered,.bal-check--checked:hover{background:var(--bal-check-background-checked-hovered);border-color:var(--bal-check-border-color-checked-hovered)}}.bal-check--checked.bal-check--pressed,.bal-check--checked:active{background:var(--bal-check-background-checked-pressed);border-color:var(--bal-check-border-color-checked-pressed)}.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--invalid{border-color:var(--bal-check-border-color-invalid);background-color:var(--bal-check-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--hovered,.bal-check--invalid:hover{background-color:var(--bal-check-background-invalid-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--pressed,.bal-check--invalid:active{background-color:var(--bal-check-background-invalid-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked{border-color:var(--bal-check-border-color-invalid);background:var(--bal-check-background-invalid-checked)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--checked.bal-check--hovered,.bal-check--invalid.bal-check--checked:hover{background-color:var(--bal-check-background-invalid-checked-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--checked.bal-check--pressed,.bal-check--invalid.bal-check--checked:active{background-color:var(--bal-check-background-invalid-checked-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--disabled{cursor:default !important;background:var(--bal-check-background-disabled) !important;border-color:var(--bal-check-border-color-disabled) !important}.bal-check--disabled.bal-check--checked{background-color:var(--bal-check-background-checked-disabled) !important;border-color:var(--bal-check-border-color-checked-disabled) !important}.bal-check--disabled.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted) !important}";
-const Check = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true` the component gets a invalid red style.
-         */
-        this.invalid = undefined;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = undefined;
-        /**
-         * If `true`, the checkbox is inverted and works on dark backgrounds.
-         */
-        this.inverted = undefined;
-        /**
-         * @internal
-         */
-        this.hovered = false;
-        /**
-         * @internal
-         */
-        this.pressed = false;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('check');
-        const checked = !!this.checked;
-        const disabled = !!this.disabled;
-        const invalid = !!this.invalid;
-        const inverted = !!this.inverted;
-        return (h(Host, { key: 'c995184b2f4adb6f6de85e17c13ea45f992c88aa', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: 'c93f453451f95b8ac79b25a0e9e71b6baa4e1ac9', name: "check", color: "white", colorHovered: "white", colorPressed: "white", size: "small", "aria-hidden": "true", hovered: this.hovered, pressed: this.pressed })));
-    }
-};
-Check.style = balCheckCss;
-const balCheckboxCss = "@media (hover: hover)and (pointer: fine){.bal-checkbox.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-checkbox-symbol-size:1.5rem;--bal-checkbox-symbol-border-width:2px;--bal-checkbox-symbol-background:transparent;--bal-checkbox-label-min-height:1.5rem;--bal-checkbox-button-background-hover:var(--bal-color-grey-2);--bal-checkbox-button-background-active:var(--bal-color-grey-2);--bal-checkbox-button-background-checked:var(--bal-color-primary);--bal-checkbox-button-background-checked-hover:var(--bal-color-light-blue-5);--bal-checkbox-button-background-checked-active:var(--bal-color-primary-6);--bal-checkbox-button-background-invalid:var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-hover:var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-active:var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-checked:var(--bal-color-border-danger);--bal-checkbox-button-background-invalid-checked-hover:var(--bal-color-danger-5);--bal-checkbox-button-background-invalid-checked-active:var(--bal-color-danger-6);--bal-checkbox-button-background-disabled-hover-active:var(--bal-color-grey-2);--bal-checkbox-button-background-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-checkbox-button-background:transparent;--bal-checkbox-button-background-checked-green:var(--bal-color-green-1);--bal-checkbox-button-background-checked-purple:var(--bal-color-purple-1);--bal-checkbox-button-background-checked-red:var(--bal-color-red-1);--bal-checkbox-button-background-checked-yellow:var(--bal-color-yellow-1);--bal-checkbox-button-background-disabled:var(--bal-color-grey-1);--bal-checkbox-button-background-hover:var(--bal-color-grey-1);--bal-checkbox-button-border-color:var(--bal-color-primary);--bal-checkbox-button-border-color-hover:var(--bal-color-light-blue-5);--bal-checkbox-button-border-color-active:var(--bal-color-primary-6);--bal-checkbox-button-border-color-invalid:var(--bal-color-border-danger);--bal-checkbox-button-border-color-invalid-hover:var(--bal-color-danger-5);--bal-checkbox-button-border-color-invalid-active:var(--bal-color-danger-6);--bal-checkbox-button-border-color-invalid-checked:var(--bal-color-border-danger);--bal-checkbox-button-border-color-invalid-checked-hover:var(--bal-color-danger-5);--bal-checkbox-button-border-color-invalid-checked-active:var(--bal-color-danger-6);--bal-checkbox-button-border-color-disabled-hover-active:var(--bal-color-border-grey-dark);--bal-checkbox-button-border-color-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-checkbox-tile-background:transparent;--bal-checkbox-tile-background-hover:var(--bal-color-grey-1);--bal-checkbox-tile-background-disabled:var(--bal-color-grey-1);--bal-checkbox-tile-background-invalid-hover:var(--bal-color-danger-1);--bal-checkbox-tile-background-invalid-active:var(--bal-color-danger-1);--bal-checkbox-tile-background-checked-green:var(--bal-color-green-1);--bal-checkbox-tile-background-checked-purple:var(--bal-color-purple-1);--bal-checkbox-tile-background-checked-red:var(--bal-color-red-1);--bal-checkbox-tile-background-checked-yellow:var(--bal-color-yellow-1);--bal-checkbox-tile-border-style:var(--bal-form-field-control-border-style);--bal-checkbox-tile-border-radius:var(--bal-form-field-control-radius);--bal-checkbox-tile-border-width:var(--bal-form-field-control-border-width);--bal-checkbox-tile-padding:var(--bal-text-size-medium);--bal-checkbox-tile-border-color:var(--bal-color-border);--bal-checkbox-tile-border-color-hover:var(--bal-color-border-primary-hovered);--bal-checkbox-tile-border-color-active:var(--bal-color-border-primary-pressed);--bal-checkbox-tile-border-color-invalid-hover:var(--bal-color-border-danger-hovered);--bal-checkbox-tile-border-color-invalid-active:var(--bal-color-border-danger-pressed);--bal-checkbox-tile-border-color-checked:var(--bal-color-border-primary);--bal-checkbox-tile-border-color-invalid:var(--bal-color-border-danger);--bal-checkbox-tile-border-color-disabled:var(--bal-color-border-grey-dark)}.bal-checkbox{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;outline:none;min-width:var(--bal-checkbox-symbol-size);border-radius:var(--bal-radius-normal);cursor:pointer}.bal-checkbox .bal-checkbox__label{cursor:pointer}.bal-checkbox--invisible{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-checkbox.bal-checkbox--flat{min-height:var(--bal-checkbox-symbol-size)}.bal-checkbox:not(.bal-checkbox--flat){min-height:3rem}.bal-checkbox--invalid{color:var(--bal-form-field-label-danger-color)}.bal-checkbox--disabled,.bal-checkbox--disabled .bal-checkbox__label{color:var(--bal-form-field-label-disabled-color);cursor:default}.bal-checkbox__input{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;width:100%;height:100%}.bal-checkbox__label{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:.5rem;-ms-flex-direction:row;flex-direction:row}.bal-checkbox__label__text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left;contain:layout style;font-family:var(--bal-font-family-text);padding-top:.25rem;padding-bottom:.25rem;width:100%}.bal-checkbox__label__text--hidden{display:none}.bal-checkbox__label__icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}@media (hover: hover)and (pointer: fine){.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-text-primary-hovered)}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__icon,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__icon{color:var(--bal-color-text-primary-hovered)}}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-text-primary-pressed)}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__icon,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__icon{color:var(--bal-color-text-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-text-danger-hovered)}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__icon,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):hover .bal-checkbox__label__icon{color:var(--bal-color-text-danger-hovered)}}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-text-danger-pressed)}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__icon,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):active .bal-checkbox__label__icon{color:var(--bal-color-text-danger-pressed)}.bal-checkbox--button{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-x-small);-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;padding-left:.75rem;padding-right:.75rem;min-width:3rem;border-width:2px;border-style:var(--bal-form-field-control-border-style);border-radius:var(--bal-form-field-control-radius);border-color:var(--bal-checkbox-button-border-color)}.bal-checkbox--button.bal-checkbox--checked{background:var(--bal-checkbox-button-background-checked);color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--invalid{border-color:var(--bal-color-border-danger);color:var(--bal-color-text-danger-hovered);background:var(--bal-color-danger-1)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked{color:var(--bal-color-white);background:var(--bal-color-border-danger)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--disabled{border-color:var(--bal-color-grey-4);background:var(--bal-color-grey-2)}.bal-checkbox--button.bal-checkbox--disabled .bal-checkbox__label__text{color:var(--bal-color-text-grey)}.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked{background:var(--bal-color-grey-4);color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}@media (hover: hover)and (pointer: fine){.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-hovered)}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-text-primary-hovered)}}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-pressed)}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-text-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-color-border-primary-hovered);border-color:var(--bal-color-border-primary-hovered)}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-white)}}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-color-border-primary-pressed);border-color:var(--bal-color-border-primary-pressed)}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-white)}@media (hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-hovered)}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-text-danger-hovered)}}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):active{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-pressed)}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-text-danger-pressed)}@media (hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):hover{background:var(--bal-color-border-danger-hovered);border-color:var(--bal-color-border-danger-hovered)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-white)}}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):active{background:var(--bal-color-border-danger-pressed);border-color:var(--bal-color-border-danger-pressed)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-white)}.bal-checkbox--tile{display:block;-ms-flex:0 0 100%;flex:0 0 100%;background:var(--bal-checkbox-tile-background);border-style:var(--bal-checkbox-tile-border-style);border-radius:var(--bal-checkbox-tile-border-radius);border-width:var(--bal-checkbox-tile-border-width);border-color:var(--bal-checkbox-tile-border-color);padding:var(--bal-checkbox-tile-padding)}.bal-checkbox--tile .bal-checkbox__label{height:100%;-ms-flex-align:stretch;align-items:stretch}.bal-checkbox--tile.bal-checkbox--checked{border-color:var(--bal-checkbox-tile-border-color-checked)}.bal-checkbox--tile.bal-checkbox--invalid{border-color:var(--bal-checkbox-tile-border-color-invalid)}.bal-checkbox--tile.bal-checkbox--disabled{background:var(--bal-checkbox-tile-background-disabled);border-color:var(--bal-checkbox-tile-border-color-disabled);cursor:default}@media (hover: hover)and (pointer: fine){.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-checkbox-tile-background-hover);border-color:var(--bal-checkbox-tile-border-color-hover)}}.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-checkbox-tile-background-hover);border-color:var(--bal-checkbox-tile-border-color-active)}@media (hover: hover)and (pointer: fine){.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover{background:var(--bal-checkbox-tile-background-invalid-hover);border-color:var(--bal-checkbox-tile-border-color-invalid-hover)}}.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled):active{background:var(--bal-checkbox-tile-background-invalid-active);border-color:var(--bal-checkbox-tile-border-color-invalid-active)}.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-green)}.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-red)}.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-purple)}.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-yellow)}@media screen and (min-width: 769px),print{.bal-checkbox--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}";
-const Checkbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balChange = createEvent(this, "balChange");
-        this.inputId = `bal-cb-${checkboxIds++}`;
-        this.inheritedAttributes = {};
-        this.keyboardMode = true;
-        this.hasLabel = true;
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * Track focus state
-         * If `true` checkbox needs to remain focused
-         */
-        this.wasFocused = false;
-        this.outerElementState = {
-            hovered: false,
-            pressed: false,
-        };
-        this.innerElementState = {
-            hovered: false,
-            pressed: false,
-        };
-        this.mergedElementState = {
-            hovered: false,
-            pressed: false,
-        };
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * Label of the radio item.
-         */
-        this.label = '';
-        /**
-         * If `true` the checkbox has no label
-         */
-        this.labelHidden = false;
-        /**
-         * If `true` the control is no padding
-         */
-        this.flat = false;
-        /**
-         * Defines the layout of the checkbox button
-         */
-        this.interface = 'checkbox';
-        /**
-         * A DOMString representing the value of the checkbox. This is not displayed on the
-         * client-side, but on the server this is the value given to the data
-         * submitted with the checkbox's name.
-         */
-        this.value = 'on';
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        this.initialValue = false;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not mutated, meaning the user can not edit the control.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * If `true`, the value will not be send with a form submit
-         */
-        this.nonSubmit = false;
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.invalid = false;
-        /**
-         * @internal
-         */
-        this.hovered = false;
-        /**
-         * @internal
-         */
-        this.pressed = false;
-        /**
-         * @internal
-         */
-        this.colSize = 1;
-        /**
-         * @internal
-         */
-        this.colSizeTablet = 1;
-        /**
-         * @internal
-         */
-        this.colSizeMobile = 1;
-        this.setChecked = (state) => {
-            this.checked = state;
-            this.balChange.emit(this.checked);
-        };
-        this.toggleChecked = (ev) => {
-            ev.preventDefault();
-            this.setFocus();
-            this.setChecked(!this.checked);
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                return;
-            }
-            const element = ev.target;
-            if (element && element.href) {
-                return;
-            }
-            if (this.wasFocused) {
-                this.focused = true;
-            }
-            this.toggleChecked(ev);
-        };
-        this.onFocus = (ev) => {
-            if (this.disabled || this.readonly) {
-                this.focused = false;
-                return stopEventBubbling(ev);
-            }
-            this.balFocus.emit(ev);
-            if (this.keyboardMode) {
-                this.focused = true;
-                this.wasFocused = true;
-            }
-        };
-        this.onBlur = (ev) => {
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            this.balBlur.emit(ev);
-            this.focused = false;
-        };
-        this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => {
-            if (!isSpaceKey(ev)) {
-                this.wasFocused = false;
-            }
-            this.keyboardMode = FOCUS_KEYS.includes(ev.key);
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    hoveredChanged() {
-        this.innerElementState = {
-            hovered: this.hovered,
-            pressed: this.pressed,
-        };
-        this.mergeElementState();
-    }
-    pressedChanged() {
-        this.innerElementState = {
-            hovered: this.hovered,
-            pressed: this.pressed,
-        };
-        this.mergeElementState();
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.hoveredChanged();
-        if (this.group) {
-            this.updateState();
-            this.group.addEventListener('balChange', () => this.updateState());
-        }
-        this.initialValue = this.checked;
-        this.el.addEventListener('keydown', this.onKeydown);
-        this.el.addEventListener('touchstart', this.onPointerDown);
-        this.el.addEventListener('mousedown', this.onPointerDown);
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-    }
-    componentWillRender() {
-        this.interactionChildElements.forEach(el => {
-            el.disabled = this.disabled || this.readonly;
-            el.invalid = this.invalid;
-            el.checked = this.checked;
-        });
-    }
-    disconnectedCallback() {
-        if (this.group) {
-            this.group.removeEventListener('balChange', () => this.updateState());
-        }
-        this.el.removeEventListener('keydown', this.onKeydown);
-        this.el.removeEventListener('touchstart', this.onPointerDown);
-        this.el.removeEventListener('mousedown', this.onPointerDown);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenOnClick(ev) {
-        if ((this.disabled || this.readonly) &&
-            ev.target &&
-            (ev.target === this.el || isDescendant(this.el, ev.target))) {
-            stopEventBubbling(ev);
-        }
-    }
-    resetHandler(ev) {
-        const formElement = ev.target;
-        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
-            this.checked = this.initialValue;
-        }
-    }
-    elementStateListener(info) {
-        this.outerElementState = info;
-        this.mergeElementState();
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Sets the focus on the checkbox input element.
-     */
-    async setFocus() {
-        inputSetFocus(this);
-    }
-    /**
-     * Sets blur on the native `input`. Use this method instead of the global
-     * `input.blur()`.
-     * @internal
-     */
-    async setBlur() {
-        inputSetBlur(this);
-    }
-    /**
-     * Returns the native `<input>` element used under the hood.
-     */
-    getInputElement() {
-        return Promise.resolve(this.nativeInput);
-    }
-    /**
-     * Options of the tab like label, value etc.
-     */
-    async getOption() {
-        return this.option;
-    }
-    /**
-     * @internal
-     */
-    async updateState() {
-        if (this.group && this.group.control && Array.isArray(this.group.value)) {
-            const newChecked = this.group.value.includes(this.value);
-            if (newChecked !== this.checked) {
-                this.checked = newChecked;
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get group() {
-        return this.el.closest('bal-checkbox-group');
-    }
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-check, bal-switch, bal-icon'));
-    }
-    get option() {
-        return {
-            name: this.name,
-            value: this.value,
-            checked: this.checked,
-            label: this.label,
-            labelHidden: this.labelHidden,
-            flat: this.flat,
-            interface: this.interface,
-            disabled: this.disabled,
-            readonly: this.readonly,
-            required: this.required,
-            nonSubmit: this.nonSubmit,
-            invalid: this.invalid,
-        };
-    }
-    /**
-     * EVENT HANDLERS
-     * ------------------------------------------------------
-     */
-    mergeElementState() {
-        this.mergedElementState = {
-            hovered: this.outerElementState.hovered || this.innerElementState.hovered,
-            pressed: this.outerElementState.pressed || this.innerElementState.pressed,
-        };
-        this.interactionChildElements.forEach(el => {
-            el.hovered = this.mergedElementState.hovered;
-            el.pressed = this.mergedElementState.pressed;
-        });
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('checkbox');
-        const inputEl = block.element('input');
-        const labelEl = block.element('label');
-        const labelTextEl = labelEl.element('text');
-        const labelIconEl = labelEl.element('icon');
-        const focused = this.focused && this.buttonTabindex !== -1;
-        const inputAttributes = this.inheritedAttributes;
-        if (this.buttonTabindex !== undefined) {
-            inputAttributes.tabIndex = this.buttonTabindex;
-        }
-        const hasFormControl = !this.nonSubmit;
-        const id = this.ariaForm.controlId || this.inputId;
-        const labelId = this.ariaForm.labelId || null;
-        const LabelTag = hasFormControl ? 'label' : 'span';
-        return (h(Host, { key: 'e6718d0f01496940fbc03686159599af02e63be2', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('button').class(this.interface === 'button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.mergedElementState.hovered)), block.modifier('pressed').class(this.mergedElementState.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
-                .modifier(`column-tablet-${this.colSizeTablet}`)
-                .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
-                .modifier(`column-mobile-${this.colSizeMobile}`)
-                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '3bd8c2c8217d5e958009aeb3465bd7c8446c6960', class: Object.assign({}, labelEl.class()), "data-testid": "bal-checkbox-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "checkbox", "data-testid": "bal-checkbox-input", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, this.interface === 'switch' ? (h("bal-switch", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed })) : (h("bal-check", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed })))) : (''), h("div", { key: 'c1d1b270f076b748681da1d4fdb36380e8bfaf45', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '123d7f262307eda399023cdc4ecbe6c83d352336' })))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "hovered": ["hoveredChanged"],
-        "pressed": ["pressedChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-checkbox'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Checkbox.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Checkbox.prototype, "elementStateListener", null);
-let checkboxIds = 0;
-Checkbox.style = balCheckboxCss;
-const balCheckboxGroupCss = ".bal-checkbox-group{display:inline-block;position:relative;width:100%}.bal-checkbox-group__inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-normal)}.bal-checkbox-group__inner--button{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex:1;flex:1;gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--button{-ms-flex-direction:row;flex-direction:row}}.bal-checkbox-group__inner--expanded{-ms-flex-align:stretch;align-items:stretch}.bal-checkbox-group__inner--expanded .bal-checkbox{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-checkbox-group__inner--expanded .bal-checkbox{width:100%}}.bal-checkbox-group__inner--button.bal-checkbox-group__inner--vertical{gap:var(--bal-space-x-small)}.bal-checkbox-group__inner--vertical{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--vertical{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 768px){.bal-checkbox-group__inner--vertical-mobile{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}}";
-const CheckboxGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.inputId = `bal-cg-${checkboxGroupIds++}`;
-        this.inheritedAttributes = {};
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * Defines the layout of the checkbox button
-         */
-        this.interface = undefined;
-        /**
-         * If `true` it acts as the main form control
-         */
-        this.control = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * Displays the checkboxes vertically
-         */
-        this.vertical = false;
-        /**
-         * If `true`, the controls will be vertically on mobile devices.
-         */
-        this.verticalOnMobile = false;
-        /**
-         * Uses the whole width
-         */
-        this.expanded = false;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.invalid = undefined;
-        /**
-         * If `true`, the user cannot interact with the checkboxes.
-         */
-        this.disabled = undefined;
-        /**
-         * If `true`, the user cannot interact with the checkboxes.
-         */
-        this.readonly = undefined;
-        /**
-         * The value of the control.
-         */
-        this.value = [];
-        /**
-         * Defines the column size like the grid.
-         */
-        this.columns = 1;
-        /**
-         * Defines the column size for tablet and bigger like the grid.
-         */
-        this.columnsTablet = 1;
-        /**
-         * Defines the column size for mobile and bigger like the grid.
-         */
-        this.columnsMobile = 1;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * LISTENERS
-         * ------------------------------------------------------
-         */
-        this.hasFocus = false;
-        this.mutationObserverActive = true;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            if (!this.control) {
-                return;
-            }
-            const element = ev.target;
-            if (element.href) {
-                return;
-            }
-            const selectedCheckbox = ev.target && ev.target.closest('bal-checkbox');
-            if (selectedCheckbox) {
-                if (selectedCheckbox.disabled || selectedCheckbox.readonly) {
-                    return ev.stopPropagation();
-                }
-            }
-            this.updateValues();
-        };
-        this.onOptionChange = async () => {
-            this.sync();
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    async optionChanged() {
-        if (this.control) {
-            this.onOptionChange();
-            this.mutationObserverActive = this.options === undefined;
-        }
-    }
-    invalidChanged(value) {
-        if (this.control) {
-            if (value !== undefined) {
-                this.getCheckboxes().forEach(child => {
-                    child.invalid = value;
-                });
-            }
-        }
-    }
-    disabledChanged(value) {
-        if (this.control) {
-            if (value !== undefined) {
-                this.getCheckboxes().forEach(child => {
-                    child.disabled = value;
-                });
-            }
-        }
-    }
-    readonlyChanged(value) {
-        if (this.control) {
-            if (value !== undefined) {
-                this.getCheckboxes().forEach(child => {
-                    child.readonly = value;
-                });
-            }
-        }
-    }
-    valueChanged(_value, oldValue) {
-        if (this.control) {
-            if (!areArraysEqual(this.value, oldValue)) {
-                this.onOptionChange();
-            }
-        }
-        else {
-            this.onOptionChange();
-        }
-    }
-    columnsChanged(value) {
-        this.getCheckboxes().forEach(checkbox => (checkbox.colSize = value));
-    }
-    columnsTabletChanged(value) {
-        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeTablet = value));
-    }
-    columnsMobileChanged(value) {
-        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeMobile = value));
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        if (this.control) {
-            this.mutationObserverActive = this.options === undefined;
-            this.valueChanged(this.value, []);
-        }
-    }
-    componentWillLoad() {
-        if (this.control) {
-            this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-            this.disabledChanged(this.disabled);
-            this.invalidChanged(this.invalid);
-            this.readonlyChanged(this.readonly);
-        }
-        this.columnsChanged(this.columns);
-        this.columnsTabletChanged(this.columnsTablet);
-        this.columnsMobileChanged(this.columnsMobile);
-        this.onOptionChange();
-    }
-    focusInListener(ev) {
-        this.balFocus.emit(ev);
-    }
-    focusOutListener(ev) {
-        this.balBlur.emit(ev);
-    }
-    mutationListener() {
-        if (this.control) {
-            this.disabledChanged(this.disabled);
-            this.readonlyChanged(this.readonly);
-        }
-        this.columnsChanged(this.columns);
-        this.columnsTabletChanged(this.columnsTablet);
-        this.columnsMobileChanged(this.columnsMobile);
-        this.onOptionChange();
-    }
-    listenOnCheckboxChange(ev) {
-        if (this.control) {
-            if (isDescendant(this.el, ev.target)) {
-                stopEventBubbling(ev);
-                this.updateValues();
-            }
-        }
-    }
-    resetHandler(ev) {
-        const formElement = ev.target;
-        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
-            if (this.control) {
-                this.value = [];
-            }
-            this.onOptionChange();
-        }
-    }
-    checkboxFocusListener(ev) {
-        const { target } = ev;
-        if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) {
-            stopEventBubbling(ev);
-        }
-    }
-    checkboxBlurListener(ev) {
-        const { target } = ev;
-        if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) {
-            stopEventBubbling(ev);
-        }
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /** @internal */
-    async setValue(value) {
-        if (this.control) {
-            this.value = value;
-        }
-    }
-    /**
-     * Find the options properties by its value
-     */
-    async getOptionByValue(value) {
-        const options = this.options;
-        if (options) {
-            return options.find(option => option.value === value);
-        }
-        return undefined;
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    sync() {
-        if (this.control) {
-            const isChecked = (checkbox) => {
-                for (let index = 0; index < this.value.length; index++) {
-                    const valueItem = this.value[index];
-                    if (valueItem !== undefined && valueItem.toString() === checkbox.value.toString()) {
-                        return true;
-                    }
-                }
-                return false;
-            };
-            this.getCheckboxes().forEach((checkbox) => {
-                checkbox.checked = isChecked(checkbox);
-            });
-        }
-        this.getCheckboxes().forEach((checkbox) => {
-            if (this.interface) {
-                checkbox.interface = this.interface;
-            }
-        });
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    getCheckboxes() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox'));
-    }
-    updateValues() {
-        // generate new value array out of the checked checkboxes
-        const newValue = [];
-        this.getCheckboxes().forEach(cb => {
-            if (cb.checked) {
-                newValue.push(cb.value);
-            }
-        });
-        if (!areArraysEqual(this.value, newValue)) {
-            this.value = [...newValue];
-            this.balChange.emit(this.value);
-        }
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('checkbox-group');
-        const innerEl = block.element('inner');
-        const rawOptions = this.options || [];
-        const options = rawOptions.map(option => {
-            if (typeof option.html === 'function') {
-                return Object.assign(Object.assign({}, option), { html: option.html() });
-            }
-            return option;
-        });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('button').class(this.interface === 'button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "options": ["optionChanged"],
-        "invalid": ["invalidChanged"],
-        "disabled": ["disabledChanged"],
-        "readonly": ["readonlyChanged"],
-        "value": ["valueChanged"],
-        "columns": ["columnsChanged"],
-        "columnsTablet": ["columnsTabletChanged"],
-        "columnsMobile": ["columnsMobileChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-checkbox-group'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "createLogger", null);
-__decorate([
-    ListenToFocus(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "focusInListener", null);
-__decorate([
-    ListenToFocus(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "focusOutListener", null);
-__decorate([
-    ListenToMutation({ tags: ['bal-checkbox-group', 'bal-checkbox'], attributes: false, characterData: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "mutationListener", null);
-let checkboxGroupIds = 0;
-CheckboxGroup.style = balCheckboxGroupCss;
-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", color: "white" }));
-    }
-    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' : 'primary' }));
-    }
-};
-const DropdownInput = ({ 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", 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)));
-};
-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 (!isNil(newValue) && newValue !== '') {
-            if (Array.isArray(newValue)) {
-                newRawValue = [...newValue.filter(v => !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,
-renderChip, }) => {
-    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 => renderChip(option))));
-        }
-        else {
-            return (inlineLabel && `${inlineLabel}: `) + choices.map(option => option.label).join(', ');
-        }
-    }
-    else {
-        return placeholder;
-    }
-};
-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-3);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-3);--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:1rem;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:none;visibility:hidden;opacity:0;width:100vw;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)}@media screen and (min-width: 769px),print{.bal-dropdown__list{max-width:100vw;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%}}.bal-dropdown__list--expanded{display:block;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--disabled) .bal-dropdown__root__content--placeholder{color:var(--bal-color-text-primary)}.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):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):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):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):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):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):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):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled),.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):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-end-color);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 Dropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.inputId = `bal-dropdown-${balDropdownIds++}`;
-        this.inheritedAttributes = {};
-        this.initialValue = [];
-        this.nativeOptions = [];
-        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.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();
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        this.autocomplete = 'off';
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * Defines the placeholder of the component. Only shown when the value is empty
-         */
-        this.placeholder = '';
-        /**
-         * Defines a inline label to be shown before the value
-         */
-        this.inlineLabel = '';
-        /**
-         * If `true` there will be on trigger icon visible
-         */
-        this.icon = 'caret-down';
-        /**
-         * Defines the size of the control.
-         */
-        this.size = '';
-        /**
-         * Defines the color style of the control
-         */
-        this.theme = '';
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not mutated, meaning the user can not edit the control.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the user can select multiple options.
-         */
-        this.multiple = false;
-        /**
-         * If `true`, the selected options are shown as chips
-         */
-        this.chips = false;
-        /**
-         * If `true`, a cross at the end is visible to clear the selection
-         */
-        this.clearable = false;
-        /**
-         * If `true`, the component will be shown as invalid
-         */
-        this.invalid = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * Defines if the select is in a loading state.
-         */
-        this.loading = false;
-        /**
-         * Defines the filter logic of the list
-         */
-        this.filter = 'includes';
-        /**
-         * Defines the max height of the list element
-         */
-        this.contentHeight = 262;
-        /**
-         * @internal
-         * Set this to `true` when the component is placed on a dark background.
-         */
-        this.inverted = false;
-        /**
-         * Steps can be passed as a property or through HTML markup.
-         */
-        this.options = [];
-        /**
-         * The value of the selected options.
-         */
-        this.value = [];
-        /**
-         * 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();
-                }
-            }
-        };
-    }
-    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', 'data-hj-allow']);
-        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: '3fe05ba6190dabe5fb8c297f4809659f7c24aa74', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'e0b038aa5b7ead381d271c5b7b04fd5bbaa3ea3b', 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-testid": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'a3499a9e2abcaa3b363385c475c3dcd91ed1a371', 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: '8ffc980c91386038c4ee9b9e6673a25a3609d674', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, renderChip: option => {
-                return (h("bal-tag", { key: option.value, "data-testid": "bal-dropdown-chip", size: "small", invalid: this.invalid, disabled: this.disabled || this.readonly, closable: !(this.disabled || this.readonly), onBalCloseClick: () => this.valueUtil.removeOption(option) }, option.label));
-            } })), h(DropdownInput, { key: '9a97fc39a821d5dcca32eba522ae29e4aa6eedc0', 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: '2a33a8ac7f336889197137fc741ed8a4a107fceb', 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: 'd0f6958fb47ad7f6d73d4f98482cb2102c344f20', 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("div", { key: '29e98d1f54ffb6ee913bd682d6531d45997fc1d0', id: `${this.inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(this.isExpanded)), ref: el => (this.panelEl = el) }, h("bal-option-list", { key: '4e6fa69f9d9859208f83dd7bc86c17fc75d5eb60', multiple: this.multiple, disabled: this.valueUtil.isDisabled(), filter: this.filter, required: this.required, contentHeight: this.contentHeight, ref: el => (this.listEl = el) }, h("slot", { key: '1c169dc692632671f62410b2dadcbbc10b0fe36a' }), this.optionUtil.hasPropOptions()
-            ? this.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)))
-            : ''))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "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;
-Dropdown.style = balDropdownCss;
-const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
-const Option = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balOptionChange = createEvent(this, "balOptionChange");
-        this.balOptionFocus = createEvent(this, "balOptionFocus");
-        this.inputId = `bal-option-${balOptionIds++}`;
-        this.checkbox = false;
-        this.interactionState = BalElementStateListener.DefaultState;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Label will be shown in the input element when it got selected
-         */
-        this.label = '';
-        /**
-         * The value of the select option. This value will be returned by the parent `<bal-select>` element.
-         */
-        this.value = '';
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the option can present in more than one line.
-         */
-        this.multiline = false;
-        /**
-         * If `true`, the option is shown in red.
-         */
-        this.invalid = false;
-        /**
-         * If `true`, the option is selected.
-         */
-        this.selected = false;
-        /**
-         * If `true`, the option is focused.
-         */
-        this.focused = false;
-        /**
-         * If `true`, the option is hidden.
-         */
-        this.hidden = false;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            const listEl = this.el.closest('bal-option-list');
-            if (this.disabled || (listEl && listEl.disabled)) {
-                stopEventBubbling(ev);
-            }
-            else {
-                if (listEl && listEl.required && !listEl.multiple) {
-                    if (!this.selected) {
-                        this.select(true);
-                    }
-                }
-                else {
-                    this.select(!this.selected);
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentWillRender() {
-        if (this.el) {
-            const optionListEl = this.el.closest('bal-option-list');
-            if (optionListEl) {
-                this.checkbox = !!optionListEl.multiple;
-            }
-        }
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenToMouseEnter() {
-        const { label, value, selected, disabled, hidden } = this;
-        if (!hidden && !disabled) {
-            this.balOptionFocus.emit({ label, value, selected });
-        }
-    }
-    elementStateListener(info) {
-        this.interactionChildElements.forEach(element => {
-            element.hovered = info.hovered;
-            element.pressed = info.pressed;
-        });
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Selects or deselects the option and informs other components
-     */
-    async select(selected = true) {
-        this.selected = selected;
-        const { label, value } = this;
-        this.balOptionChange.emit({ label, value, selected });
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-check'));
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('option');
-        return (h(Host, { key: 'dca805aa021ad35c2ea4153008a8a5ba4f37931c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'cfcf978a82159a6e7ad2dcddccdb40dd6b9f74a4', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'e92a9c019432d29f6153371daca316c8136c75e9', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '639a99194ed6e86787e9eb2b3adc993161d58a07' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
-    }
-    get el() { return getElement(this); }
-};
-__decorate([
-    Logger('bal-option'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "elementStateListener", null);
-let balOptionIds = 0;
-Option.style = balOptionCss;
-const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
-const OptionList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.inputId = `bal-option-list-${balOptionListIds++}`;
-        this.inheritAttributes = {};
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true` the list supports multiple selections
-         */
-        this.multiple = false;
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * Defines the focused option with his index value
-         */
-        this.focusIndex = -1;
-        /**
-         * Defines the filter logic of the list
-         */
-        this.filter = 'includes';
-        /**
-         * Defines the max height of the list element
-         */
-        this.contentHeight = 262;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    contentHeightChanged(value) {
-        if (value === undefined) {
-            this.el.style.removeProperty('--bal-option-list-max-height');
-        }
-        else {
-            this.el.style.setProperty('--bal-option-list-max-height', `${value}px`);
-        }
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentDidLoad() {
-        this.contentHeightChanged(this.contentHeight);
-    }
-    componentWillRender() {
-        this.inheritAttributes = inheritAttributes(this.el, ['aria-multiselectable', 'aria-labelledby']);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenToMouseEnter(ev) {
-        const options = this.options;
-        const indexToFocus = this.getOptionIndex(options, ev.detail.value);
-        if (indexToFocus !== undefined) {
-            this.updateFocus(options, indexToFocus);
-        }
-    }
-    listenToOptionChange({ detail }) {
-        if (!this.multiple) {
-            this.options.filter(option => option.value !== detail.value).forEach(option => (option.selected = false));
-        }
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Focus the selected visible option in the list, if no option is selected it selects the first one
-     */
-    async focusSelected() {
-        const options = this.options;
-        const indexToFocus = this.getSelectedOptionIndex(options);
-        if (indexToFocus > 0) {
-            this.updateFocus(options, indexToFocus);
-            await waitAfterFramePaint();
-            return indexToFocus;
-        }
-        else {
-            return await this.focusFirst();
-        }
-    }
-    /**
-     * Focus the first visible option in the list
-     * @returns focusIndex
-     */
-    async focusFirst() {
-        const options = this.options;
-        const indexToFocus = this.getFirstOptionIndex(options);
-        this.updateFocus(options, indexToFocus);
-        const option = options[indexToFocus];
-        this.updateScrollTopPosition(option);
-        await waitAfterFramePaint();
-        return indexToFocus;
-    }
-    /**
-     * Focus the last visible option in the list
-     * @returns focusIndex
-     */
-    async focusLast() {
-        const options = this.options;
-        const indexToFocus = this.getLastOptionIndex(options);
-        this.updateFocus(options, indexToFocus);
-        const option = options[indexToFocus];
-        this.updateScrollBottomPosition(option);
-        await waitAfterFramePaint();
-        return indexToFocus;
-    }
-    /**
-     * Focus the next visible option in the list
-     * @returns focusIndex
-     */
-    async focusNext() {
-        const options = this.options;
-        const indexToFocus = this.getNextOptionIndex(options);
-        this.updateFocus(options, indexToFocus);
-        const option = options[indexToFocus];
-        this.updateScrollBottomPosition(option);
-        await waitAfterFramePaint();
-        return indexToFocus;
-    }
-    /**
-     * Focus the previous visible option in the list
-     * @returns focusIndex
-     */
-    async focusPrevious() {
-        const options = this.options;
-        const indexToFocus = this.getPreviousOptionIndex(options);
-        this.updateFocus(options, indexToFocus);
-        const option = options[indexToFocus];
-        this.updateScrollTopPosition(option);
-        await waitAfterFramePaint();
-        return indexToFocus;
-    }
-    /**
-     * Focus the option with the label that starts with the search property
-     * @returns focusIndex
-     */
-    async focusByLabel(search, config) {
-        const options = this.options;
-        const indexToFocus = this.getOptionIndexByLabel(options, search);
-        this.updateFocus(options, indexToFocus);
-        const option = options[indexToFocus];
-        this.updateScrollTopPosition(option);
-        await waitAfterFramePaint();
-        if (config.select) {
-            await option.select();
-        }
-        return indexToFocus;
-    }
-    /**
-     * Filter the options by the given filter property and hides options
-     * @returns focusIndex
-     */
-    async filterByContent(search) {
-        const options = this.allOptions;
-        this.filterOptions(options, search);
-        await waitAfterFramePaint();
-        return this.focusFirst();
-    }
-    /**
-     * Shows or hides all options
-     */
-    async resetHidden(hidden = false) {
-        this.options.forEach(option => (option.hidden = hidden));
-        await waitAfterFramePaint();
-        this.resetFocus();
-    }
-    /**
-     * Selects or deselects all options
-     */
-    async resetSelected(selected = false) {
-        this.options.forEach(option => (option.selected = selected));
-        await waitAfterFramePaint();
-    }
-    /**
-     * Updates options
-     */
-    async updateSelected(values) {
-        this.options.forEach(option => (option.selected = values.includes(option.value)));
-        await waitAfterFramePaint();
-    }
-    /**
-     * Resets the focus index to pristine and scrolls to the top of the list
-     */
-    async resetFocus() {
-        const options = this.options;
-        const indexToFocus = -1;
-        this.updateFocus(options, indexToFocus);
-        this.scrollTo(0);
-        await waitAfterFramePaint();
-        return indexToFocus;
-    }
-    /**
-     * Returns a list of option values
-     */
-    async getSelectedValues() {
-        const options = this.options;
-        return options.filter(option => option.selected).map(option => option.value);
-    }
-    /**
-     * Returns a list of option labels
-     */
-    async getSelectedOptions(values) {
-        const options = this.options;
-        if (values && values.length > 0) {
-            return options.filter(option => values.includes(option.value)).map(option => option);
-        }
-        return options.filter(option => option.selected).map(option => option);
-    }
-    /**
-     * Returns a list of options
-     */
-    async getValues() {
-        return this.options.map(option => option.value);
-    }
-    /**
-     * Returns a list of options
-     */
-    async getLabels() {
-        return this.options.map(option => option.label);
-    }
-    /**
-     * Returns a list of accessible options
-     */
-    async getOptions() {
-        return this.options.filter(o => !o.disabled || !o.hidden);
-    }
-    /**
-     * Selects the option with the current focus
-     */
-    async selectByFocus() {
-        const options = this.options;
-        const option = options[this.focusIndex];
-        if (option) {
-            if (this.multiple) {
-                option.select(!option.selected);
-            }
-            else {
-                option.select(true);
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get options() {
-        return Array.from(this.el.querySelectorAll('bal-option')).filter(o => !o.hidden);
-    }
-    get allOptions() {
-        return Array.from(this.el.querySelectorAll('bal-option'));
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    filterOptions(options, search) {
-        const filteredOptions = [];
-        const filter = this.filter === 'includes' ? includes : startsWith;
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            const content = option.textContent || '';
-            if (filter(content, search)) {
-                filteredOptions.push(option);
-                option.hidden = false;
-            }
-            else {
-                option.hidden = true;
-            }
-        }
-        return filteredOptions;
-    }
-    isOptionVisible(option) {
-        const visibleHeight = this.el.clientHeight;
-        const topPosition = this.el.scrollTop;
-        const bottomPosition = topPosition + visibleHeight;
-        const isVisible = topPosition <= option.offsetTop && option.offsetTop + option.clientHeight <= bottomPosition;
-        return isVisible;
-    }
-    updateScrollTopPosition(option) {
-        if (option) {
-            const isVisible = this.isOptionVisible(option);
-            if (!isVisible) {
-                this.scrollTo(this.getScrollTopForTopPosition(option));
-            }
-        }
-    }
-    updateScrollBottomPosition(option) {
-        if (option) {
-            const isVisible = this.isOptionVisible(option);
-            if (!isVisible) {
-                this.scrollTo(this.getScrollTopForBottomPosition(option));
-            }
-        }
-    }
-    getScrollTopForTopPosition(option) {
-        const topPosition = option.offsetTop;
-        const scrollTop = topPosition;
-        if (scrollTop < 0) {
-            return 0;
-        }
-        return scrollTop;
-    }
-    getScrollTopForBottomPosition(option) {
-        const visibleHeight = this.el.clientHeight;
-        const bottomPosition = option.offsetTop + option.clientHeight;
-        const scrollTop = bottomPosition - visibleHeight;
-        if (scrollTop < 0) {
-            return 0;
-        }
-        return scrollTop;
-    }
-    async scrollTo(scrollTop) {
-        if (scrollTop !== undefined && scrollTop !== null) {
-            if (this.focusRaf !== undefined) {
-                cancelAnimationFrame(this.focusRaf);
-            }
-            this.focusRaf = raf(async () => {
-                this.el.scrollTop = scrollTop;
-            });
-        }
-    }
-    updateFocus(options, indexToFocus) {
-        this.focusIndex = indexToFocus;
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            option.focused = index === indexToFocus;
-        }
-    }
-    getOptionIndex(options, value) {
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (option.value === value) {
-                return index;
-            }
-        }
-        return undefined;
-    }
-    getSelectedOptionIndex(options) {
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (option.selected && !option.hidden) {
-                return index;
-            }
-        }
-        return this.focusIndex;
-    }
-    getFirstOptionIndex(options) {
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (!option.disabled && !option.hidden) {
-                return index;
-            }
-        }
-        return this.focusIndex;
-    }
-    getNextOptionIndex(options, index = this.focusIndex) {
-        if (index < 0) {
-            return this.getFirstOptionIndex(options);
-        }
-        const lastIndex = this.getLength(options);
-        let newIndex = index;
-        if (index < lastIndex) {
-            newIndex = index + 1;
-            if (options[newIndex].disabled) {
-                return this.getNextOptionIndex(options, newIndex);
-            }
-        }
-        return newIndex;
-    }
-    getPreviousOptionIndex(options, index = this.focusIndex) {
-        const firstIndex = this.getFirstOptionIndex(options);
-        if (index <= firstIndex) {
-            return firstIndex;
-        }
-        let newIndex = index;
-        newIndex = index - 1;
-        if (options[newIndex].disabled) {
-            return this.getPreviousOptionIndex(options, newIndex);
-        }
-        return newIndex;
-    }
-    getLastOptionIndex(options) {
-        for (let index = options.length - 1; index >= 0; index--) {
-            const option = options[index];
-            if (!option.disabled) {
-                return index;
-            }
-        }
-        return this.focusIndex;
-    }
-    getOptionIndexByLabel(options, label) {
-        if (label === undefined || label === '') {
-            return this.focusIndex;
-        }
-        const option = options.find(o => startsWith(o.label || '', label));
-        if (!isNil(option) && option.id) {
-            return options.indexOf(option);
-        }
-        return this.focusIndex;
-    }
-    getLength(options) {
-        const indexes = options.map((option, index) => (option.disabled ? 0 : index));
-        const length = Math.max(...indexes);
-        return length;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('option-list');
-        const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: 'bcb9ee55aefe68beac309225d1127524f327f9da', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: 'ac14c8a5615c6497569ca0aa8436dda3924babf6', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '869656387e53fd832b45141cb3b5b89684e61727' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "contentHeight": ["contentHeightChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-option-list'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "createLogger", null);
-let balOptionListIds = 0;
-OptionList.style = balOptionListCss;
-const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
-const Switch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true` the component gets a invalid red style.
-         */
-        this.invalid = undefined;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = undefined;
-        /**
-         * @internal
-         */
-        this.hovered = false;
-        /**
-         * @internal
-         */
-        this.pressed = false;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('switch');
-        const checked = !!this.checked;
-        const disabled = !!this.disabled;
-        const invalid = !!this.invalid;
-        return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
-    }
-};
-Switch.style = balSwitchCss;
-export { Check as bal_check, Checkbox as bal_checkbox, CheckboxGroup as bal_checkbox_group, Dropdown as bal_dropdown, Option as bal_option, OptionList as bal_option_list, Switch as bal_switch };