@baloise/ds-core 16.8.0 → 17.0.0

package/dist/cjs/bal-nav_8.cjs.entry.js

@@ -2,24 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 const browser = require('./browser-1d542d0f.js');
 const scroll = require('./scroll-73c1b762.js');
-const helpers = require('./helpers-2a8c8333.js');
-const breakpoints_subject = require('./breakpoints.subject-04e46eae.js');
+const helpers = require('./helpers-393c2183.js');
+const listen = require('./listen-b42a4134.js');
+const breakpoints_subject = require('./breakpoints.subject-679bdc55.js');
 const config_default = require('./config.default-5bdd6e3d.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
-const breakpoints_decorator = require('./breakpoints.decorator-3e39d424.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
+const breakpoints_decorator = require('./breakpoints.decorator-967c2fd2.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
-const resize_decorator = require('./resize.decorator-ae91ead2.js');
+const resize_decorator = require('./resize.decorator-981b6817.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-c5d8ed82.js');
+require('./tokens.esm-e4edac35.js');
 
 class NavLinkItem {
     constructor(item, observer) {
@@ -631,7 +632,7 @@ const Nav = class {
         const block = bem.BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (index.h(index.Host, { id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { class: {
+        return (index.h(index.Host, { key: '9850048bcb764e760f50c6f54f39a094e8113da4', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: 'c6b2985da610cdbaee3f8cdd9be9f7e5d3f9c026', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (index.h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, index.h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (index.h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -641,7 +642,7 @@ const Nav = class {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (index.h("bal-nav-menu-flyout", { navId: this.navId }, index.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))) : (''))) : (''), index.h("div", null, index.h("slot", null))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.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 ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.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))) : (''))) : (''), index.h("div", { key: '9e8d533088aea08856b7b6a03a7fec62fdab2698' }, index.h("slot", { key: 'daba1f88b1d7d20049682646c7cdd5cfe289d9f9' }))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.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 ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.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 ? (index.h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, index.h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -684,6 +685,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Nav.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balChange'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Nav.prototype, "listenToPopupChanges", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { target: 'document', passive: true }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Nav.prototype, "clickOnOutside", null);
 tslib_es6.__decorate([
     mutation_decorator.ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     tslib_es6.__metadata("design:type", Function),
@@ -734,10 +747,10 @@ const NavLink = class {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.h(Link, Object.assign({ "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        return (index.h(index.Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.h(Link, Object.assign({ key: '68ac516eb7190bbc532cfd108854cf1329110984', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", null))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
     }
 };
 tslib_es6.__decorate([
@@ -764,7 +777,7 @@ const NavLinkGrid = class {
      */
     render() {
         const block = bem.BEM.block('nav-link-grid');
-        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, index.h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
     }
 };
 tslib_es6.__decorate([
@@ -793,7 +806,7 @@ const NavLinkGridCol = class {
     render() {
         const block = bem.BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { class: Object.assign({}, innerEl.class()) }, index.h("slot", null))));
+        return (index.h(index.Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, index.h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
     }
 };
 tslib_es6.__decorate([
@@ -822,7 +835,7 @@ const NavLinkGroup = class {
     render() {
         const block = bem.BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
     }
 };
 tslib_es6.__decorate([
@@ -861,7 +874,7 @@ const NavMenuBar = class {
     render() {
         const block = bem.BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (index.h(index.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')) }, index.h("div", { class: Object.assign({}, innerBlock.class()) }, index.h("div", { class: Object.assign({}, block.element('container').class()) }, index.h("slot", null)))));
+        return (index.h(index.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')) }, index.h("div", { key: '6ecb9f3e785c318c05064ab6f9e18a7c1774cd49', class: Object.assign({}, innerBlock.class()) }, index.h("div", { key: 'e809ddfb4b672a29852c44ab59c82e35fa5b6ac4', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'b249113bdb2b5289a213a3ff2782cd958ac7d923' })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -924,7 +937,7 @@ const NavMenuFlyout = class {
     render() {
         const block = bem.BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (index.h(index.Host, { id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { class: Object.assign({}, line.class()) }), index.h("div", { class: Object.assign({}, block.element('container').class()) }, index.h("slot", null))));
+        return (index.h(index.Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), index.h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -943,7 +956,7 @@ tslib_es6.__decorate([
 let NavMenuFlyOutIds = 0;
 NavMenuFlyout.style = BalNavMenuFlyoutStyle0;
 
-const balNavMetaBarCss = ":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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{-ms-flex-positive:1;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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow);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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow);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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-white-shadow);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;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-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{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(-5rem);transform:translateY(-5rem)}";
+const balNavMetaBarCss = ":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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{-ms-flex-positive:1;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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow);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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow);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);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-white-shadow);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;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-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{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(-5rem);transform:translateY(-5rem)}";
 const BalNavMetaBarStyle0 = balNavMetaBarCss;
 
 const NavMetaBar = class {
@@ -1001,7 +1014,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = bem.BEM.block('nav-meta-bar');
-        return (index.h(index.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')) }, index.h("div", { class: Object.assign({}, block.element('container').class()) }, index.h("slot", null))));
+        return (index.h(index.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')) }, index.h("div", { key: 'a0ba3a8f0942a67fc2d1d6e795b288f9dd12d621', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '7428dc9ba14777bf263aa62c5a91634efdbc70d5' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -1011,6 +1024,12 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('scroll', { target: 'window', passive: true }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", []),
+    tslib_es6.__metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "handleScroll", null);
 let NavMetaBarIds = 0;
 NavMetaBar.style = BalNavMetaBarStyle0;
 

package/dist/cjs/bal-navbar_5.cjs.entry.js

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 const scroll = require('./scroll-73c1b762.js');
 const browser = require('./browser-1d542d0f.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-2a8c8333.js');
-const breakpoints_subject = require('./breakpoints.subject-04e46eae.js');
-const breakpoints_decorator = require('./breakpoints.decorator-3e39d424.js');
+const helpers = require('./helpers-393c2183.js');
+const breakpoints_subject = require('./breakpoints.subject-679bdc55.js');
+const breakpoints_decorator = require('./breakpoints.decorator-967c2fd2.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-c5d8ed82.js');
+require('./tokens.esm-e4edac35.js');
 
 const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";
 const BalNavbarStyle0 = balNavbarCss;
@@ -44,7 +44,7 @@ const Navbar = class {
     }
     render() {
         const navbarEl = bem.BEM.block('navbar');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, index.h("nav", { role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, index.h("slot", null))));
+        return (index.h(index.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)) }, index.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 !== '' }) }, index.h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -111,8 +111,8 @@ const NavbarBrand = class {
     }
     render() {
         const navbarBrandEl = bem.BEM.block('navbar').element('brand');
-        const logoTemplate = this.logo ? (index.h("img", { loading: "lazy", class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (index.h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", null)), index.h("bal-button", { class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        const logoTemplate = this.logo ? (index.h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (index.h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
+        return (index.h(index.Host, { key: 'bd905e5548b3eba587403d1de9e19578caf654fe', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { key: 'e94ee28b3f46017080ebb7dfe03ffe62bfa721da', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: 'faa690ef810fbb6444d577bc2aaad0412bbd1f92' })), index.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() })));
@@ -150,7 +150,7 @@ const NavbarMenu = class {
                 container = navbarEl.container;
             }
         }
-        return (index.h(index.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 !== '' }) }, index.h("slot", null)));
+        return (index.h(index.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 !== '' }) }, index.h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -168,7 +168,7 @@ const NavbarMenuEnd = class {
     }
     render() {
         const menuEndEl = bem.BEM.block('navbar').element('menu').element('end');
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
     }
 };
 
@@ -179,7 +179,7 @@ const NavbarMenuStart = class {
     }
     render() {
         const menuStartEl = bem.BEM.block('navbar').element('menu').element('start');
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
     }
 };
 

package/dist/cjs/bal-notices_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 
 const balNoticesCss = ".bal-notices{position:fixed !important;display:-ms-flexbox !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;-ms-flex-direction:column !important;flex-direction:column !important}.bal-notices .container{width:100% !important}.bal-notices.has-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:.5em}.bal-notices.has-snackbar .bal-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto !important}.bal-notices.has-toast{-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;margin:.5em}.bal-notices.has-toast .bal-toast{-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:center;align-self:center}";
 const BalNoticesStyle0 = balNoticesCss;
@@ -13,11 +13,11 @@ const Notices = class {
         this.interface = 'toast';
     }
     render() {
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: 'f907ea5288441ecace35e9041ca37c50e249a9eb', class: {
                 'bal-app': true,
                 'bal-notices': true,
                 [`has-${this.interface}`]: true,
-            } }, index.h("slot", null)));
+            } }, index.h("slot", { key: '9f6fdf15e464f2682750f57812a4ff45e40b9612' })));
     }
 };
 Notices.style = BalNoticesStyle0;
@@ -84,7 +84,7 @@ const Snackbar = class {
         if (this.message !== undefined && this.message !== '') {
             labelAttributes.innerHTML = this.message;
         }
-        return (index.h(index.Host, { id: this.snackbarId, class: "bal-snackbar" }, index.h("div", { role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, index.h("div", { class: "bal-snackbar__header" }, index.h("span", { class: "icon-text" }, index.h("span", { class: "icon", style: { display: this.icon ? '' : 'none' } }, index.h("bal-icon", { name: this.icon, color: 'primary' })), index.h("bal-heading", { level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), index.h("span", Object.assign({ class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), index.h("slot", null), index.h("span", { class: "hidden" })), index.h("bal-close", { class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (index.h("div", { class: "bal-snackbar__footer" }, index.h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
+        return (index.h(index.Host, { key: '025208382b976a13acddf5a3adfe83335015f346', id: this.snackbarId, class: "bal-snackbar" }, index.h("div", { key: 'f8f1516176a0bc0f13782dc5293da759cd6d9a3d', role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, index.h("div", { key: '8269a2d81217b90e9765a696824135c75bb7abd5', class: "bal-snackbar__header" }, index.h("span", { key: '811abcabe5fb53f70d611d89baa4c21efd101b66', class: "icon-text" }, index.h("span", { key: 'a32da69137a594c3f759c15c17072b0bbd512c3b', class: "icon", style: { display: this.icon ? '' : 'none' } }, index.h("bal-icon", { key: '4e0c29abdceb6ca9c08116ca9e441747e31e3865', name: this.icon, color: 'primary' })), index.h("bal-heading", { key: 'b13bb1286c21cbd33d29c35f234e855da29b5202', level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), index.h("span", Object.assign({ key: '2aafbb985aea6ea5be7730ab60745226506f9db2', class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), index.h("slot", { key: 'f85d16eb9ad20733633fc4d8869e8fc9836044b2' }), index.h("span", { key: '5fb81eb312a2106f338b34823a4e3144c47e3a94', class: "hidden" })), index.h("bal-close", { key: '11f42cbed4f48a8bf029b3e6bae6ecf537fd121c', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (index.h("div", { class: "bal-snackbar__footer" }, index.h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
     }
     get element() { return index.getElement(this); }
 };
@@ -131,7 +131,7 @@ const Toast = class {
         return `bal-toast__inner--is-${this.color}`;
     }
     render() {
-        return (index.h(index.Host, { id: this.toastId, class: "bal-toast" }, index.h("div", { role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, index.h("span", { class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, index.h("slot", null)), index.h("bal-close", { class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+        return (index.h(index.Host, { key: '022b79aa15606a15256ff3a4a8ea327cd3d7badf', id: this.toastId, class: "bal-toast" }, index.h("div", { key: '13e4f7084f3d27ecec0729a229c4ced273b781d7', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, index.h("span", { key: 'ba07ca16899d4af96dbc8936e997a424b3c1b584', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, index.h("slot", { key: '059e7c7095f24eeefa2629e7fc168d1eda116a7c' })), index.h("bal-close", { key: '3efd56336ee10d4afbdf118c091ec9f306603450', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/bal-notification.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 
 const balNotificationCss = ":root{--bal-notification-font-size:var(--bal-text-size-normal);--bal-notification-font-family:var(--bal-font-family-text);--bal-notification-background:var(--bal-color-grey-2);--bal-notification-background-primary:var(--bal-color-grey-2);--bal-notification-background-info:var(--bal-color-info-2);--bal-notification-background-success:var(--bal-color-success-2);--bal-notification-background-warning:var(--bal-color-warning-2);--bal-notification-background-danger:var(--bal-color-danger-2);--bal-notification-radius:var(--bal-radius-large);--bal-notification-color:var(--bal-color-text-primary);--bal-notification-color-primary:var(--bal-color-text-primary);--bal-notification-color-info:var(--bal-color-text-primary);--bal-notification-color-success:var(--bal-color-text-primary);--bal-notification-color-warning:var(--bal-color-text-primary);--bal-notification-color-danger:var(--bal-color-text-primary)}.bal-notification{display:block;position:static}.bal-notification__inner{min-height:3.5rem;border-radius:var(--bal-notification-radius);font-size:var(--bal-notification-font-size);font-family:var(--bal-notification-font-family);background:var(--bal-notification-background);color:var(--bal-notification-color);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification__inner{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification__inner{padding:var(--bal-space-medium-desktop)}}.bal-notification__inner--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification__inner--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification__inner--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification__inner--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification__inner--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}";
 const BalNotificationStyle0 = balNotificationCss;
@@ -13,7 +13,7 @@ const Notification = class {
         this.color = '';
     }
     render() {
-        return (index.h(index.Host, { class: "bal-notification" }, index.h("div", { class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, index.h("slot", null))));
+        return (index.h(index.Host, { key: '053bf4393f0f7a11eadd2ff98f870b0d7de1452c', class: "bal-notification" }, index.h("div", { key: 'afcaa942e5970f510df5e65aa5fdbf6fd9744919', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, index.h("slot", { key: 'ee85e21689e226931c4c3dcbbbaa43741d05340a' }))));
     }
 };
 Notification.style = BalNotificationStyle0;

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

@@ -2,23 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-219b2f52.js');
+const index$1 = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const formInput = require('./form-input-b61eb894.js');
-const helpers = require('./helpers-2a8c8333.js');
+const formInput = require('./form-input-35653e8f.js');
+const helpers = require('./helpers-393c2183.js');
 const attributes = require('./attributes-9f366716.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const config_default = require('./config.default-5bdd6e3d.js');
-const config_utils = require('./config.utils-e4cd49d6.js');
+const number = require('./number-111783eb.js');
 const bem = require('./bem-81bc6a2d.js');
 const form = require('./form-2279fb2f.js');
 const log = require('./log-33398c2a.js');
 const index = require('./index-e6a233be.js');
 const keys_constant = require('./keys.constant-b53da545.js');
 const index$2 = require('./index-24d802b4.js');
+const listen = require('./listen-b42a4134.js');
+const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
+require('./config.utils-e4cd49d6.js');
 require('./_commonjsHelpers-68cdf74f.js');
 
 /**
@@ -132,32 +133,15 @@ function isNumber$1(value) {
 
 var lodash_isnan = isNaN;
 
-const getLocale = () => {
-    const config = config_utils.useBalConfig();
-    return (config && config.locale) || config_default.defaultLocale;
-};
-const getDecimalSeparator = () => {
-    return index_esm.getDecimalSeparator(getLocale());
-};
-const getThousandSeparator = () => {
-    return index_esm.getThousandSeparator(getLocale());
-};
-const formatLocaleNumber = (number, minimumFractionDigits) => {
-    return index_esm.formatLocaleNumber(getLocale(), number, minimumFractionDigits);
-};
-const getNegativeSymbol = () => {
-    return '-';
-};
-
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
-    return typeof val === 'string' && getThousandSeparator() !== '.';
+    return typeof val === 'string' && number.getThousandSeparator() !== '.';
 }
 function isNumber(value) {
     const num = parseFloat(value);
     return typeof num === 'number' && !lodash_isnan(num);
 }
 function isNotNumber(value) {
-    return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
+    return !isNumber(value) && value !== '' && value !== number.getNegativeSymbol() && value !== number.getDecimalSeparator();
 }
 function toNumber(value, decimalPoints = 0) {
     let val = value;
@@ -165,13 +149,13 @@ function toNumber(value, decimalPoints = 0) {
         val === undefined ||
         val === null ||
         lodash_isnan(val) ||
-        val === getNegativeSymbol() ||
-        val === getDecimalSeparator() ||
+        val === number.getNegativeSymbol() ||
+        val === number.getDecimalSeparator() ||
         !isNumber(val)) {
         return undefined;
     }
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
-        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
+        val = val.split(number.getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
     return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
@@ -181,29 +165,29 @@ function toFixedNumber(value, decimalPoints = 0) {
         return '';
     }
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
-        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
+        val = val.split(number.getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
-    if (val.charAt(0) === getDecimalSeparator()) {
+    if (val.charAt(0) === number.getDecimalSeparator()) {
         val = `0${val}`;
     }
-    const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
+    const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(number.getDecimalSeparator(), '.'));
     return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
-    return value.replace('.', getDecimalSeparator());
+    return value.replace('.', number.getDecimalSeparator());
 }
 function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     if (index.lodash_isnil(value)) {
         return '';
     }
-    if (value.charAt(0) === getDecimalSeparator()) {
+    if (value.charAt(0) === number.getDecimalSeparator()) {
         value = `0${value}`;
     }
     const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
     const formattedSuffix = suffix !== '' ? ` ${suffix.trim()}` : '';
-    return lodash_isnan(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
+    return lodash_isnan(num) ? '' : number.formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
-const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
+const countDecimalSeparators = (value) => (value.split(number.getDecimalSeparator()) || []).length - 1 || 0;
 function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
     //
     // allow select all, copy and paste
@@ -212,12 +196,12 @@ function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd,
     }
     //
     // only allow negative symbols at the start of the input
-    if (key === getNegativeSymbol() && selectionStart && selectionStart > 0 && selectionEnd && selectionEnd > 0) {
+    if (key === number.getNegativeSymbol() && selectionStart && selectionStart > 0 && selectionEnd && selectionEnd > 0) {
         return false;
     }
     //
     // only allow decimal separator
-    if (key === getDecimalSeparator()) {
+    if (key === number.getDecimalSeparator()) {
         if (decimal === 0) {
             return false;
         }
@@ -227,13 +211,13 @@ function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd,
     }
     //
     // check if it is an allowed key
-    if (![...keys_constant.NUMBER_KEYS, ...keys_constant.ACTION_KEYS, getDecimalSeparator(), getNegativeSymbol()].includes(key)) {
+    if (![...keys_constant.NUMBER_KEYS, ...keys_constant.ACTION_KEYS, number.getDecimalSeparator(), number.getNegativeSymbol()].includes(key)) {
         return false;
     }
     //
     // check if decimal points are reached
-    if (decimal !== 0 && newValue.includes(getDecimalSeparator()) && [...keys_constant.NUMBER_KEYS].includes(key)) {
-        const newValueParts = newValue.split(getDecimalSeparator());
+    if (decimal !== 0 && newValue.includes(number.getDecimalSeparator()) && [...keys_constant.NUMBER_KEYS].includes(key)) {
+        const newValueParts = newValue.split(number.getDecimalSeparator());
         const decimalPart = newValueParts[newValueParts.length - 1];
         if (decimalPart.length > decimal) {
             return false;
@@ -451,8 +435,8 @@ const NumberInput = class {
         if (suffix !== '') {
             suffix = ` ${suffix}`;
         }
-        const thousandSeparator = getThousandSeparator();
-        let decimalSeparator = getDecimalSeparator();
+        const thousandSeparator = number.getThousandSeparator();
+        let decimalSeparator = number.getDecimalSeparator();
         if (decimalSeparator === ',') {
             decimalSeparator = '\\,';
         }
@@ -470,7 +454,7 @@ const NumberInput = class {
      */
     render() {
         const block = bem.BEM.block('number-input');
-        return (index$1.h(index$1.Host, { onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ class: {
+        return (index$1.h(index$1.Host, { key: '25a122a19c18a933d55991cb22b29f6e2a96eb02', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ key: 'd9ef6e1d970f4ada012b65d2518fd793b44024c3', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -488,6 +472,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], NumberInput.prototype, "listenOnClick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], NumberInput.prototype, "resetHandler", null);
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),
     tslib_es6.__metadata("design:type", Function),

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

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 const aria = require('./aria-c8955a5c.js');
-const formInput = require('./form-input-b61eb894.js');
-const elementStates_decorator = require('./element-states.decorator-9ce5ff3b.js');
+const formInput = require('./form-input-35653e8f.js');
+const elementStates_decorator = require('./element-states.decorator-5aa9bf46.js');
+const listen = require('./listen-b42a4134.js');
 const index$1 = require('./index-e6a233be.js');
 const attributes = require('./attributes-9f366716.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const utils = require('./utils-9ea175af.js');
 const form = require('./form-2279fb2f.js');
 require('./browser-1d542d0f.js');
@@ -115,7 +116,7 @@ const Option = class {
      */
     render() {
         const block = bem.BEM.block('option');
-        return (index.h(index.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": aria.ariaBooleanToString(this.hidden), "aria-selected": aria.ariaBooleanToString(this.selected), "aria-checked": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": aria.ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, index.h("bal-stack", { py: "small", space: "x-small" }, this.checkbox ? (index.h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), index.h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, index.h("slot", null)), this.selected && !this.checkbox ? (index.h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (index.h(index.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": aria.ariaBooleanToString(this.hidden), "aria-selected": aria.ariaBooleanToString(this.selected), "aria-checked": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": aria.ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, index.h("bal-stack", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', py: "small", space: "x-small" }, this.checkbox ? (index.h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), index.h("div", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, index.h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (index.h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return index.getElement(this); }
 };
@@ -125,6 +126,12 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('mouseenter'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", []),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Option.prototype, "listenToMouseEnter", null);
 tslib_es6.__decorate([
     elementStates_decorator.ListenToElementStates(),
     tslib_es6.__metadata("design:type", Function),
@@ -545,7 +552,7 @@ const OptionList = class {
     render() {
         const block = bem.BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (index.h(index.Host, { class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", null))));
+        return (index.h(index.Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -558,6 +565,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balOptionFocus', { passive: true }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToMouseEnter", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balOptionChange', { passive: false }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;
 OptionList.style = BalOptionListStyle0;