@baloise/ds-core 19.3.0 → 19.4.0

package/dist/cjs/bal-number-input.cjs.entry.js

@@ -1,143 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const attributes = require('./attributes-11acd153.js');
-const number = require('./number-24bf265b.js');
-const bem = require('./bem-81bc6a2d.js');
-const form = require('./form-17c98ac2.js');
-const log = require('./log-33398c2a.js');
-const index = require('./index-e6a233be.js');
-const keys_constant = require('./keys.constant-b53da545.js');
-const index$2 = require('./index-24d802b4.js');
-const aria = require('./aria-7672033f.js');
-const config_default = require('./config.default-7e96eb95.js');
-const config_decorator = require('./config.decorator-de244188.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./_commonjsHelpers-68cdf74f.js');
-
-/**
- * lodash 3.0.2 (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- * Available under MIT license <https://lodash.com/license>
- */
-
-/** `Object#toString` result references. */
-var numberTag = '[object Number]';
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is `NaN`.
- *
- * **Note:** This method is not the same as [`isNaN`](https://es5.github.io/#x15.1.2.4)
- * which returns `true` for `undefined` and other non-numeric values.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
- * @example
- *
- * _.isNaN(NaN);
- * // => true
- *
- * _.isNaN(new Number(NaN));
- * // => true
- *
- * isNaN(undefined);
- * // => true
- *
- * _.isNaN(undefined);
- * // => false
- */
-function isNaN(value) {
-  // An `NaN` primitive is the only value that is not equal to itself.
-  // Perform the `toStringTag` check first to avoid errors with some ActiveX objects in IE.
-  return isNumber$1(value) && value != +value;
-}
-
-/**
- * Checks if `value` is classified as a `Number` primitive or object.
- *
- * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are classified
- * as numbers, use the `_.isFinite` method.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
- * @example
- *
- * _.isNumber(3);
- * // => true
- *
- * _.isNumber(Number.MIN_VALUE);
- * // => true
- *
- * _.isNumber(Infinity);
- * // => true
- *
- * _.isNumber('3');
- * // => false
- */
-function isNumber$1(value) {
-  return typeof value == 'number' ||
-    (isObjectLike(value) && objectToString.call(value) == numberTag);
-}
-
-var lodash_isnan = isNaN;
+var index$2 = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var config_decorator = require('./config.decorator-CDkNZ1Fo.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var number = require('./number-CYeUjdPM.js');
+var bem = require('./bem-p0PWVN8n.js');
+var form = require('./form-BSlIiqcR.js');
+var index$1 = require('./index-BZ67Dcnb.js');
+var keys_constant = require('./keys.constant-LnwxHAZo.js');
+var index = require('./index-ifu9fMyU.js');
+var index$3 = require('./index-CuY5w2n4.js');
+var aria = require('./aria-BzkqcV7W.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
     return typeof val === 'string' && number.getThousandSeparator() !== '.';
 }
 function isNumber(value) {
     const num = parseFloat(value);
-    return typeof num === 'number' && !lodash_isnan(num);
+    return typeof num === 'number' && !index.isNaN(num);
 }
 function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== number.getNegativeSymbol() && value !== number.getDecimalSeparator();
@@ -147,7 +30,7 @@ function toNumber(value, decimalPoints = 0) {
     if (val === '' ||
         val === undefined ||
         val === null ||
-        lodash_isnan(val) ||
+        index.isNaN(val) ||
         val === number.getNegativeSymbol() ||
         val === number.getDecimalSeparator() ||
         !isNumber(val)) {
@@ -163,7 +46,7 @@ function toNumber(value, decimalPoints = 0) {
 }
 function toFixedNumber(value, decimalPoints = 0) {
     let val = value;
-    if (index.lodash_isnil(val)) {
+    if (index$1.isNil(val)) {
         return '';
     }
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
@@ -173,13 +56,13 @@ function toFixedNumber(value, decimalPoints = 0) {
         val = `0${val}`;
     }
     const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(number.getDecimalSeparator(), '.'));
-    return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
+    return index.isNaN(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
     return value.replace('.', number.getDecimalSeparator());
 }
 function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
-    if (index.lodash_isnil(value)) {
+    if (index$1.isNil(value)) {
         return '';
     }
     if (value.charAt(0) === number.getDecimalSeparator()) {
@@ -187,7 +70,7 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     }
     const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
     const formattedSuffix = suffix !== '' ? ` ${suffix.trim()}` : '';
-    return lodash_isnan(num) ? '' : number.formatLocaleNumber(num, decimalPoints) + formattedSuffix;
+    return index.isNaN(num) ? '' : number.formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(number.getDecimalSeparator()) || []).length - 1 || 0;
 function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
@@ -229,21 +112,70 @@ function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd,
 }
 
 const balNumberInputCss = ".bal-number-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}";
-const BalNumberInputStyle0 = balNumberInputCss;
 
 const NumberInput = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.balInput = index$1.createEvent(this, "balInput", 7);
-        this.balChange = index$1.createEvent(this, "balChange", 7);
-        this.balBlur = index$1.createEvent(this, "balBlur", 7);
-        this.balFocus = index$1.createEvent(this, "balFocus", 7);
-        this.balKeyPress = index$1.createEvent(this, "balKeyPress", 7);
+        index$2.registerInstance(this, hostRef);
+        this.balInput = index$2.createEvent(this, "balInput");
+        this.balChange = index$2.createEvent(this, "balChange");
+        this.balBlur = index$2.createEvent(this, "balBlur");
+        this.balFocus = index$2.createEvent(this, "balFocus");
+        this.balKeyPress = index$2.createEvent(this, "balKeyPress");
         this.inputId = `bal-number-input-${numberInputIds++}`;
         this.inheritedAttributes = {};
         this.lastValue = '';
         this.inputValue = this.value;
         this.initialValue = undefined;
+        this.focused = false;
+        this.language = index$2.defaultConfig.language;
+        this.region = index$2.defaultConfig.region;
+        this.ariaForm = form.defaultBalAriaForm;
+        this.nativeInputValue = '';
+        this.inputPattern = this.createPattern();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * Defines the allowed decimal points for the `number-input`.
+         */
+        this.decimal = 0;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = 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 input value has 0 as default value
+         */
+        this.exactNumber = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the input.
+         */
+        this.value = undefined;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -288,7 +220,6 @@ const NumberInput = class {
             formInput.inputHandleChange(this);
         };
         this.onKeydown = (ev) => {
-            const oldValue = formInput.getNativeInputValue(this);
             const newValue = formInput.getUpcomingValue(this, ev);
             const input = ev === null || ev === void 0 ? void 0 : ev.target;
             if (input &&
@@ -298,45 +229,23 @@ const NumberInput = class {
                     metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
-                    oldValue,
                     selectionStart: input.selectionStart,
                     selectionEnd: input.selectionEnd,
                 })) {
                 return formInput.stopEventBubbling(ev);
             }
         };
-        this.focused = false;
-        this.language = config_default.defaultConfig.language;
-        this.region = config_default.defaultConfig.region;
-        this.ariaForm = form.defaultBalAriaForm;
-        this.nativeInputValue = '';
-        this.inputPattern = this.createPattern();
-        this.name = this.inputId;
-        this.invalid = false;
-        this.decimal = 0;
-        this.suffix = undefined;
-        this.pattern = undefined;
-        this.placeholder = undefined;
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.exactNumber = false;
-        this.max = undefined;
-        this.min = undefined;
-        this.debounce = 0;
-        this.value = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
     }
     debounceChanged() {
-        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
+        this.balChange = index$2.debounceEvent(this.balChange, this.debounce);
     }
     valueChanged(newValue, oldValue) {
         const newValueAsNumber = toNumber(newValue, this.decimal);
         if (newValueAsNumber !== oldValue) {
-            const isValueNotDefined = newValueAsNumber === '' || index.lodash_isnil(newValueAsNumber) || lodash_isnan(newValueAsNumber);
+            const isValueNotDefined = newValueAsNumber === '' || index$1.isNil(newValueAsNumber) || index.isNaN(newValueAsNumber);
             const emptyValue = this.exactNumber ? '0' : '';
             const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString();
             this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal);
@@ -446,7 +355,7 @@ const NumberInput = class {
         return `-?\\d{1,3}(?:${thousandSeparator}\\d{3})*(?:\\${decimalSeparator}\\d{1,2})?(?:${suffix})?`;
     }
     get lastValueGetter() {
-        if (this.exactNumber && (index.lodash_isnil(this.lastValue) || index$2.isEmpty(this.lastValue))) {
+        if (this.exactNumber && (index$1.isNil(this.lastValue) || index$3.isEmpty(this.lastValue))) {
             return '0';
         }
         return this.lastValue;
@@ -457,20 +366,20 @@ const NumberInput = class {
      */
     render() {
         const block = bem.BEM.block('number-input');
-        return (index$1.h(index$1.Host, { key: 'b8eed12bfcd82452d4764d316294744faff1f797', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ key: '0f04129ed1bd55b8660e7add8f673e154bf4107b', class: {
+        return (index$2.h(index$2.Host, { key: 'b8eed12bfcd82452d4764d316294744faff1f797', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index$2.h("input", Object.assign({ key: '0f04129ed1bd55b8660e7add8f673e154bf4107b', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
             }, "data-testid": "bal-number-input", ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, pattern: this.inputPattern, min: this.min, max: this.max, value: this.nativeInputValue, onInput: e => this.onInput(e), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onClick: this.onClick, onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes))));
     }
-    get el() { return index$1.getElement(this); }
+    get el() { return index$2.getElement(this); }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-number-input'),
+    index$2.Logger('bal-number-input'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -482,6 +391,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], NumberInput.prototype, "configChanged", null);
 let numberInputIds = 0;
-NumberInput.style = BalNumberInputStyle0;
+NumberInput.style = balNumberInputCss;
 
 exports.bal_number_input = NumberInput;

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

@@ -1,32 +1,64 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const aria = require('./aria-7672033f.js');
-const bem = require('./bem-81bc6a2d.js');
-const elementStates_decorator = require('./element-states.decorator-aa5126e2.js');
-const formInput = require('./form-input-e9974433.js');
-const log = require('./log-33398c2a.js');
-const index$1 = require('./index-e6a233be.js');
-const attributes = require('./attributes-11acd153.js');
-const helpers = require('./helpers-debb881a.js');
-const utils = require('./utils-9ea175af.js');
-const form = require('./form-17c98ac2.js');
-require('./listener-52d2e5fd.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var aria = require('./aria-BzkqcV7W.js');
+var bem = require('./bem-p0PWVN8n.js');
+var elementStates_decorator = require('./element-states.decorator-DGQNhvD6.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var index$1 = require('./index-BZ67Dcnb.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var utils = require('./utils-Bl0u6rg1.js');
+var form = require('./form-BSlIiqcR.js');
+require('./listener-t3ifJtK5.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 
 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 BalOptionStyle0 = balOptionCss;
 
 const Option = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balOptionChange = index.createEvent(this, "balOptionChange", 7);
-        this.balOptionFocus = index.createEvent(this, "balOptionFocus", 7);
+        this.balOptionChange = index.createEvent(this, "balOptionChange");
+        this.balOptionFocus = index.createEvent(this, "balOptionFocus");
         this.inputId = `bal-option-${balOptionIds++}`;
+        this.checkbox = false;
+        this.interactionState = elementStates_decorator.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
          * ------------------------------------------------------
@@ -47,16 +79,6 @@ const Option = class {
                 }
             }
         };
-        this.checkbox = false;
-        this.interactionState = elementStates_decorator.BalElementStateListener.DefaultState;
-        this.label = '';
-        this.value = '';
-        this.disabled = false;
-        this.multiline = false;
-        this.invalid = false;
-        this.selected = false;
-        this.focused = false;
-        this.hidden = false;
     }
     createLogger(log) {
         this.log = log;
@@ -119,7 +141,7 @@ const Option = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-option'),
+    index.Logger('bal-option'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -131,10 +153,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Option.prototype, "elementStateListener", null);
 let balOptionIds = 0;
-Option.style = BalOptionStyle0;
+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 BalOptionListStyle0 = balOptionListCss;
 
 const OptionList = class {
     constructor(hostRef) {
@@ -142,12 +163,33 @@ const OptionList = class {
         this.inputId = `bal-option-list-${balOptionListIds++}`;
         this.inheritAttributes = {};
         this.ariaForm = form.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;
-        this.labelledby = undefined;
+        /**
+         * Defines the filter logic of the list
+         */
         this.filter = 'includes';
+        /**
+         * Defines the max height of the list element
+         */
         this.contentHeight = 262;
     }
     createLogger(log) {
@@ -199,7 +241,7 @@ const OptionList = class {
         const indexToFocus = this.getSelectedOptionIndex(options);
         if (indexToFocus > 0) {
             this.updateFocus(options, indexToFocus);
-            await helpers.waitAfterFramePaint();
+            await index.waitAfterFramePaint();
             return indexToFocus;
         }
         else {
@@ -216,7 +258,7 @@ const OptionList = class {
         this.updateFocus(options, indexToFocus);
         const option = options[indexToFocus];
         this.updateScrollTopPosition(option);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return indexToFocus;
     }
     /**
@@ -229,7 +271,7 @@ const OptionList = class {
         this.updateFocus(options, indexToFocus);
         const option = options[indexToFocus];
         this.updateScrollBottomPosition(option);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return indexToFocus;
     }
     /**
@@ -242,7 +284,7 @@ const OptionList = class {
         this.updateFocus(options, indexToFocus);
         const option = options[indexToFocus];
         this.updateScrollBottomPosition(option);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return indexToFocus;
     }
     /**
@@ -255,7 +297,7 @@ const OptionList = class {
         this.updateFocus(options, indexToFocus);
         const option = options[indexToFocus];
         this.updateScrollTopPosition(option);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return indexToFocus;
     }
     /**
@@ -268,7 +310,7 @@ const OptionList = class {
         this.updateFocus(options, indexToFocus);
         const option = options[indexToFocus];
         this.updateScrollTopPosition(option);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         if (config.select) {
             await option.select();
         }
@@ -281,7 +323,7 @@ const OptionList = class {
     async filterByContent(search) {
         const options = this.allOptions;
         this.filterOptions(options, search);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return this.focusFirst();
     }
     /**
@@ -289,7 +331,7 @@ const OptionList = class {
      */
     async resetHidden(hidden = false) {
         this.options.forEach(option => (option.hidden = hidden));
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         this.resetFocus();
     }
     /**
@@ -297,14 +339,14 @@ const OptionList = class {
      */
     async resetSelected(selected = false) {
         this.options.forEach(option => (option.selected = selected));
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
     }
     /**
      * Updates options
      */
     async updateSelected(values) {
         this.options.forEach(option => (option.selected = values.includes(option.value)));
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
     }
     /**
      * Resets the focus index to pristine and scrolls to the top of the list
@@ -314,7 +356,7 @@ const OptionList = class {
         const indexToFocus = -1;
         this.updateFocus(options, indexToFocus);
         this.scrollTo(0);
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         return indexToFocus;
     }
     /**
@@ -448,7 +490,7 @@ const OptionList = class {
             if (this.focusRaf !== undefined) {
                 cancelAnimationFrame(this.focusRaf);
             }
-            this.focusRaf = helpers.raf(async () => {
+            this.focusRaf = index.raf(async () => {
                 this.el.scrollTop = scrollTop;
             });
         }
@@ -527,7 +569,7 @@ const OptionList = class {
             return this.focusIndex;
         }
         const option = options.find(o => utils.startsWith(o.label || '', label));
-        if (!index$1.lodash_isnil(option) && option.id) {
+        if (!index$1.isNil(option) && option.id) {
             return options.indexOf(option);
         }
         return this.focusIndex;
@@ -552,13 +594,13 @@ const OptionList = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-option-list'),
+    index.Logger('bal-option-list'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
 let balOptionListIds = 0;
-OptionList.style = BalOptionListStyle0;
+OptionList.style = balOptionListCss;
 
 exports.bal_option = Option;
 exports.bal_option_list = OptionList;