@baloise/ds-core 16.0.3 → 16.1.0-nightly.20240419

package/dist/collection/components/docs/bal-doc-app/bal-doc-app.js

@@ -0,0 +1,229 @@
+import { Host, h } from "@stencil/core";
+import * as balIcons from "../../../../../../icons/src/index";
+import { updateBalIcons } from "../../../utils/config";
+import { balBrowser } from "../../../utils/browser";
+import globalScript from "../../../global";
+/**
+ * @internal
+ */
+export class DocApp {
+    constructor() {
+        this.logComponents = '';
+        this.logLifecycle = true;
+        this.logEvents = true;
+        this.logRender = true;
+        this.logCustom = true;
+        this.stickyFooter = false;
+        this.region = undefined;
+        this.language = undefined;
+        this.animated = true;
+    }
+    connectedCallback() {
+        globalScript();
+        updateBalIcons(balIcons);
+    }
+    componentDidRender() {
+        const logConfig = {
+            components: this.logComponents
+                .split(',')
+                .map(c => c.trim())
+                .filter(c => c !== ''),
+            lifecycle: this.logLifecycle,
+            event: this.logEvents,
+            render: this.logRender,
+            custom: this.logCustom,
+        };
+        if (balBrowser.hasWindow) {
+            if (this.logComponents) {
+                ;
+                window.BaloiseDesignSystem.config.logger = logConfig;
+            }
+            if (this.region) {
+                ;
+                window.BaloiseDesignSystem.config.region = this.region;
+            }
+            if (this.language) {
+                ;
+                window.BaloiseDesignSystem.config.language = this.language;
+            }
+        }
+    }
+    render() {
+        return (h(Host, null, h("bal-app", { animated: this.animated }, h("div", { class: { 'has-sticky-footer': this.stickyFooter } }, h("slot", null)))));
+    }
+    static get is() { return "bal-doc-app"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-doc-app.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-doc-app.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logComponents": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-components",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logLifecycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-lifecycle",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-events",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logRender": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-render",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logCustom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-custom",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stickyFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sticky-footer",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "region",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all animation inside the bal-app. Can be used for simplify e2e testing."
+                },
+                "attribute": "animated",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/index.js

@@ -26,6 +26,7 @@ export * from './components/bal-label/bal-label.i18n';
  * Utils
  */
 export { initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem } from './initialize';
+export { newBalOption } from './utils/dropdown/option';
 export { newBalStepOption } from './components/bal-steps/bal-step.util';
 export { newBalTabOption } from './components/bal-tabs/bal-tab.util';
 export { newBalCheckboxOption } from './components/bal-checkbox/utils/bal-checkbox.util';

package/dist/collection/utils/aria.js

@@ -0,0 +1 @@
+export const ariaBooleanToString = (bool) => (!!bool ? 'true' : 'false');

package/dist/collection/utils/config/config.default.js

@@ -37,5 +37,6 @@ export const defaultConfig = {
     fallbackLanguage: 'de',
     logger: defaultLoggerConfig,
     animated: true,
+    httpFormSubmit: true,
 };
 export const defaultLocale = `${defaultConfig.language}-${defaultConfig.region}`;

package/dist/collection/utils/config/config.js

@@ -63,6 +63,13 @@ export class Config {
         this._config.animated = animated;
         this._notify();
     }
+    get httpFormSubmit() {
+        return this._config.httpFormSubmit;
+    }
+    set httpFormSubmit(httpFormSubmit) {
+        this._config.httpFormSubmit = httpFormSubmit;
+        this._notify();
+    }
     attach(observer) {
         const isExist = this._observers.includes(observer);
         if (isExist) {

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.0.3';
+export const VERSION = '16.1.0-nightly.20240419';

package/dist/collection/utils/date/date.js

@@ -1,7 +1,10 @@
-import { DateTime, Info } from "luxon";
+import { DateTime, Info, Settings } from "luxon";
 import { useBalConfig } from "../config";
 import { dateSeparator } from "@baloise/web-app-utils";
 export class BalDate {
+    static setTwoDigitCutoffYear(cutoff = 10) {
+        Settings.twoDigitCutoffYear = (new Date().getFullYear() % 100) + cutoff;
+    }
     static fromAnyFormat(value) {
         const separator = value.replace(/[0-9]/g, '').charAt(0);
         const config = useBalConfig();
@@ -109,3 +112,4 @@ export class BalDate {
         return undefined;
     }
 }
+BalDate.setTwoDigitCutoffYear();

package/dist/collection/utils/date/date.spec.js

@@ -60,15 +60,21 @@ describe('balDate', () => {
                 expect(BalDate.fromAnyFormat('1.02.1988').toISODate()).toStrictEqual('1988-02-01');
                 expect(BalDate.fromAnyFormat('01.2.1988').toISODate()).toStrictEqual('1988-02-01');
                 expect(BalDate.fromAnyFormat('1.2.1988').toISODate()).toStrictEqual('1988-02-01');
-                expect(BalDate.fromAnyFormat('1.2.88').toISODate()).toStrictEqual('1988-02-01');
-                expect(BalDate.fromAnyFormat('1.2.01').toISODate()).toStrictEqual('2001-02-01');
-                expect(BalDate.fromAnyFormat('1.2.00').toISODate()).toStrictEqual('2000-02-01');
-                expect(BalDate.fromAnyFormat('1.2.0').toISODate()).toStrictEqual('2000-02-01');
-                expect(BalDate.fromAnyFormat('12.12.1').toISODate()).toStrictEqual('2001-12-12');
+            });
+            test('should parse to todays year', () => {
                 const year = new Date().getFullYear();
                 expect(BalDate.fromAnyFormat('1.2.').toISODate()).toStrictEqual(`${year}-02-01`);
                 expect(BalDate.fromAnyFormat('1.2').toISODate()).toStrictEqual(`${year}-02-01`);
             });
+            test('should fill up with the year correctly by the cutoff year', () => {
+                const year = new Date().getFullYear();
+                const cutoff = year + 10;
+                const cutoffTwoDigits = cutoff % 100;
+                console.log('cutoff', cutoff);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits}-01-01`);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits - 1}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits - 1}-01-01`);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits + 1}`).toISODate()).toStrictEqual(`19${cutoffTwoDigits + 1}-01-01`);
+            });
             test('should parse all supported number formats', () => {
                 expect(BalDate.fromAnyFormat('20021988').toISODate()).toStrictEqual('1988-02-20');
             });

package/dist/collection/utils/dropdown/auto-fill.js

@@ -0,0 +1,38 @@
+import { areArraysEqual } from "@baloise/web-app-utils";
+import { stopEventBubbling } from "../form-input";
+export class DropdownAutoFillUtil {
+    constructor() {
+        this.handleAutoFill = async (ev) => {
+            stopEventBubbling(ev);
+            if (this.isAutoFillAllowed()) {
+                this.component.isAutoFilled = true;
+                const autoFillValue = this.component.nativeEl.value;
+                const newValue = await this.parseAutoFillValueWithOptions(autoFillValue);
+                if (newValue === undefined) {
+                    this.component.isAutoFilled = false;
+                    return;
+                }
+                if (!areArraysEqual(newValue, this.component.rawValue)) {
+                    this.component.valueUtil.updateRawValueBySelection(newValue, true);
+                }
+            }
+        };
+    }
+    connectedCallback(component) {
+        this.component = component;
+    }
+    isAutoFillAllowed() {
+        return !this.component.multiple;
+    }
+    async parseAutoFillValueWithOptions(autoFillValue) {
+        const options = await this.component.listEl.getOptions();
+        const value = undefined;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (option.value === autoFillValue || option.label === autoFillValue) {
+                return [option.value];
+            }
+        }
+        return value;
+    }
+}

package/dist/collection/utils/dropdown/component.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/dropdown/dropdown.i18n.js

@@ -0,0 +1,52 @@
+export const i18nBalDropdown = {
+    de: {
+        clearable: 'Löschen',
+        open: 'Öffnen',
+        close: 'Schließen',
+    },
+    en: {
+        clearable: 'clear',
+        open: 'Open',
+        close: 'Close',
+    },
+    fr: {
+        clearable: 'Effacer',
+        open: 'Ouvrir',
+        close: 'Fermer',
+    },
+    it: {
+        clearable: 'Cancellare',
+        open: 'Apri',
+        close: 'Chiudi',
+    },
+    nl: {
+        clearable: 'Wissen',
+        open: 'Open',
+        close: 'Sluiten',
+    },
+    es: {
+        clearable: 'Limpiar',
+        open: 'Abrir',
+        close: 'Cerrar',
+    },
+    pl: {
+        clearable: 'Wyczyść',
+        open: 'Otwórz',
+        close: 'Zamknij',
+    },
+    pt: {
+        clearable: 'Limpar',
+        open: 'Abrir',
+        close: 'Fechar',
+    },
+    sv: {
+        clearable: 'Rensa',
+        open: 'Öppna',
+        close: 'Stäng',
+    },
+    fi: {
+        clearable: 'Tyhjennä',
+        open: 'Avaa',
+        close: 'Sulje',
+    },
+};

package/dist/collection/utils/dropdown/events.js

@@ -0,0 +1,43 @@
+export class DropdownEventsUtil {
+    connectedCallback(component) {
+        this.component = component;
+    }
+    handleFocus(ev) {
+        this.component.hasFocus = true;
+        this.component.balFocus.emit(ev);
+    }
+    handleBlur(ev) {
+        this.component.hasFocus = false;
+        this.component.balBlur.emit(ev);
+    }
+    handleClick(ev) {
+        if (!this.component.valueUtil.isDisabled()) {
+            if (this.component.chips) {
+                const targetEl = ev.target;
+                const closeEl = targetEl.closest('bal-close');
+                if (closeEl) {
+                    return;
+                }
+            }
+            if (this.component.clearable) {
+                const targetEl = ev.target;
+                const clearEl = targetEl.closest('.bal-dropdown__clear');
+                if (clearEl) {
+                    this.component.valueUtil.updateRawValueBySelection([]);
+                    return;
+                }
+            }
+            this.component.popupUtil.toggleList();
+        }
+    }
+    // @Listen('click', { target: 'document' })
+    handleOutsideClick(ev) {
+        var _a;
+        if (this.component.isExpanded) {
+            if (!this.component.el.contains(ev.target)) {
+                this.component.isExpanded = false;
+                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
+            }
+        }
+    }
+}

package/dist/collection/utils/dropdown/filters.js

@@ -0,0 +1,10 @@
+export function startsWith(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.startsWith(value);
+}
+export function includes(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.includes(value);
+}

package/dist/collection/utils/dropdown/focus.js

@@ -0,0 +1,19 @@
+export class DropdownFocusUtil {
+    connectedCallback(component) {
+        this.component = component;
+    }
+    focusOptionByLabel(key, options = {}) {
+        this.component.labelToFocus = (this.component.labelToFocus + key).trim();
+        if (this.component.labelToFocus.length > 0) {
+            clearTimeout(this.keyHitTimeout);
+            this.keyHitTimeout = setTimeout(() => {
+                var _a;
+                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusByLabel(this.component.labelToFocus, options);
+            }, 100);
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(async () => {
+                this.component.labelToFocus = '';
+            }, 1000);
+        }
+    }
+}

package/dist/collection/utils/dropdown/form-submit.js

@@ -0,0 +1,35 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+export class DropdownFormSubmitUtil {
+    connectedCallback(component) {
+        this.component = component;
+        this.component.initialValue = this.component.value;
+    }
+    componentDidRender() {
+        if (this.component.selectEl) {
+            const options = this.component.selectEl.querySelectorAll('option');
+            options.forEach(option => {
+                if (this.component.rawValue.includes(option.value)) {
+                    option.selected = true;
+                }
+            });
+        }
+    }
+    // @Listen('reset', { capture: true, target: 'document' })
+    handle(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.component.el)) {
+            if (this.resetHandlerTimer) {
+                clearTimeout(this.resetHandlerTimer);
+            }
+            this.resetHandlerTimer = setTimeout(() => {
+                const newRawValue = this.component.valueUtil.parseValueString(this.component.initialValue);
+                this.component.valueUtil.updateRawValueBySelection(newRawValue);
+            }, 0);
+        }
+    }
+}
+export const DropdownNativeSelect = ({ name, httpFormSubmit, multiple, required, disabled, rawValue, refSelectEl, }) => {
+    const block = BEM.block('dropdown');
+    return httpFormSubmit ? (h("select", { class: Object.assign({}, block.element('root').element('select').class()), "aria-hidden": "true", name: name, multiple: multiple, required: required, disabled: disabled, tabindex: -1, ref: refSelectEl }, rawValue.map((value) => (h("option", { key: value, value: value, selected: true }, value))))) : ('');
+};

package/dist/collection/utils/dropdown/icon.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+import { i18nBalDropdown } from "./dropdown.i18n";
+export const DropdownIcon = ({ icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
+    const block = BEM.block('dropdown');
+    if (loading) {
+        return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
+    }
+    else if (clearable && filled && !disabled) {
+        return (h("button", { title: i18nBalDropdown[language].clearable, class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
+    }
+    else {
+        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));
+    }
+};

package/dist/collection/utils/dropdown/index.js

@@ -0,0 +1,13 @@
+export * from './auto-fill';
+export * from './component';
+export * from './dropdown.i18n';
+export * from './events';
+export * from './filters';
+export * from './focus';
+export * from './form-submit';
+export * from './icon';
+export * from './option';
+export * from './option-list';
+export * from './popup';
+export * from './value';
+export * from './input';

package/dist/collection/utils/dropdown/input.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+import { i18nBalDropdown } from "./dropdown.i18n";
+import { ariaBooleanToString } from "../aria";
+export const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
+    const block = BEM.block('dropdown');
+    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", name: name, autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
+    if (httpFormSubmit) {
+        return h(Input, null);
+    }
+    return (h("form", { novalidate: true }, h(Input, null)));
+};

package/dist/collection/utils/dropdown/option-list.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+export const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPropOptions, required, filter, multiple, contentHeight, refPanelEl, refListEl, }) => {
+    const block = BEM.block('dropdown');
+    return (h("div", { id: `${inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(isExpanded)), ref: refPanelEl }, h("bal-option-list", { multiple: multiple, disabled: isDisabled, filter: filter, required: required, contentHeight: contentHeight, ref: refListEl }, h("slot", null), hasPropOptions
+        ? rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
+        : '')));
+};

package/dist/collection/utils/dropdown/option.js

@@ -0,0 +1,44 @@
+export const newBalOption = (option, options) => {
+    const data = Object.assign(Object.assign({}, option), { disabled: false, invalid: false, selected: false, focused: false, hidden: false, multiline: false });
+    if (options) {
+        data.disabled = options.disabled === undefined ? data.disabled : options.disabled;
+        data.invalid = options.invalid === undefined ? data.invalid : options.invalid;
+        data.selected = options.selected === undefined ? data.selected : options.selected;
+        data.focused = options.focused === undefined ? data.focused : options.focused;
+        data.hidden = options.hidden === undefined ? data.hidden : options.hidden;
+        data.multiline = options.multiline === undefined ? data.multiline : options.multiline;
+    }
+    return data;
+};
+export const mapOption = (option) => {
+    return newBalOption({
+        value: option.value,
+        label: option.label,
+    }, option);
+};
+export class DropdownOptionUtil {
+    connectedCallback(component) {
+        this.component = component;
+        this.optionChanged();
+    }
+    async componentWillRender() {
+        if (this.component.listEl) {
+            this.component.nativeOptions = await this.component.listEl.getValues();
+        }
+    }
+    hasPropOptions() {
+        return this.component.options && this.component.options.length > 0;
+    }
+    async optionChanged() {
+        this.component.rawOptions = this.component.options.map(mapOption);
+        await this.component.valueUtil.updateInputContent();
+    }
+    async listenToOptionChange(_ev) {
+        var _a;
+        const newSelectedValues = (await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.getSelectedValues())) || [];
+        this.component.valueUtil.updateRawValueBySelection(newSelectedValues);
+        if (!this.component.multiple) {
+            this.component.popupUtil.collapseList();
+        }
+    }
+}

package/dist/collection/utils/dropdown/popup.js

@@ -0,0 +1,45 @@
+import { autoUpdate, computePosition, flip, shift } from "@floating-ui/dom";
+export class DropdownPopupUtil {
+    constructor() {
+        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
+            computePosition(referenceEl, floatingEl, {
+                placement: 'bottom-start',
+                middleware: [flip(), shift()],
+            }).then(({ x, y }) => {
+                Object.assign(floatingEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        };
+    }
+    connectedCallback(component) {
+        this.component = component;
+    }
+    toggleList() {
+        if (!this.component.valueUtil.isDisabled()) {
+            if (this.component.isExpanded) {
+                this.collapseList();
+            }
+            else {
+                this.expandList();
+            }
+        }
+    }
+    expandList() {
+        var _a;
+        if (this.component.panelEl) {
+            this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+        }
+        this.component.isExpanded = true;
+        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusFirst();
+    }
+    collapseList() {
+        var _a;
+        this.component.isExpanded = false;
+        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
+        if (this.component.panelCleanup) {
+            this.component.panelCleanup();
+        }
+    }
+}