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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 
@@ -142,7 +142,7 @@ const Heading = class {
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", null))));
+        return (h(Host, { key: '8086cde36ed3f4ca517135aad6210dccc9e59039', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '7ed342b861b33bdcb93daec513e593c531e891b5', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'b189e37f7d994616493e86512f6748c85d00ba18' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -207,10 +207,10 @@ const Text = class {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", null))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
     }
 };
 Text.style = BalTextStyle0;

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

@@ -1,20 +1,21 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { p as preventDefault } from './utils-9fbab1d3.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { b as balBreakpoints } from './breakpoints.subject-d2b4fd79.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f08ad280.js';
+import { b as balBreakpoints } from './breakpoints.subject-781dc67c.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba46b8c8.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { L as Logger } from './log-dfd1c19f.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './index-82aff103.js';
-import './helpers-c201154e.js';
+import './helpers-72ae7307.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-cada8a2a.js';
+import './tokens.esm-88409a35.js';
 
 const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
@@ -161,7 +162,7 @@ const HintText = class {
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { class: Object.assign({}, elText.class()) }, h("p", { class: Object.assign({}, elTextField.class()) }, h("slot", null))));
+        return (h(Host, { key: '10515eb783c2a6feba7f88cc419e7cfa57295231', class: Object.assign({}, elText.class()) }, h("p", { key: '5a2c68d72075d729f72527e2bf6a7afcfa18c29e', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '8da0f8ccdb88e88206c2b87ccae42d2636fc5586' }))));
     }
 };
 
@@ -174,7 +175,7 @@ const HintTitle = class {
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { class: Object.assign({}, elTitle.class()) }, h("h3", { class: Object.assign({}, elHeading.class()) }, h("span", null, h("slot", null)))));
+        return (h(Host, { key: '8f29a6b15159586bb953a76e446574facc9e258a', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '9edc67f39610f47e3adad25fb931809cef09b908', class: Object.assign({}, elHeading.class()) }, h("span", { key: '30b258cb3ec7ffe8463c7fe5364ab61093611015' }, h("slot", { key: '9b8eb3d881e5393c757362c0e66be4debd4031b4' })))));
     }
 };
 
@@ -2064,12 +2065,12 @@ const Popover = class {
             clearTimeout(this.componentDidRenderTimer);
             this.componentDidRenderTimer = setTimeout(() => {
                 var _a;
-                const triggerWidth = (_a = this.element) === null || _a === void 0 ? void 0 : _a.clientWidth;
+                const triggerWidth = (_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth;
                 if (triggerWidth) {
-                    this.element.style.maxWidth = `${triggerWidth}px`;
+                    this.el.style.maxWidth = `${triggerWidth}px`;
                 }
                 else {
-                    this.element.style.maxWidth = `initial`;
+                    this.el.style.maxWidth = `initial`;
                 }
             });
         }
@@ -2087,7 +2088,7 @@ const Popover = class {
     async clickOnOutside(ev) {
         var _a;
         if (this.active) {
-            if (!this.element.contains(ev.target)) {
+            if (!this.el.contains(ev.target)) {
                 this.active = false;
             }
             if ((_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.isEqualNode(ev.target)) {
@@ -2102,7 +2103,7 @@ const Popover = class {
         }
     }
     async tabOutside(ev) {
-        if (ev.key === 'Tab' && !this.element.contains(document.activeElement) && this.active) {
+        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.active) {
             await this.toggle();
         }
     }
@@ -2167,7 +2168,7 @@ const Popover = class {
      * ------------------------------------------------------
      */
     get footMobileNav() {
-        return this.element.closest('[slot="meta-mobile-foot"]');
+        return this.el.closest('[slot="meta-mobile-foot"]');
     }
     get modifierOffset() {
         return {
@@ -2187,13 +2188,13 @@ const Popover = class {
         };
     }
     get triggerElement() {
-        return this.element.querySelector('[bal-popover-trigger]');
+        return this.el.querySelector('[bal-popover-trigger]');
     }
     get menuElement() {
-        return this.element.querySelector('bal-popover-content');
+        return this.el.querySelector('bal-popover-content');
     }
     get menuInnerElement() {
-        return this.element.querySelector('.bal-popover__content__inner');
+        return this.el.querySelector('.bal-popover__content__inner');
     }
     getBackdropHeight() {
         if (balBrowser.hasWindow) {
@@ -2214,13 +2215,13 @@ const Popover = class {
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { ref: el => {
+        return (h(Host, { key: '997e5fefb0e6fe103b1732f084f8a7963eb319e5', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: 'd5cb75c1951b9fe7cfd22ef86ee677461eecf5fc', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", null)));
+            } })), h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
     }
-    get element() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "active": ["activeChanged"]
     }; }
@@ -2231,6 +2232,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handlePopoverPrepare", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "clickOnOutside", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handleKeyUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "tabOutside", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),
@@ -2291,7 +2316,7 @@ const PopoverContent = class {
     }
     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 })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
+import { l as rLCP } from './helpers-72ae7307.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './log-dfd1c19f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './log-dfd1c19f.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -941,6 +942,7 @@ const Icon = class {
             return this.svg || '';
         };
         this.icons = defaultConfig.icons;
+        this.isLargestContentfulPaintDone = false;
         this.name = '';
         this.svg = '';
         this.size = '';
@@ -954,6 +956,15 @@ const Icon = class {
         this.hovered = false;
         this.pressed = false;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -1017,7 +1028,7 @@ const Icon = class {
         const color = this.parseColor();
         const block = BEM.block('icon');
         const svgContent = this.svgContent(this.name);
-        return (h(Host, { "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
+        return (h(Host, { key: '6aa25caeb32d3b55b35b7bc563823b6bcaa477f0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, this.isLargestContentfulPaintDone ? (h("div", { class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })) : ('')));
     }
 };
 __decorate([

package/dist/esm/bal-input-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balInputGroupCss = ".bal-input-group{-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;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;border:var(--bal-border-width-normal) solid var(--bal-color-border);border-radius:var(--bal-radius-normal);background:var(--bal-color-white)}.bal-input-group .input{min-height:2.75rem;height:2.75rem;border:none;border-radius:0;background:none !important;padding-left:0;padding-right:0;padding-bottom:calc(.5em - .313rem);padding-top:calc(.5em - .313rem)}.bal-input-group .bal-select__control{border:none;min-height:2.75rem}.bal-input-group .bal-select__control__input{padding-left:0 !important;padding-right:0 !important}.bal-input-group .bal-icon{min-width:3rem}.bal-input-group .bal-tag .bal-icon{min-width:unset}.bal-input-group>*:first-child.bal-select .bal-select__control{padding-left:.625rem}.bal-input-group>*:first-child.bal-input .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input .input{padding-right:.625rem}.bal-input-group>*:first-child.bal-input-date .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input-date .input{padding-right:.625rem}.bal-input-group>*:first-child.input{padding-left:.625rem}.bal-input-group>*:last-child.input{padding-right:.625rem}.bal-input-group>*:last-child.bal-tag{margin-right:.625rem}.bal-input-group>*:first-child.bal-tag{margin-left:.625rem}.bal-input-group.is-hovered,.bal-input-group.is-hovered .input,.bal-input-group.is-hovered .bal-select__control,.bal-input-group:hover,.bal-input-group:hover .input,.bal-input-group:hover .bal-select__control{background:var(--bal-color-grey-1)}.bal-input-group--is-danger,.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group--is-danger svg g,.bal-input-group--is-danger svg path,.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-danger,.bal-input-group.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group.bal-input-group--is-danger svg,.bal-input-group.bal-input-group--is-danger svg g,.bal-input-group.bal-input-group--is-danger svg path,.bal-input-group.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-success,.bal-input-group.bal-input-group--is-success .input{border-color:var(--bal-color-border-success);background:var(--bal-color-success-1)}.bal-input-group.bal-input-group--is-success svg,.bal-input-group.bal-input-group--is-success svg g,.bal-input-group.bal-input-group--is-success svg path,.bal-input-group.bal-input-group--is-success svg circle{fill:var(--bal-color-border-success)}.bal-input-group.bal-input-group--is-warning,.bal-input-group.bal-input-group--is-warning .input{border-color:var(--bal-color-border-warning);background:var(--bal-color-warning-1)}.bal-input-group.bal-input-group--is-warning svg,.bal-input-group.bal-input-group--is-warning svg g,.bal-input-group.bal-input-group--is-warning svg path,.bal-input-group.bal-input-group--is-warning svg circle{fill:var(--bal-color-border-warning)}.bal-input-group.bal-input-group--is-disabled,.bal-input-group.bal-input-group--is-disabled .input{border-color:var(--bal-color-border-grey-dark);background:var(--bal-color-grey-2)}.bal-input-group.bal-input-group--is-disabled svg,.bal-input-group.bal-input-group--is-disabled svg g,.bal-input-group.bal-input-group--is-disabled svg path,.bal-input-group.bal-input-group--is-disabled svg circle{fill:var(--bal-color-border-grey-dark)}.bal-input-group--is-disabled,.bal-input-group--is-disabled .input{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-color-text-grey-dark)}.bal-input-group--is-disabled ::-webkit-input-placeholder,.bal-input-group--is-disabled .input ::-webkit-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-moz-placeholder,.bal-input-group--is-disabled .input ::-moz-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled :-ms-input-placeholder,.bal-input-group--is-disabled .input :-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-ms-input-placeholder,.bal-input-group--is-disabled .input ::-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::placeholder,.bal-input-group--is-disabled .input ::placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled .tag{background-color:var(--bal-color-grey-5)}.bal-input-group--is-disabled .tag span{color:var(--bal-color-text-white)}.bal-input-group--is-disabled .tag .delete{display:none}.bal-input-group:not(.bal-input-group--is-disabled):focus-within{border-color:var(--bal-color-primary)}";
@@ -17,7 +17,7 @@ const InputGroup = class {
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", null)));
+        return (h(Host, { key: 'b5038db22ec5c61a3f23e8d49e7e010c1095caf7', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: '190951b467b003b066c34894295a5ef15304353b' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-input-slider.entry.js

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -158,11 +160,11 @@ const InputSlider = class {
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (h(Host, { key: 'cbbd2a0e62cc67016f215b13d8d0ca0c5de127b7', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { key: '7b31c11bf1d3423be6b2d7837a0f8ccaafe46daa', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '6a4440695d82c35bf8c8195dc79e5c8c14c91f16', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, h("div", { class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, h("div", { key: '5be6c525ff34e993b27424e5dcfe4d5bc4609ba7', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '3eb1fae3c122c23db8bc05c8f246c23984a8dbfc', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { key: '53ae6ada3c544a543180a21721b6271c36db5c47', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: 'f309f58ec23b5bc31799fcf0e3f5ef6c4cc25039', class: Object.assign({}, inputEl.class()) }, h("div", { key: 'c8d0fc9abf6a2384a44af08e581e3ca4f1115f60', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '67a8fb701b5a6c9122abe42331384a99bd5e636f', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: '8c93968c955d1bdb970e31308240db6e5f3a6795', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: 'f89ab4d7d6b67d976856bbabfb018d474f0bf306', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -170,6 +172,18 @@ const InputSlider = class {
         "value": ["valueChanged"]
     }; }
 };
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputSlider.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputSlider.prototype, "resetHandler", null);
 let inputSliderIds = 0;
 InputSlider.style = BalInputSliderStyle0;
 

package/dist/esm/bal-input-stepper.entry.js

@@ -1,20 +1,20 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
-import { v as formatLocaleNumber } from './index.esm-cc299511.js';
-import { k as rIC, m as debounceEvent } from './helpers-c201154e.js';
+import { f as formatLocaleNumber } from './number-54693efa.js';
+import { m as rIC, o as debounceEvent } from './helpers-72ae7307.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { s as stopEventBubbling, b as inputListenOnClick } from './form-input-a8fdaaef.js';
+import { s as stopEventBubbling, h as inputListenOnClick } from './form-input-264ad739.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n-aaa4a009.js';
 import { L as Logger } from './log-dfd1c19f.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './index-82aff103.js';
+import './config.utils-6ac6c9bd.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
-import './config.utils-6ac6c9bd.js';
 
 var big = {exports: {}};
 
@@ -1191,15 +1191,15 @@ const InputStepper = class {
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, elInner.class()) }, h("bal-button", { aria: {
+        return (h(Host, { key: '3c4501c097383b348798014ca2c6ebee2517d49a', "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: 'b241b171bc4e1c0b9c7e4d287f00892f4cfe6435', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '214a9e4c9659e2a44c015ad532bcb56fe498f229', aria: {
                 title: decreaseLabel,
                 label: decreaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(`${this.language}-${this.region}`, this.value)), h("bal-button", { aria: {
+            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: 'ac23ae81d6bc44eb628e7767ea7014a3f96a1919', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: '6a2a9a3899a073564b1d09f0565967e75802a942', aria: {
                 title: increaseLabel,
                 label: increaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
+            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: '3e788f6e10b325e0e60871c9920a513074b51dc3', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1212,6 +1212,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], InputStepper.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputStepper.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputStepper.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
+import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, s as stopEventBubbling, f as inputHandleClick, i as inputHandleHostClick, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -442,7 +443,7 @@ const Input = class {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        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: '06b94d64ecb7003f68c3402a530476419acb6298', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'ae1f579c3c8bded3c7b9c9a7eeea0e3989f17bb5', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -464,6 +465,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Input.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Input.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Input.prototype, "resetHandler", null);
 let InputIds = 0;
 Input.style = BalInputStyle0;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -75,7 +75,7 @@ const Label = class {
         const xxxLarge = this.size === 'xxx-large';
         const id = this.ariaForm.labelId || this.htmlId;
         const htmlFor = this.htmlFor || this.ariaForm.controlId;
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("label", { id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", null), suffix)));
+        return (h(Host, { key: '7b750612f100ba622f274fa95b2650063a1b0a79', class: Object.assign({}, block.class()) }, h("label", { key: '1b03141866999fd2a23bf1edd240812244d606a7', id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", { key: '0766c92930787bc12145bc247a693082af2f1c6e' }), suffix)));
     }
     get el() { return getElement(this); }
 };