@baloise/ds-core 16.8.0 → 17.0.0

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

@@ -12,7 +12,7 @@ export class NavLinkGrid {
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("slot", null)));
+        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
     }
     static get is() { return "bal-nav-link-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.js

@@ -16,7 +16,7 @@ export class NavLinkGridCol {
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { class: Object.assign({}, innerEl.class()) }, h("slot", null))));
+        return (h(Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
     }
     static get is() { return "bal-nav-link-grid-col"; }
     static get originalStyleUrls() {

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

@@ -16,7 +16,7 @@ export class NavLinkGroup {
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", null)));
+        return (h(Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
     }
     static get is() { return "bal-nav-link-group"; }
     static get originalStyleUrls() {

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

@@ -26,7 +26,7 @@ export class NavMenuBar {
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { class: Object.assign({}, innerBlock.class()) }, h("div", { class: Object.assign({}, block.element('container').class()) }, h("slot", null)))));
+        return (h(Host, { key: '4b2520319f467e9fc3cf0b7e1bece33c3e605915', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: '6ecb9f3e785c318c05064ab6f9e18a7c1774cd49', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'e809ddfb4b672a29852c44ab59c82e35fa5b6ac4', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'b249113bdb2b5289a213a3ff2782cd958ac7d923' })))));
     }
     static get is() { return "bal-nav-menu-bar"; }
     static get originalStyleUrls() {

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

@@ -50,7 +50,7 @@ export class NavMenuFlyout {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, line.class()) }), h("div", { class: Object.assign({}, block.element('container').class()) }, h("slot", null))));
+        return (h(Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
     }
     static get is() { return "bal-nav-menu-flyout"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-:root{--bal-nav-meta-bar-variant-primary-background: var(--bal-color-primary);--bal-nav-meta-bar-variant-primary-shadow: none;--bal-nav-meta-bar-variant-white-background: var(--bal-color-white);--bal-nav-meta-bar-variant-white-shadow: 0 5px 15px rgba(0,0,0,.1);--bal-nav-meta-bar-variant-grey-background: var(--bal-color-grey-2);--bal-nav-meta-bar-variant-grey-shadow: none}.bal-nav-meta-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-meta-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-meta-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-meta-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-meta-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-meta-bar--size-normal{padding-top:.5rem;padding-bottom:.5rem;height:4rem;max-height:4rem}.bal-nav-meta-bar--size-small{min-height:3rem}.bal-nav-meta-bar--position-fixed-top{position:fixed;top:0;left:0;width:100%}.bal-nav-meta-bar--position-fixed-bottom{position:fixed;bottom:0;left:0;width:100%}.bal-nav-meta-bar--variant-primary{background:var(--bal-nav-meta-bar-variant-primary-background);box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow)}.bal-nav-meta-bar--variant-grey{background:var(--bal-nav-meta-bar-variant-grey-background);box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow)}.bal-nav-meta-bar--variant-white{background:var(--bal-nav-meta-bar-variant-white-background);box-shadow:var(--bal-nav-meta-bar-variant-white-shadow)}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-meta-bar--hidden-tablet{display:hidden;visibility:hidden}}.bal-nav-meta-bar .button-label{word-break:keep-all !important}.bal-nav-meta-bar-transform{will-change:transition;transition:transform .3s ease-in-out;position:fixed;display:block;width:100%;top:0;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{transform:translateY(-5rem)}
+:root{--bal-nav-meta-bar-variant-primary-background: var(--bal-color-primary);--bal-nav-meta-bar-variant-primary-shadow: none;--bal-nav-meta-bar-variant-white-background: var(--bal-color-white);--bal-nav-meta-bar-variant-white-shadow: 0 5px 15px rgba(0,0,0,.1);--bal-nav-meta-bar-variant-grey-background: var(--bal-color-grey-2);--bal-nav-meta-bar-variant-grey-shadow: none}.bal-nav-meta-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-meta-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-meta-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-meta-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-meta-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-meta-bar--size-normal{padding-top:.5rem;padding-bottom:.5rem;height:4rem;max-height:4rem}.bal-nav-meta-bar--size-small{min-height:3rem}.bal-nav-meta-bar--position-fixed-top{position:fixed;top:0;left:0;width:100%}.bal-nav-meta-bar--position-fixed-bottom{position:fixed;bottom:0;left:0;width:100%}.bal-nav-meta-bar--variant-primary{background:var(--bal-nav-meta-bar-variant-primary-background);box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow)}.bal-nav-meta-bar--variant-grey{background:var(--bal-nav-meta-bar-variant-grey-background);box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow)}.bal-nav-meta-bar--variant-white{background:var(--bal-nav-meta-bar-variant-white-background);box-shadow:var(--bal-nav-meta-bar-variant-white-shadow)}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-mobile{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}.bal-nav-meta-bar .button-label{word-break:keep-all !important}.bal-nav-meta-bar-transform{will-change:transition;transition:transform .3s ease-in-out;position:fixed;display:block;width:100%;top:0;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{transform:translateY(-5rem)}

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, { 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", { class: Object.assign({}, block.element('container').class()) }, h("slot", null))));
+        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, { id: this.navId, class: Object.assign({}, block.class()) }, h("div", { 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", null, h("slot", null))), 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-navbar/bal-navbar-brand/bal-navbar-brand.js

@@ -56,8 +56,8 @@ export class NavbarBrand {
     }
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
-        const logoTemplate = this.logo ? (h("img", { loading: "lazy", class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        return (h(Host, { class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", null)), h("bal-button", { class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
+        return (h(Host, { key: 'bd905e5548b3eba587403d1de9e19578caf654fe', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'e94ee28b3f46017080ebb7dfe03ffe62bfa721da', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'faa690ef810fbb6444d577bc2aaad0412bbd1f92' })), h("bal-button", { key: '7ec55643796d5c32ea3cbbc70359100b5798ff66', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));

package/dist/collection/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.js

@@ -32,7 +32,7 @@ export class NavbarMenu {
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", null)));
+        return (h(Host, { key: '6b0a857bff0929177b51e75b2e5e26ad51d9dc6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
     }
     static get is() { return "bal-navbar-menu"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-end/bal-navbar-menu-end.js

@@ -6,7 +6,7 @@ export class NavbarMenuEnd {
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", null)));
+        return (h(Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
     }
     static get is() { return "bal-navbar-menu-end"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-start/bal-navbar-menu-start.js

@@ -6,7 +6,7 @@ export class NavbarMenuStart {
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", null)));
+        return (h(Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
     }
     static get is() { return "bal-navbar-menu-start"; }
     static get properties() {

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

@@ -24,7 +24,7 @@ export class Navbar {
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", null))));
+        return (h(Host, { key: 'dddbbeaef348b9ff101743f71451f6d84ac72951', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'ba4bb4f5ea156b0a2b4ba5f54f8d80b41477ee6b', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
     }
     static get is() { return "bal-navbar"; }
     static get originalStyleUrls() {

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

@@ -4,11 +4,11 @@ export class Notices {
         this.interface = 'toast';
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'f907ea5288441ecace35e9041ca37c50e249a9eb', class: {
                 'bal-app': true,
                 'bal-notices': true,
                 [`has-${this.interface}`]: true,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '9f6fdf15e464f2682750f57812a4ff45e40b9612' })));
     }
     static get is() { return "bal-notices"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ export class Notification {
         this.color = '';
     }
     render() {
-        return (h(Host, { class: "bal-notification" }, h("div", { class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", null))));
+        return (h(Host, { key: '053bf4393f0f7a11eadd2ff98f870b0d7de1452c', class: "bal-notification" }, h("div", { key: 'afcaa942e5970f510df5e65aa5fdbf6fd9744919', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'ee85e21689e226931c4c3dcbbbaa43741d05340a' }))));
     }
     static get is() { return "bal-notification"; }
     static get originalStyleUrls() {

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, { onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ 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, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", null)), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        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, { class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
+        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-pagination/bal-pagination.js

@@ -101,10 +101,10 @@ export class Pagination {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", null, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small" })), h("bal-button", { square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: 'b9053c6e1ecf8a94ea93af48d554c508126fd21e', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'e2c9788314a42180f53285add2a1488d67030630' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: 'f165f8e63bdf180408344aa91b69032ce5ce320c', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: 'a9c58c583f943609606998eff081ac505fd82ff3', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: '09e36de547b42f23a30189e0e1ed4d28be5f1ba7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '7f0c6770282939433a0315307a0c06be9440419c', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: '0ea2d28d497cbe89a8858071a252e284790febd0', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: 'f509547f7dddfd18e01b828992403b3ce3ea47a1', name: "nav-go-left", size: "small" })), h("bal-button", { key: '2658807aa50c6b2c3f17427cdf4d8d684d4349f9', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '1cd086e9b73eea943723e05593a4edf83479c5f3', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     static get is() { return "bal-pagination"; }
     static get originalStyleUrls() {

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

@@ -53,7 +53,7 @@ export class PopoverContent {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", null)), h("div", { class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     static get is() { return "bal-popover-content"; }
     static get properties() {