@baloise/ds-core 16.0.3 → 16.1.0

package/dist/esm/bal-notices.entry.js

@@ -3,7 +3,7 @@ import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
 const balNoticesCss = ".bal-notices{position:fixed !important;display:-ms-flexbox !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;-ms-flex-direction:column !important;flex-direction:column !important}.bal-notices .container{width:100% !important}.bal-notices.has-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:.5em}.bal-notices.has-snackbar .bal-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto !important}.bal-notices.has-toast{-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;margin:.5em}.bal-notices.has-toast .bal-toast{-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:center;align-self:center}";
 const BalNoticesStyle0 = balNoticesCss;
 
-const BalNotices = class {
+const Notices = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.interface = 'toast';
@@ -16,6 +16,6 @@ const BalNotices = class {
             } }, h("slot", null)));
     }
 };
-BalNotices.style = BalNoticesStyle0;
+Notices.style = BalNoticesStyle0;
 
-export { BalNotices as bal_notices };
+export { Notices as bal_notices };

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

@@ -3,8 +3,8 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { h as inputHandleClick, a as inputHandleHostClick, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { s as getDecimalSeparator$1, u as getThousandSeparator$1, q as formatLocaleNumber$1 } from './index.esm-ec4cba26.js';
-import { a as defaultLocale, d as defaultConfig } from './config.default-79f94bf7.js';
+import { w as getDecimalSeparator$1, x as getThousandSeparator$1, v as formatLocaleNumber$1 } from './index.esm-83b1f9c4.js';
+import { a as defaultLocale, d as defaultConfig } from './config.default-7efdc82d.js';
 import { g as useBalConfig } from './config.utils-6ac6c9bd.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
@@ -153,25 +153,33 @@ function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
 }
 function toNumber(value, decimalPoints = 0) {
-    if (value === '' ||
-        value === undefined ||
-        value === null ||
-        lodash_isnan(value) ||
-        value === getNegativeSymbol() ||
-        value === getDecimalSeparator() ||
-        !isNumber(value)) {
+    let val = value;
+    if (val === '' ||
+        val === undefined ||
+        val === null ||
+        lodash_isnan(val) ||
+        val === getNegativeSymbol() ||
+        val === getDecimalSeparator() ||
+        !isNumber(val)) {
         return undefined;
     }
-    return decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
+    }
+    return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 function toFixedNumber(value, decimalPoints = 0) {
-    if (lodash_isnil(value)) {
+    let val = value;
+    if (lodash_isnil(val)) {
         return '';
     }
-    if (value.charAt(0) === getDecimalSeparator()) {
-        value = `0${value}`;
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
-    const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value.replace(getDecimalSeparator(), '.'));
+    if (val.charAt(0) === getDecimalSeparator()) {
+        val = `0${val}`;
+    }
+    const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
     return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
@@ -189,7 +197,12 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     return lodash_isnan(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
-function validateKeyDown({ key, selectionStart, selectionEnd, newValue, decimal, }) {
+function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
+    //
+    // allow select all, copy and paste
+    if (['a', 'c', 'v'].includes(key) && (ctrlKey || metaKey)) {
+        return true;
+    }
     //
     // only allow negative symbols at the start of the input
     if (key === getNegativeSymbol() && selectionStart && selectionStart > 0 && selectionEnd && selectionEnd > 0) {
@@ -265,6 +278,8 @@ const NumberInput = class {
             // restore the input with the last user value without the formatting
             if (this.nativeInput) {
                 this.nativeInputValue = mapDecimalSeparator(this.lastValue || '');
+                clearTimeout(this.selectTimeout);
+                this.selectTimeout = setTimeout(() => this.nativeInput.select());
             }
         };
         this.onBlur = (ev) => {
@@ -274,6 +289,7 @@ const NumberInput = class {
             if (this.nativeInput) {
                 this.lastValue = toFixedNumber(this.lastValueGetter, this.decimal);
                 this.nativeInputValue = toUserFormattedNumber(this.lastValueGetter, this.decimal, this.suffix);
+                this.nativeInput.value = this.nativeInputValue;
             }
             this.inputValue = toNumber(this.lastValueGetter, this.decimal);
             inputHandleChange(this);
@@ -285,6 +301,8 @@ const NumberInput = class {
             if (input &&
                 !validateKeyDown({
                     key: ev.key,
+                    ctrlKey: ev.ctrlKey,
+                    metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
                     oldValue,

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

@@ -0,0 +1,536 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { a as ariaBooleanToString } from './aria-d5877698.js';
+import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-071e2b6b.js';
+import { l as lodash_isnil } from './index-82aff103.js';
+import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import { b as waitAfterFramePaint, l as raf } from './helpers-c201154e.js';
+import { s as startsWith, i as includes } from './utils-9fbab1d3.js';
+import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import './browser-a8073d92.js';
+import './listener-04842ae9.js';
+import './icons.constant-a7885631.js';
+import './config.utils-6ac6c9bd.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-2);--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-radio-checkbox-symbol-size:1.125rem;--bal-radio-checkbox-symbol-width:calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.188rem;--bal-radio-checkbox-label-min-height:1.125rem}";
+const BalOptionStyle0 = balOptionCss;
+
+const Option = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.balOptionChange = createEvent(this, "balOptionChange", 7);
+        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
+        this.inputId = `bal-option-${balOptionIds++}`;
+        /**
+         * 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);
+                }
+            }
+        };
+        this.checkbox = false;
+        this.interactionState = 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;
+    }
+    /**
+     * 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-checkbox'));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option');
+        return (h(Host, { 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", { py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", null)), 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 = BalOptionStyle0;
+
+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) {
+        registerInstance(this, hostRef);
+        this.inputId = `bal-option-list-${balOptionListIds++}`;
+        this.inheritAttributes = {};
+        this.ariaForm = defaultBalAriaForm;
+        this.multiple = false;
+        this.disabled = false;
+        this.required = false;
+        this.focusIndex = -1;
+        this.labelledby = undefined;
+        this.filter = 'includes';
+        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 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;
+    }
+    getFirstOptionIndex(options) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (!option.disabled) {
+                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 (!lodash_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, { class: Object.assign({}, block.class()), id: this.inputId, tabIndex: -1 }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
+    }
+    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 = BalOptionListStyle0;
+
+export { Option as bal_option, OptionList as bal_option_list };

package/dist/esm/bal-pagination.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { b as balBreakpoints } from './breakpoints.subject-64327a3b.js';
-import { d as defaultConfig } from './config.default-79f94bf7.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-52979d29.js';
+import { b as balBreakpoints } from './breakpoints.subject-ef464f89.js';
+import { d as defaultConfig } from './config.default-7efdc82d.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-021fbaf0.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './helpers-c201154e.js';
 import './browser-a8073d92.js';
@@ -11,7 +11,7 @@ import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-12daa3af.js';
+import './tokens.esm-aab9bd61.js';
 import './log-dfd1c19f.js';
 
 function generatePaginationControl(value, totalPages, pageRange) {