@baloise/ds-core 16.8.0-nightly.20241128 → 17.0.0

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

@@ -1,3 +1,4 @@
+import { __decorate, __metadata } from "tslib";
 import { Host, h, writeTask } from "@stencil/core";
 import { dismiss, eventMethod, prepareOverlay } from "../../utils/overlays/overlays";
 import { attachComponent, detachComponent } from "../../utils/framework-delegate";
@@ -5,6 +6,7 @@ import { deepReady, wait } from "../../utils/helpers";
 import { getClassMap } from "../../utils/css-classes";
 import { BalScrollHandler } from "../../utils/scroll";
 import { balBrowser } from "../../utils/browser";
+import { ListenTo } from "../../utils/listen";
 export class Modal {
     constructor() {
         this.isClickedOutsideOnMouseDown = false;
@@ -182,17 +184,17 @@ export class Modal {
         return false;
     }
     render() {
-        return (h(Host, { key: 'ab660706a80598061e75d8e6ba9ad19cd150e6c6', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '798fe5316195806b60cadaf15fd2455268f62919', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: '30b992e31c43265c75e6d29d85aa49cdd892c793', class: {
+            } }, h("div", { key: 'b57401f0e8383d1c1455602523ad771383a29324', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '035146f0ef98690571b0de0a458bfa119763e587', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '47e3429c0148724a7c102bd3f4718b4476b90c27', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0198a08e73e1f878a7aa4b766fa585c3e249d930', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '5aef1c76fd9d0a62b53e1665b2a341ecac7db74a', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '44e47136560cfe7f426f2407cd2cf6c923af2e08' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '62773246852b6a4be88dab20d93bf0a8169e1f13' })))));
     }
     static get is() { return "bal-modal"; }
     static get originalStyleUrls() {
@@ -674,31 +676,28 @@ export class Modal {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "onClickCloseButton",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "onMouseDown",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "mouseup",
-                "method": "onMouseUp",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keyup",
-                "method": "handleKeyUp",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
+__decorate([
+    ListenTo('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onClickCloseButton", null);
+__decorate([
+    ListenTo('mousedown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onMouseDown", null);
+__decorate([
+    ListenTo('mouseup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onMouseUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "handleKeyUp", null);

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

@@ -3,6 +3,7 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { Logger } from "../../../utils/log";
 import { balBrowser } from "../../../utils/browser";
+import { ListenTo } from "../../../utils/listen";
 export class NavMetaBar {
     constructor() {
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
@@ -57,7 +58,7 @@ export class NavMetaBar {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'a3c7f085f3811353baca0bd93604167c3ad527d2', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'c88186ebabcaa43c0493c7c5c295c5450c2a2c74', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'f1fcc2b1967db28ea405d9a5499ca47d8bc6cecd' }))));
+        return (h(Host, { key: 'c78fff46b1798a4d4d2a26152b1005694c2a3534', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'a0ba3a8f0942a67fc2d1d6e795b288f9dd12d621', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7428dc9ba14777bf263aa62c5a91634efdbc70d5' }))));
     }
     static get is() { return "bal-nav-meta-bar"; }
     static get originalStyleUrls() {
@@ -172,15 +173,6 @@ export class NavMetaBar {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "scroll",
-                "method": "handleScroll",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }
 __decorate([
     Logger('bal-meta-bar'),
@@ -188,4 +180,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
+__decorate([
+    ListenTo('scroll', { target: 'window', passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "handleScroll", null);
 let NavMetaBarIds = 0;

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

@@ -11,6 +11,7 @@ import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { i18nNavBars } from "./bal-nav.i18n";
 import { balBrowser } from "../../utils/browser";
 import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
+import { ListenTo } from "../../utils/listen";
 export class Nav {
     constructor() {
         this.navId = `bal-nav-${NavIds++}`;
@@ -277,7 +278,7 @@ export class Nav {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: 'f4468c4973667b52c77b05cee9b3ef521c9b3a58', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '4b66d4ea07b31adb49738316ced208b1bb02c1be', class: {
+        return (h(Host, { key: '9850048bcb764e760f50c6f54f39a094e8113da4', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'c6b2985da610cdbaee3f8cdd9be9f7e5d3f9c026', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -287,7 +288,7 @@ export class Nav {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '13c3f4f937d282ecff01ec40e10102fed0c3ab62' }, h("slot", { key: 'cad51666687cd1c41734c136f5db77bf1308d1a3' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '9e8d533088aea08856b7b6a03a7fec62fdab2698' }, h("slot", { key: 'daba1f88b1d7d20049682646c7cdd5cfe289d9f9' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -474,21 +475,6 @@ export class Nav {
                 "methodName": "buttonChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balChange",
-                "method": "listenToPopupChanges",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "clickOnOutside",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }
 __decorate([
     Logger('bal-nav'),
@@ -496,6 +482,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Nav.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balChange'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Nav.prototype, "listenToPopupChanges", null);
+__decorate([
+    ListenTo('click', { target: 'document', passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Nav.prototype, "clickOnOutside", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),

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

@@ -12,6 +12,7 @@ import { toUserFormattedNumber, isNotNumber, toNumber, toFixedNumber, validateKe
 import isNil from "lodash.isnil";
 import isEmpty from "lodash.isempty";
 import isNaN from "lodash.isnan";
+import { ListenTo } from "../../utils/listen";
 export class NumberInput {
     constructor() {
         this.inputId = `bal-number-input-${numberInputIds++}`;
@@ -231,7 +232,7 @@ export class NumberInput {
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '61753da95b80c0d89c838f8311d3d6ce59d707a7', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'c37e297b240a59a36178e9e3e9022188dfef2928', class: {
+        return (h(Host, { key: '25a122a19c18a933d55991cb22b29f6e2a96eb02', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'd9ef6e1d970f4ada012b65d2518fd793b44024c3', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -760,21 +761,6 @@ export class NumberInput {
                 "methodName": "valueChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-number-input'),
@@ -782,6 +768,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], NumberInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], NumberInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -6,6 +6,7 @@ import { ariaBooleanToString } from "../../utils/aria";
 import { ListenToElementStates } from "../../utils/element-states";
 import { stopEventBubbling } from "../../utils/form-input";
 import { BalElementStateListener } from "../../utils/element-states/element-states.listener";
+import { ListenTo } from "../../utils/listen";
 export class Option {
     constructor() {
         this.inputId = `bal-option-${balOptionIds++}`;
@@ -96,7 +97,7 @@ export class Option {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'aed8058d7b0526a84dde426b242ded48836fde15', 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", { key: 'e475f8289d2d11ec790e5b808a3b5a67405ee6db', 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", { key: '9dbc67bbd197f2d30ecc38eba4c1ccf93bb98a7d', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '3e1392bbd15175bc15f43d0e4d90e65abfa0f5ec' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'b69ef765d0cfd4e4e29743026b68c5c6c64f685c', 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", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', 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", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     static get is() { return "bal-option"; }
     static get originalStyleUrls() {
@@ -335,15 +336,6 @@ export class Option {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "mouseenter",
-                "method": "listenToMouseEnter",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }];
-    }
 }
 __decorate([
     Logger('bal-option'),
@@ -351,6 +343,12 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
+__decorate([
+    ListenTo('mouseenter'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "listenToMouseEnter", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),

package/dist/collection/components/bal-option-list/bal-option-list.js

@@ -7,6 +7,7 @@ import { raf, waitAfterFramePaint } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { includes, startsWith } from "../bal-select/utils/utils";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class OptionList {
     constructor() {
         this.inputId = `bal-option-list-${balOptionListIds++}`;
@@ -414,7 +415,7 @@ export class OptionList {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '5673983f31418c635630da12d6bb353d099b30fb', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '9e161788ffe56009d4992f5bc1c90c8859ef7c2f', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '27f7d54a84ed20d63eb388fdcac01bad65f79d57' }))));
+        return (h(Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {
@@ -955,21 +956,6 @@ export class OptionList {
                 "methodName": "contentHeightChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balOptionFocus",
-                "method": "listenToMouseEnter",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "balOptionChange",
-                "method": "listenToOptionChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-option-list'),
@@ -977,4 +963,16 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balOptionFocus', { passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToMouseEnter", null);
+__decorate([
+    ListenTo('balOptionChange', { passive: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;

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

@@ -5,6 +5,7 @@ import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { Logger } from "../../utils/log";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { ListenTo } from "../../utils/listen";
 export class Popover {
     constructor() {
         this.popoverId = `bal-po-${PopoverIds++}`;
@@ -92,12 +93,12 @@ export class Popover {
             clearTimeout(this.componentDidRenderTimer);
             this.componentDidRenderTimer = setTimeout(() => {
                 var _a;
-                const triggerWidth = (_a = this.element) === null || _a === void 0 ? void 0 : _a.clientWidth;
+                const triggerWidth = (_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth;
                 if (triggerWidth) {
-                    this.element.style.maxWidth = `${triggerWidth}px`;
+                    this.el.style.maxWidth = `${triggerWidth}px`;
                 }
                 else {
-                    this.element.style.maxWidth = `initial`;
+                    this.el.style.maxWidth = `initial`;
                 }
             });
         }
@@ -115,7 +116,7 @@ export class Popover {
     async clickOnOutside(ev) {
         var _a;
         if (this.active) {
-            if (!this.element.contains(ev.target)) {
+            if (!this.el.contains(ev.target)) {
                 this.active = false;
             }
             if ((_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.isEqualNode(ev.target)) {
@@ -130,7 +131,7 @@ export class Popover {
         }
     }
     async tabOutside(ev) {
-        if (ev.key === 'Tab' && !this.element.contains(document.activeElement) && this.active) {
+        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.active) {
             await this.toggle();
         }
     }
@@ -195,7 +196,7 @@ export class Popover {
      * ------------------------------------------------------
      */
     get footMobileNav() {
-        return this.element.closest('[slot="meta-mobile-foot"]');
+        return this.el.closest('[slot="meta-mobile-foot"]');
     }
     get modifierOffset() {
         return {
@@ -215,13 +216,13 @@ export class Popover {
         };
     }
     get triggerElement() {
-        return this.element.querySelector('[bal-popover-trigger]');
+        return this.el.querySelector('[bal-popover-trigger]');
     }
     get menuElement() {
-        return this.element.querySelector('bal-popover-content');
+        return this.el.querySelector('bal-popover-content');
     }
     get menuInnerElement() {
-        return this.element.querySelector('.bal-popover__content__inner');
+        return this.el.querySelector('.bal-popover__content__inner');
     }
     getBackdropHeight() {
         if (balBrowser.hasWindow) {
@@ -242,11 +243,11 @@ export class Popover {
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { key: '3889b838b862e7216016cd26758423088f8cd1be', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: '221a0a98143aa720c83c1b542cdfe8eff65e5318', ref: el => {
+        return (h(Host, { key: '997e5fefb0e6fe103b1732f084f8a7963eb319e5', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: 'd5cb75c1951b9fe7cfd22ef86ee677461eecf5fc', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", { key: 'e7293d370c9af68a797ee1b05282b769afd964a5' })));
+            } })), h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
     }
     static get is() { return "bal-popover"; }
     static get originalStyleUrls() {
@@ -654,40 +655,13 @@ export class Popover {
             }
         };
     }
-    static get elementRef() { return "element"; }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "active",
                 "methodName": "activeChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balPopoverPrepare",
-                "method": "handlePopoverPrepare",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "clickOnOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyUp",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "tabOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-popover'),
@@ -695,6 +669,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handlePopoverPrepare", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "clickOnOutside", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handleKeyUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "tabOutside", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

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

@@ -9,6 +9,7 @@ import { debounce } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { VariantRenderer } from "./variants/variant.renderer";
 import { focusableQueryString } from "../../utils/focus-visible";
+import { ListenTo } from "../../utils/listen";
 export class Popup {
     constructor() {
         this.popupId = `bal-pu-${popupIds++}`;
@@ -310,7 +311,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '94a942ab716ff0b0fefd31e04c92c1f0be176598', 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: '8b6d28b5958988c0fb2b9278d1d59f13afe5b246', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '26a502edb497ba77d5fad9f9feb402436de104b2', 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: 'df69191a8a452dbf85048664718644c5e24821ee', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '01d214cdd0ea995faac81e0e2e19cea33669ea5a', 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: '9fc3386a415c72948f1bd08d4057e12d54e8d7a3', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '2f60e7e5e7c33d5b7928d4d1e605d758aa1966b8' }))))));
+        return (h(Host, { key: 'bf7416d06bf9b78fb1f45474dbadbdaef3716fa9', 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: '907ceff3eeb00380ba075a1c942c9593fa66d828', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'a07c2e70f1964142896ab0e2dddda63212d6e7a6', 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: '09fbe89593e72dfa5eda05ce017dbfdaa368ab6c', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '486d20a16eef12b6398235a15d6771924d9909b2', 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: 'd7210ff5af9647dbe4d176e00c7af06943bdd51a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '974459f017b51844019872313636f7055357f2e1' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {
@@ -784,39 +785,6 @@ export class Popup {
                 "methodName": "contentWidthChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnGlobalClick",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenOnKeyDown",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenOnMouseDown",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "mouseup",
-                "method": "listenOnMouseUp",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "click",
-                "method": "listenOnComponentClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-popup'),
@@ -824,4 +792,34 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnGlobalClick", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnKeyDown", null);
+__decorate([
+    ListenTo('mousedown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseDown", null);
+__decorate([
+    ListenTo('mouseup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseUp", null);
+__decorate([
+    ListenTo('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnComponentClick", null);
 let popupIds = 0;