@baloise/ds-core 19.3.0 → 19.4.0

package/dist/cjs/bal-dropdown.cjs.entry.js

@@ -1,28 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const log = require('./log-33398c2a.js');
-const formInput = require('./form-input-e9974433.js');
-const attributes = require('./attributes-11acd153.js');
-const form = require('./form-17c98ac2.js');
-const helpers = require('./helpers-debb881a.js');
-const browser = require('./browser-1d542d0f.js');
-const array = require('./array-ae164ca3.js');
-const index$1 = require('./index-e6a233be.js');
-const focusVisible = require('./focus-visible-a434c91f.js');
-const floatingUi = require('./floating-ui-4a4a1aed.js');
-const option = require('./option-85af0921.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-const aria = require('./aria-7672033f.js');
-const config_default = require('./config.default-7e96eb95.js');
-const config_decorator = require('./config.decorator-de244188.js');
-require('./config.utils-df30e424.js');
-require('./index-3b7f8988.js');
-require('./_commonjsHelpers-68cdf74f.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var bem = require('./bem-p0PWVN8n.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var array = require('./array-Db63Hhl1.js');
+var focusVisible = require('./focus-visible-DFZa8IIA.js');
+var option = require('./option-kGk4eTdA.js');
+var floatingUi = require('./floating-ui-BEMfzblh.js');
+var index$1 = require('./index-BZ67Dcnb.js');
+var aria = require('./aria-BzkqcV7W.js');
+var config_decorator = require('./config.decorator-CDkNZ1Fo.js');
+var form = require('./form-BSlIiqcR.js');
+require('./index-BobQkZjn.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -133,7 +126,7 @@ class DropdownEventsUtil {
     handleBlur(ev) {
         if (!this.component.isExpanded) {
             this.component.hasFocus = false;
-            helpers.rIC(() => this.component.balBlur.emit(ev));
+            index.rIC(() => this.component.balBlur.emit(ev));
         }
     }
     handleClick(ev) {
@@ -163,7 +156,7 @@ class DropdownEventsUtil {
                 this.component.isExpanded = false;
                 (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
                 this.component.hasFocus = false;
-                helpers.rIC(() => this.component.balBlur.emit(ev));
+                index.rIC(() => this.component.balBlur.emit(ev));
             }
         }
     }
@@ -336,9 +329,9 @@ class DropdownValueUtil {
     }
     parseValueString(newValue = []) {
         let newRawValue = [];
-        if (!index$1.lodash_isnil(newValue) && newValue !== '') {
+        if (!index$1.isNil(newValue) && newValue !== '') {
             if (Array.isArray(newValue)) {
-                newRawValue = [...newValue.filter(v => !index$1.lodash_isnil(v))];
+                newRawValue = [...newValue.filter(v => !index$1.isNil(v))];
             }
             else {
                 if (newValue.split('').includes(',')) {
@@ -372,7 +365,7 @@ class DropdownValueUtil {
         this.updateRawValueBySelection(newRawValue);
     }
     async updateInputContent() {
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         if (this.component.listEl) {
             this.component.choices = await this.component.listEl.getSelectedOptions(this.component.rawValue);
             this.component.inputLabel = this.component.choices
@@ -408,18 +401,30 @@ const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomple
 };
 
 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);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}";
-const BalDropdownStyle0 = balDropdownCss;
 
 const Dropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.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 = form.defaultBalAriaForm;
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        this.httpFormSubmit = index.defaultConfig.httpFormSubmit;
+        this.labelToFocus = '';
         this.valueUtil = new DropdownValueUtil();
         this.eventsUtil = new DropdownEventsUtil();
         this.popupUtil = new DropdownPopupUtil();
@@ -427,6 +432,91 @@ const Dropdown = class {
         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
          * ------------------------------------------------------
@@ -524,39 +614,6 @@ const Dropdown = class {
                 }
             }
         };
-        this.rawOptions = [];
-        this.choices = [];
-        this.rawValue = [];
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.isAutoFilled = false;
-        this.isKeyboardMode = false;
-        this.inputLabel = '';
-        this.ariaForm = form.defaultBalAriaForm;
-        this.language = config_default.defaultConfig.language;
-        this.region = config_default.defaultConfig.region;
-        this.httpFormSubmit = config_default.defaultConfig.httpFormSubmit;
-        this.labelToFocus = '';
-        this.autocomplete = 'off';
-        this.name = this.inputId;
-        this.placeholder = '';
-        this.inlineLabel = '';
-        this.icon = 'caret-down';
-        this.size = '';
-        this.theme = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.multiple = false;
-        this.chips = false;
-        this.clearable = false;
-        this.invalid = false;
-        this.required = false;
-        this.loading = false;
-        this.filter = 'includes';
-        this.contentHeight = 262;
-        this.inverted = false;
-        this.options = [];
-        this.value = [];
     }
     createLogger(log) {
         this.log = log;
@@ -577,26 +634,26 @@ const Dropdown = class {
             this.focusUtil.connectedCallback(this);
             this.autoFillUtil.connectedCallback(this);
         }
-        helpers.addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
-        if (browser.balBrowser.hasDocument) {
-            helpers.addEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
-            helpers.addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
-            helpers.addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
-            helpers.addEventListener(document, 'click', this.listenOnClickOutside);
-            helpers.addEventListener(document, 'reset', this.resetHandler, {
+        index.addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (index.balBrowser.hasDocument) {
+            index.addEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
+            index.addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
+            index.addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
+            index.addEventListener(document, 'click', this.listenOnClickOutside);
+            index.addEventListener(document, 'reset', this.resetHandler, {
                 capture: true,
             });
         }
         this.hasConnected = true;
     }
     disconnectedCallback() {
-        helpers.removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
-        if (browser.balBrowser.hasDocument) {
-            helpers.removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
-            helpers.removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
-            helpers.removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
-            helpers.removeEventListener(document, 'click', this.listenOnClickOutside);
-            helpers.removeEventListener(document, 'reset', this.resetHandler, {
+        index.removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (index.balBrowser.hasDocument) {
+            index.removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
+            index.removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
+            index.removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
+            index.removeEventListener(document, 'click', this.listenOnClickOutside);
+            index.removeEventListener(document, 'reset', this.resetHandler, {
                 capture: true,
             });
         }
@@ -632,7 +689,7 @@ const Dropdown = class {
      */
     async setFocus() {
         if (this.nativeEl && !this.valueUtil.isDisabled()) {
-            await helpers.waitAfterIdleCallback();
+            await index.waitAfterIdleCallback();
             this.nativeEl.focus();
         }
     }
@@ -704,7 +761,7 @@ const Dropdown = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-dropdown'),
+    index.Logger('bal-dropdown'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -716,6 +773,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], Dropdown.prototype, "configChanged", null);
 let balDropdownIds = 0;
-Dropdown.style = BalDropdownStyle0;
+Dropdown.style = balDropdownCss;
 
 exports.bal_dropdown = Dropdown;

package/dist/cjs/bal-field_5.cjs.entry.js

@@ -1,24 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-debb881a.js');
-const form = require('./form-17c98ac2.js');
-const mutation_decorator = require('./mutation.decorator-485e250e.js');
-const bem = require('./bem-81bc6a2d.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./listener-52d2e5fd.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var mutation_decorator = require('./mutation.decorator-DyFafPfX.js');
+var form = require('./form-BSlIiqcR.js');
+var bem = require('./bem-p0PWVN8n.js');
+require('./listener-t3ifJtK5.js');
 
 const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
-const BalFieldStyle0 = balFieldCss;
 
 const Field = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balFormControlDidLoad = index.createEvent(this, "balFormControlDidLoad", 7);
+        this.balFormControlDidLoad = index.createEvent(this, "balFormControlDidLoad");
         this.fieldId = `bal-field-${FieldIds++}`;
         this.formControlElement = ['bal-field-control'];
         this.inputElements = [
@@ -38,6 +32,35 @@ const Field = class {
             'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
+        this.required = undefined;
+        /**
+         * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
+         */
+        this.horizontal = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true` the component gets a valid green style.
+         */
+        this.valid = 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 = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
+        this.loading = undefined;
         this.isDirectChild = (el) => {
             if (!el) {
                 return false;
@@ -78,13 +101,6 @@ const Field = class {
                 .flat();
         };
         this.mutationObserverActive = true;
-        this.required = undefined;
-        this.horizontal = false;
-        this.invalid = undefined;
-        this.valid = false;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.loading = undefined;
     }
     requiredHandler() {
         this.updateProps([...this.inputElements, 'bal-field-label'], 'required');
@@ -114,8 +130,8 @@ const Field = class {
         await this.syncAriaAttributes();
     }
     async syncAriaAttributes() {
-        await helpers.deepReady(this.el);
-        await helpers.waitAfterFramePaint();
+        await index.deepReady(this.el);
+        await index.waitAfterFramePaint();
         const label = this.findDirectChild('bal-field-label bal-label');
         const message = this.findDirectChild('bal-field-message');
         const controls = this.findDirectChildren([
@@ -204,14 +220,28 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Field.prototype, "mutationListener", null);
 let FieldIds = 0;
-Field.style = BalFieldStyle0;
+Field.style = balFieldCss;
 
 const FieldControl = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * @deprecated
+         * Baloise icon for the right side of the input
+         */
         this.iconRight = '';
+        /**
+         * @deprecated
+         * Baloise icon for the left side of the input
+         */
         this.iconLeft = '';
+        /**
+         * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
+         */
         this.expandedOnMobile = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
         this.loading = false;
     }
     get buildIconLeftTemplate() {
@@ -241,8 +271,17 @@ const FieldControl = class {
 const FieldHint = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Text of the inputs label
+         */
         this.subject = '';
+        /**
+         * Text for the close button.
+         */
         this.closeLabel = 'Close';
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
     }
     render() {
@@ -254,13 +293,45 @@ const FieldHint = class {
 const FieldLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the for attribute must be a single id for a labeled
+         * form-related element in the same document as the <label> element.
+         * So, any given label element can be associated with only one form control.
+         */
         this.htmlFor = undefined;
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
         this.required = true;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = undefined;
+        /**
+         * 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 element can not mutated, meaning the user can not edit the control.
+         */
         this.readonly = undefined;
+        /**
+         * Defines the size of the font. Default is like a heading 5 and small is used
+         * with the form fields.
+         */
         this.size = 'small';
+        /**
+         * Defines the font weight of the label.
+         */
         this.weight = 'bold';
     }
     /**
@@ -294,10 +365,25 @@ const FieldMessage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * Defines the color of the message.
+         */
         this.color = '';
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = false;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = 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;
     }
     /**