@baloise/ds-core 19.0.1 → 19.1.0

package/dist/collection/components/bal-date/bal-date.js

@@ -1,21 +1,60 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
-import { isSpaceKey } from "../../utils/keyboard";
-import { i18nBalDate } from "./bal-date.i18n";
-import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
-import { BalDate } from "../../utils/date";
+import { isEscapeKey } from "@baloise/web-app-utils";
+import { Host, h, } from "@stencil/core";
+import { ariaBooleanToString } from "../../utils/aria";
 import { inheritAttributes } from "../../utils/attributes";
-import { stopEventBubbling } from "../../utils/form-input";
+import { BEM } from "../../utils/bem";
+import { balBrowser } from "../../utils/browser";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
-import { debounceEvent } from "../../utils/helpers";
-import { defaultBalAriaForm } from "../../utils/form";
+import { BalDate } from "../../utils/date";
 import { balFloatingUi } from "../../utils/floating-ui";
-import { ariaBooleanToString } from "../../utils/aria";
+import { FOCUS_KEYS } from "../../utils/focus-visible";
+import { defaultBalAriaForm } from "../../utils/form";
+import { stopEventBubbling } from "../../utils/form-input";
+import { addEventListener, debounceEvent, rIC, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
+import { isSpaceKey } from "../../utils/keyboard";
+import { Logger } from "../../utils/log";
+import { i18nBalDate } from "./bal-date.i18n";
 export class Date {
     constructor() {
         this.inputId = `bal-da-${dateIds++}`;
         this.inheritedAttributes = {};
+        /**
+         * LIFECYCLE
+         * ------------------------------------------------------
+         */
+        this.hasConnected = false;
+        /**
+         * PRIVATE METHOD
+         * ------------------------------------------------------
+         */
+        this.handleKeydown = (ev) => {
+            this.isKeyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
+        this.handlePointerDown = () => {
+            this.isKeyboardMode = false;
+        };
+        this.handleOutsideClick = (ev) => {
+            if (this.isExpanded) {
+                if (!this.el.contains(ev.target)) {
+                    this.isExpanded = false;
+                    this.hasFocus = false;
+                    rIC(() => this.balBlur.emit(ev));
+                }
+            }
+        };
+        this.handleFocus = (ev) => {
+            stopEventBubbling(ev);
+            this.hasFocus = true;
+            this.balFocus.emit(ev.detail);
+        };
+        this.handleBlur = (ev) => {
+            stopEventBubbling(ev);
+            if (!this.isExpanded) {
+                this.hasFocus = false;
+                rIC(() => this.balBlur.emit(ev.detail));
+            }
+        };
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -39,6 +78,8 @@ export class Date {
             this.balChange.emit(this.value);
             if (this.closeOnSelect) {
                 this.close();
+                this.hasFocus = false;
+                rIC(() => this.balBlur.emit());
             }
         };
         this.onInputInput = (ev) => {
@@ -56,24 +97,22 @@ export class Date {
             this.value = ev.detail;
             this.balChange.emit(this.value);
         };
-        this.onInputFocus = (ev) => {
-            stopEventBubbling(ev);
-            this.balFocus.emit(ev.detail);
-        };
-        this.onInputBlur = (ev) => {
-            stopEventBubbling(ev);
-            this.balBlur.emit(ev.detail);
-        };
         this.onKeyPress = async ({ detail }) => {
-            if (isSpaceKey(detail) && !this.triggerIcon) {
+            if (detail && detail.key) {
                 if (this.isExpanded) {
-                    await this.close();
+                    if (detail.key === 'Tab' || isEscapeKey(detail) || isSpaceKey(detail)) {
+                        await this.close();
+                    }
                 }
                 else {
-                    await this.open();
+                    if (isSpaceKey(detail)) {
+                        await this.open();
+                    }
                 }
             }
         };
+        this.isKeyboardMode = false;
+        this.hasFocus = false;
         this.isExpanded = false;
         this.language = defaultConfig.language;
         this.calendarValue = undefined;
@@ -108,43 +147,26 @@ export class Date {
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
     connectedCallback() {
-        this.valueChanged();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    async listenToKeydown(ev) {
-        if (this.isExpanded && (ev.key === 'Escape' || ev.key === 'Esc')) {
-            ev.preventDefault();
-            await this.close();
-        }
-    }
-    async listenOnKeyup(ev) {
-        // dismiss popup when focus next form control
-        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.isExpanded) {
-            await this.close();
+        if (balBrowser.hasDocument) {
+            addEventListener(document, 'keydown', this.handleKeydown);
+            addEventListener(document, 'touchstart', this.handlePointerDown);
+            addEventListener(document, 'mousedown', this.handlePointerDown);
+            addEventListener(document, 'click', this.handleOutsideClick);
         }
+        this.hasConnected = true;
+        this.valueChanged();
     }
-    async listenOnclick(ev) {
-        // when clicked outside dismiss popup
-        if (this.isExpanded && !this.el.contains(ev.target)) {
-            await this.close();
+    disconnectedCallback() {
+        if (balBrowser.hasDocument) {
+            removeEventListener(document, 'keydown', this.handleKeydown);
+            removeEventListener(document, 'touchstart', this.handlePointerDown);
+            removeEventListener(document, 'mousedown', this.handlePointerDown);
+            removeEventListener(document, 'click', this.handleOutsideClick);
         }
     }
-    async listenOnPopoverPrepare(ev) {
-        // dismiss this popover, because another will open
-        if (this.inputId !== ev.detail) {
-            await this.close();
-        }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
     /**
      * @internal define config for the component
@@ -194,8 +216,10 @@ export class Date {
      * `input.focus()`.
      */
     async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+        if (this.inputEl && !this.disabled && !this.readonly) {
+            await waitAfterIdleCallback();
+            this.inputEl.focus();
+        }
     }
     /**
      * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
@@ -204,7 +228,10 @@ export class Date {
      */
     async setBlur() {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+        if (this.inputEl && !this.disabled && !this.readonly) {
+            await waitAfterIdleCallback();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+        }
     }
     /**
      * Returns the native `<input>` element used under the hood.
@@ -221,14 +248,9 @@ export class Date {
         this.ariaForm = Object.assign({}, ariaForm);
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAriaForm(ariaForm);
     }
-    /**
-     * PRIVATE METHOD
-     * ------------------------------------------------------
-     */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
             const lib = await balFloatingUi.load();
-            this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
             this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
@@ -271,7 +293,7 @@ export class Date {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: 'f6b28c8faba40da040e139ec92757837c643bc44', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '8474544891624bc816606bcbca7a9589f2740acb', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '04609fd4beddc284e8c132864cdbff1cd76e0328', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '4d167de602c3a6e48f6f35d7fade4e5d5b6d4706', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: 'b0abca943beea5a541eead43d050a0c5add16216', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { key: 'df763339a5267bc106d30ca6cc3d62bc75c8f05f', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '55d4f91e6b77f56f38274bb984be9dc21a54a5a4', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: 'bf2b5f66aaf62f45f01e42cdd3e236707094d9dd', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: ev => this.handleFocus(ev), onBalBlur: ev => this.handleBlur(ev), onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '828597483d6ccc05c8fa9059b7d64941d8edc3d8', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '781a4f0d0b8ebc2c8b05a883e9441f4483e25820', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     static get is() { return "bal-date"; }
     static get originalStyleUrls() {
@@ -692,6 +714,8 @@ export class Date {
     }
     static get states() {
         return {
+            "isKeyboardMode": {},
+            "hasFocus": {},
             "isExpanded": {},
             "language": {},
             "calendarValue": {},
@@ -859,24 +883,6 @@ export class Date {
                         }
                     }
                 }
-            }, {
-                "method": "balPopoverPrepare",
-                "name": "balPopoverPrepare",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "- Use this to close unused popovers."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
     static get methods() {
@@ -1081,33 +1087,6 @@ export class Date {
                 "methodName": "debounceChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenToKeydown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "listenOnKeyup",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "listenOnclick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "balPopoverPrepare",
-                "method": "listenOnPopoverPrepare",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-date'),

package/dist/collection/components/bal-hint/bal-hint.css

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background: var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint__content{background:var(--bal-hint-content-background);display:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}
+@media(hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background: var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem}.bal-hint__content{background:var(--bal-hint-content-background);display:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}

package/dist/collection/components/bal-hint/bal-hint.js

@@ -9,7 +9,8 @@ import { isEnterKey, isSpaceKey } from "../../utils/keyboard";
 export class Hint {
     constructor() {
         this.bodyScrollHandler = new BalScrollHandler();
-        this.onPopoverChange = (ev) => {
+        this.componentId = `bal-hint-${hintIds++}`;
+        this.onPopupChange = (ev) => {
             this.isActive = ev.detail;
             preventDefault(ev);
         };
@@ -74,8 +75,8 @@ export class Hint {
      * Opens the hint box.
      */
     async present() {
-        if (this.popoverElement) {
-            this.popoverElement.present();
+        if (this.popupElement) {
+            this.popupElement.present();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.disable();
@@ -86,8 +87,8 @@ export class Hint {
      * Closes the hint box.
      */
     async dismiss() {
-        if (this.popoverElement) {
-            this.popoverElement.dismiss();
+        if (this.popupElement) {
+            this.popupElement.dismiss();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.enable();
@@ -104,10 +105,8 @@ export class Hint {
         const elIcon = block.element('icon');
         const elContent = block.element('content');
         const elButtons = elContent.element('buttons');
-        const padding = this.isMobile ? 0 : 8;
-        const offsetY = this.isMobile ? 0 : 16;
         const TriggerIcon = () => {
-            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onClick: () => this.toggle(), onKeyDown: event => {
+            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "bal-popup": this.componentId, "data-testid": "bal-hint-trigger", "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onKeyDown: event => {
                     if (isEnterKey(event) || isSpaceKey(event)) {
                         event.preventDefault();
                         this.toggle();
@@ -117,15 +116,10 @@ export class Hint {
         const HintContent = () => {
             return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
         };
-        const MobileOverlay = () => {
-            const elOverlay = block.element('overlay');
-            return (h("div", { class: Object.assign({}, elOverlay.class()) }, h(TriggerIcon, null), h("div", { class: Object.assign(Object.assign({}, elOverlay.element('content').class()), elOverlay.element('content').modifier('active').class(this.isActive)) }, h(HintContent, null))));
+        const Popup = () => {
+            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
         };
-        const Popover = () => {
-            return (h("div", { class: Object.assign({}, block.element('popover').class()) }, h("bal-popover", { hint: true, position: "right", offsetX: 0, offsetY: offsetY, padding: padding, ref: el => (this.popoverElement = el), onBalChange: this.onPopoverChange }, h(TriggerIcon, null), h("bal-popover-content", { color: "grey" }, h(HintContent, null)))));
-        };
-        const HintElement = this.isMobile ? MobileOverlay : Popover;
-        return (h(Host, { class: Object.assign({}, block.class()) }, h(HintElement, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
+        return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
     }
     static get is() { return "bal-hint"; }
     static get originalStyleUrls() {
@@ -286,3 +280,4 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Hint.prototype, "configChanged", null);
+let hintIds = 0;

package/dist/collection/components/bal-nav/bal-nav.js

@@ -1,16 +1,16 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { BEM } from "../../utils/bem";
+import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { balBrowser } from "../../utils/browser";
+import { ListenToConfig, defaultConfig, } from "../../utils/config";
+import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { ListenToMutation } from "../../utils/mutation";
-import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
-import { NavMetaLinkItem } from "./models/bal-nav-meta-link-item";
-import { NavMetaButton } from "./models/bal-nav-meta-button";
 import { BalScrollHandler } from "../../utils/scroll";
-import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { i18nNavBars } from "./bal-nav.i18n";
-import { balBrowser } from "../../utils/browser";
-import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
+import { NavMetaButton } from "./models/bal-nav-meta-button";
+import { NavMetaLinkItem } from "./models/bal-nav-meta-link-item";
 export class Nav {
     constructor() {
         this.navId = `bal-nav-${NavIds++}`;

package/dist/collection/components/bal-number-input/bal-number-input.utils.js

@@ -26,6 +26,9 @@ export function toNumber(value, decimalPoints = 0) {
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
         val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
+    if (typeof val === 'string') {
+        val = val.replace(getDecimalSeparator(), '.');
+    }
     return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 export function toFixedNumber(value, decimalPoints = 0) {

package/dist/collection/components/bal-popup/bal-popup.css

@@ -1 +1 @@
-:root{--bal-popup-backdrop-background: rgba(0,7,57,.8);--bal-popup-container-padding-top: 0;--bal-popup-container-padding-bottom: 0;--bal-popup-container-background: var(--bal-color-white);--bal-popup-variant-popover-max-width: auto;--bal-popup-variant-popover-radius: var(--bal-radius-large);--bal-popup-variant-popover-shadow: var(--bal-shadow-normal);--bal-popup-variant-drawer-radius: var(--bal-radius-large);--bal-popup-arrow-background: var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}
+:root{--bal-popup-backdrop-background: rgba(0,7,57,.8);--bal-popup-container-padding-top: 0;--bal-popup-container-padding-bottom: 0;--bal-popup-container-background: var(--bal-color-white);--bal-popup-variant-popover-max-width: auto;--bal-popup-variant-popover-radius: var(--bal-radius-large);--bal-popup-variant-popover-shadow: var(--bal-shadow-normal);--bal-popup-variant-drawer-radius: var(--bal-radius-large);--bal-popup-arrow-background: var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;height:100vh;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}

package/dist/collection/components/bal-popup/bal-popup.js

@@ -45,7 +45,7 @@ export class Popup {
         this.activeVariant = 'popover';
         this.trigger = undefined;
         this.lastTrigger = undefined;
-        this.minContainerWidth = 0;
+        this.minContainerWidth = '16.25rem';
         this.label = '';
         this.reference = undefined;
         this.variant = 'popover';
@@ -181,7 +181,7 @@ export class Popup {
     async setMinWidth(value) {
         if (this.containerEl) {
             this.containerEl.style.minWidth = `${value}px`;
-            this.minContainerWidth = value;
+            this.minContainerWidth = `${value}px`;
         }
     }
     /**
@@ -310,7 +310,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '22256d10b23aaeefad30786345780029c23f10a5', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'a3a5862b32a8a6acadd12893729148e016527dec', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'da06417052ab28135f651a6e3015462ae4d36915', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: 'd442c9ae9d377cd18d7853cb850182e5e117a199', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '078c31c4580e387b73b455afcc81610ea9ce7c9e', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '14cee241ee538a5ff4075b255841deaa0ca06ff6', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '834174282762c50461b4a9851c74416804905344' }))))));
+        return (h(Host, { key: '42bff759d5df91ba386b0fef2c115534177b035f', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'c66537aede2f557a3ae4e368226f14251177e27a', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'e93bf6f131e859126f4861deac80c761bae28d66', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'fcffcfe49ec94f2e7843fdb11428efd2cf6124c5', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '182834344790fb5cb8018a3841b0be36f67132b0', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '1dca8c0e7d328b04cb73168ddb43ca111f4090f2', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '1675cc733ec0eea4b56e28981a51570528947082' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-steps/components/step-button.js

@@ -8,7 +8,7 @@ export const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) =>
         return;
     }
     if (item.href) {
-        return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'is-link': true }, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
+        return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
     }
     return (h("button", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
 };

package/dist/collection/components/bal-tabs/bal-tabs.js

@@ -1,24 +1,24 @@
 import { __decorate, __metadata } from "tslib";
-import { Host, h, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import { ListenToAnimation } from "../../utils/animation";
 import { areArraysEqual } from "../../utils/array";
-import { debounce, debounceEvent, deepReady, hasParent, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
-import { defaultConfig, ListenToConfig } from "../../utils/config";
+import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
-import { newBalTabOption } from "./bal-tab.util";
+import { balBreakpoints, ListenToBreakpoints } from "../../utils/breakpoints";
+import { defaultConfig, ListenToConfig } from "../../utils/config";
 import { stopEventBubbling } from "../../utils/form-input";
-import { TabSelect } from "./components/tab-select";
-import { getComputedPadding, getWidthOfOverflowingChildren } from "../../utils/style";
-import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { debounce, debounceEvent, deepReady, hasParent, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
 import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
-import { TabNav } from "./components/tab-nav";
 import { toKebabCase } from "../../utils/string";
-import { SwiperUtil } from "../../utils/swiper";
+import { getComputedPadding, getWidthOfOverflowingChildren } from "../../utils/style";
 import { ListenToSwipe } from "../../utils/swipe";
+import { SwiperUtil } from "../../utils/swiper";
 import { ListenToVisibility } from "../../utils/visibility";
-import { ListenToAnimation } from "../../utils/animation";
-import { inheritAttributes } from "../../utils/attributes";
+import { newBalTabOption } from "./bal-tab.util";
+import { TabNav } from "./components/tab-nav";
+import { TabSelect } from "./components/tab-select";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;

package/dist/collection/components/bal-tabs/components/tab-nav.js

@@ -15,5 +15,13 @@ export const TabNav = ({ swiper, items, tabsId, isVertical, inNavbar, isMobile,
     const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, isExpanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
     const NavOrDiv = isLinkList ? 'nav' : 'div';
     const DivOrList = isLinkList ? 'ul' : 'div';
-    return (h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) }, h(NavOrDiv, { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => (swiper.innerEl = el), "aria-label": isLinkList ? ariaLabel : undefined }, h(DivOrList, { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: isLinkList ? undefined : 'tablist', "aria-label": isLinkList ? undefined : ariaLabel, ref: el => (swiper.containerEl = el) }, tabs.map((tab, index) => (h(Button, { item: tab, index: index }))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }), border ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))), showSwiperControls ? swiper.renderControls() : ''));
+    return (h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) }, h(NavOrDiv, { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => {
+            if (el) {
+                swiper.innerEl = el;
+            }
+        }, "aria-label": isLinkList ? ariaLabel : undefined }, h(DivOrList, { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: isLinkList ? undefined : 'tablist', "aria-label": isLinkList ? undefined : ariaLabel, ref: el => {
+            if (el) {
+                swiper.containerEl = el;
+            }
+        } }, tabs.map((tab, index) => (h(Button, { item: tab, index: index }))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }), border ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))), showSwiperControls ? swiper.renderControls() : ''));
 };

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

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '19.0.1';
+export const VERSION = '19.1.0';

package/dist/collection/utils/scroll.js

@@ -50,6 +50,7 @@ export class BalScrollHandler {
     enable() {
         if (this.target) {
             if (balBrowser.hasWindow && balBrowser.hasDocument) {
+                document.documentElement.style.overflow = '';
                 document.body.classList.remove('noscroll');
                 document.body.style.position = '';
                 document.body.style.top = '';
@@ -68,6 +69,7 @@ export class BalScrollHandler {
             if (balBrowser.hasWindow && balBrowser.hasDocument) {
                 this.x = window.pageXOffset || document.documentElement.scrollLeft;
                 this.y = window.pageYOffset || document.documentElement.scrollTop;
+                document.documentElement.style.overflow = 'hidden';
                 document.body.classList.add('noscroll');
                 document.body.style.position = 'fixed';
                 document.body.style.top = `-${this.y}px`;

package/dist/collection/utils/swiper/swiper.util.js

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
+import { BEM } from "../bem";
+import { stopEventBubbling } from "../form-input";
 import { addEventListener, debounce, isDescendant, raf, removeEventListener } from "../helpers";
+import { isTabKey } from "../keyboard";
 import { getComputedWidth } from "../style";
-import { i18nSwiperControlLabel } from "./swiper.i18n";
-import { SmallControl } from "./controls/small-control";
-import { LargeControl } from "./controls/large-control";
 import { DotControl } from "./controls/dot-control";
-import { BEM } from "../bem";
-import { isTabKey } from "../keyboard";
-import { stopEventBubbling } from "../form-input";
+import { LargeControl } from "./controls/large-control";
+import { SmallControl } from "./controls/small-control";
+import { i18nSwiperControlLabel } from "./swiper.i18n";
 export class SwiperUtil {
     constructor() {
         this.previousTransformValue = 0;

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { i as inheritAttributes } from './attributes-a3e70948.js';
 import { a as ariaBooleanToString } from './aria-ea150568.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
 import { m as rOnLoad } from './helpers-94c3fbac.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import './browser-a8073d92.js';
@@ -12,6 +12,7 @@ const BalButtonStyle0 = balButtonCss;
 const Button = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.balClick = createEvent(this, "balClick", 7);
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balBlur = createEvent(this, "balBlur", 7);
@@ -24,8 +25,11 @@ const Button = class {
             this.balBlur.emit();
         };
         this.onClick = (ev) => {
-            if (this.href !== undefined) {
-                this.balNavigate.emit(ev);
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
             }
         };
         this.isLargestContentPaintDone = false;
@@ -62,15 +66,10 @@ const Button = class {
         }
     }
     componentDidLoad() {
-        var _a;
         rOnLoad(() => (this.isLargestContentPaintDone = true));
-        if (this.el.getAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
-        }
     }
     componentWillLoad() {
+        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -79,6 +78,11 @@ const Button = class {
             'tabindex',
             'aria-haspopup',
         ]);
+        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
+            this.aria = {
+                haspopup: 'true',
+            };
+        }
     }
     componentDidRender() {
         this.balDidRender.emit();