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

package/components/bal-input-date2.js

@@ -6,6 +6,7 @@ import { i as inheritAttributes } from './attributes.js';
 import { q as hasParent } from './helpers.js';
 import { h as hasValueChanged, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 import { N as NUMBER_KEYS } from './keys.constant.js';
 import { I as INVALID_VALUE } from './mask-util.js';
 import { d as dateSeparator, B as BalDate } from './date.js';
@@ -988,14 +989,14 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { key: '1b50cf8c7d81fed2d41f663f30ea24730e8bebba', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '0e81d5639952a0f760be519c182185936cfe6540', class: {
+        return (h(Host, { key: 'c19d0b61364480bbcb5067bf0c5d68b83dab6fa7', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'e8cbf0a3372a06823953459eeb754f2c22fc0b22', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: '76048a408c624d4ce5924bd924c846bed55a771e', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'b6acc3e893caf68b4823addac74e4cea27fdc98b', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1025,7 +1026,7 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "reset", "resetHandler"], [6, "click", "listenOnClick"]], {
+    }, undefined, {
         "value": ["valueChanged"]
     }]);
 __decorate([
@@ -1040,6 +1041,18 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], InputDate.prototype, "configChanged", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "listenOnClick", null);
 let inputDateIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-input-slider.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as lodash_isnil } from './index3.js';
 import { n as debounceEvent } from './helpers.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 
 const balInputSliderCss = ".bal-input-slider{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text);-ms-flex-direction:column;flex-direction:column;min-height:3rem}.bal-input-slider__background{position:absolute;top:1rem;left:0px;right:0px;z-index:0;border-radius:var(--bal-radius-rounded);background:var(--bal-color-green);height:1rem;width:100%;overflow:hidden}.bal-input-slider__background__upper,.bal-input-slider__background__lower{position:absolute;top:0;width:50%;margin:0;cursor:pointer}.bal-input-slider__background__upper>div,.bal-input-slider__background__lower>div{height:1rem;border-radius:0}.bal-input-slider__background__upper{right:0px}.bal-input-slider__background__upper>div{background:var(--bal-color-green);border-top-right-radius:var(--bal-radius-rounded);border-bottom-right-radius:var(--bal-radius-rounded)}.bal-input-slider__background__lower{left:0px}.bal-input-slider__background__lower>div{background:var(--bal-color-green-5);border-top-left-radius:var(--bal-radius-rounded);border-bottom-left-radius:var(--bal-radius-rounded)}.bal-input-slider__background--disabled{cursor:default;pointer-events:none;background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__upper__inner{background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__lower__inner{background:var(--bal-color-grey-4)}.bal-input-slider__input{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:3rem}.bal-input-slider__input__native{-webkit-appearance:none;margin:0;background:rgba(0,0,0,0);z-index:1;outline:none;min-width:12.5rem;width:100%}.bal-input-slider__input__native::-webkit-slider-runnable-track{width:100%;cursor:pointer;border:none}.bal-input-slider__input__native::-webkit-slider-thumb{-webkit-box-shadow:none;box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none}.bal-input-slider__input__native:focus-visible{outline:none}.bal-input-slider__input__native:focus-visible::-webkit-slider-thumb{background:var(--bal-color-primary);border:2px solid var(--bal-color-primary)}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-moz-range-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:.625rem;width:.625rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer}.bal-input-slider__input__native::-ms-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-ms-fill-lower{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none;z-index:2}.bal-input-slider__input__native:focus::-ms-fill-lower{background:rgba(0,0,0,0)}.bal-input-slider__input__native:focus::-ms-fill-upper{background:rgba(0,0,0,0)}.bal-input-slider__input__native--disabled::-webkit-slider-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-ms-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-moz-range-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__steps{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:.5rem;margin:-0.625rem .5rem;-ms-flex-pack:justify;justify-content:space-between}.bal-input-slider__steps__item{width:.125rem;border-radius:var(--bal-radius-rounded);background-color:var(--bal-color-primary)}.bal-input-slider__steps__item--disabled{background:var(--bal-color-grey-4)}@-moz-document url-prefix(){.bal-input-slider__steps{margin:0 .5rem !important}}";
 const BalInputSliderStyle0 = balInputSliderCss;
@@ -156,11 +158,11 @@ const InputSlider = /*@__PURE__*/ proxyCustomElement(class InputSlider extends H
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { key: '1be544b6880ed695149a449094ba048160227f4f', 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: '7c410c03aa9619192b09070f454e14074536fe6d', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '484b46bc3be5ef3fec1aed742448e1bbf1b45a99', 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", { key: 'dbec8b1b193b0483477556f279d83f70b9762903', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '5c945858200ebd7d1bd21ab938326deede5ad5a2', 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", { key: '76c8afe4b0592fab4ae8442756244b913eaaf450', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: '1637419e70a53b4b17c7ca7eaa494cb6271220a5', class: Object.assign({}, inputEl.class()) }, h("div", { key: '25095f62531acf43feeee439a2c1d23925d8e92c', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '6775a39d2473f1dc6569c04c26cb044b8ef64477', 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: '5f158e2c228b50b94448ff2f786697107dc892b1', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '969c8a93a96b0c36d9f12a4b59e31c484c695617', 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 this; }
     static get watchers() { return {
@@ -186,10 +188,22 @@ const InputSlider = /*@__PURE__*/ proxyCustomElement(class InputSlider extends H
         "setFocus": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"],
         "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;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-input-stepper.js

@@ -9,6 +9,7 @@ import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
 import { L as Logger } from './log.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-spinner2.js';
@@ -1192,15 +1193,15 @@ const InputStepper = /*@__PURE__*/ proxyCustomElement(class InputStepper extends
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { key: '5589706c5ef9b82dd6f1c35ab1fbd5b302697de3', "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '595178efdf14780946fce626848da95a859c9c44', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '8964a4963cbdbcf9881e40a232827804996772aa', 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", { key: '33a6ba03438ea1357f5f7f8187d37ffa0aaa4bf6', 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: 'fa6174baa6f07c8781ef7e1638b76184e42c242b', 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({ key: 'a35292444a15736d3e5239de075ef9806256972b', 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 this; }
     static get watchers() { return {
@@ -1225,7 +1226,7 @@ const InputStepper = /*@__PURE__*/ proxyCustomElement(class InputStepper extends
         "configChanged": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"]
     }]);
 __decorate([
@@ -1234,6 +1235,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/components/bal-input.js

@@ -8,6 +8,7 @@ import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './k
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 
 /**
  *
@@ -440,7 +441,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: '40f9efbb2c76d2ea28e68c0b27e974a2b1a49f38', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '25cebd576de7eb2f5edaa306342dfc813bc233fb', 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,
@@ -492,7 +493,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"]
     }]);
 __decorate([
@@ -501,6 +502,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;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-modal.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { p as prepareOverlay, d as dismiss, e as eventMethod } from './overlays.js';
 import { c as componentOnReady, f as deepReady, h as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
+import { L as ListenTo } from './listen.js';
 
 const attachComponent = async (delegate, container, component, cssClasses, componentProps) => {
     if (delegate) {
@@ -237,17 +239,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         return false;
     }
     render() {
-        return (h(Host, { key: 'ab660706a80598061e75d8e6ba9ad19cd150e6c6', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '798fe5316195806b60cadaf15fd2455268f62919', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: '30b992e31c43265c75e6d29d85aa49cdd892c793', class: {
+            } }, h("div", { key: 'b57401f0e8383d1c1455602523ad771383a29324', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '035146f0ef98690571b0de0a458bfa119763e587', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '47e3429c0148724a7c102bd3f4718b4476b90c27', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0198a08e73e1f878a7aa4b766fa585c3e249d930', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '5aef1c76fd9d0a62b53e1665b2a341ecac7db74a', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '44e47136560cfe7f426f2407cd2cf6c923af2e08' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '62773246852b6a4be88dab20d93bf0a8169e1f13' })))));
     }
     get el() { return this; }
     static get style() { return BalModalStyle0; }
@@ -271,7 +273,31 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         "dismiss": [64],
         "onDidDismiss": [64],
         "onWillDismiss": [64]
-    }, [[0, "click", "onClickCloseButton"], [1, "mousedown", "onMouseDown"], [1, "mouseup", "onMouseUp"], [16, "keyup", "handleKeyUp"]]]);
+    }]);
+__decorate([
+    ListenTo('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onClickCloseButton", null);
+__decorate([
+    ListenTo('mousedown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onMouseDown", null);
+__decorate([
+    ListenTo('mouseup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "onMouseUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "handleKeyUp", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-nav-meta-bar2.js

@@ -3,6 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
+import { L as ListenTo } from './listen.js';
 
 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;
@@ -63,7 +64,7 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'a3c7f085f3811353baca0bd93604167c3ad527d2', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'c88186ebabcaa43c0493c7c5c295c5450c2a2c74', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'f1fcc2b1967db28ea405d9a5499ca47d8bc6cecd' }))));
+        return (h(Host, { key: 'c78fff46b1798a4d4d2a26152b1005694c2a3534', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'a0ba3a8f0942a67fc2d1d6e795b288f9dd12d621', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7428dc9ba14777bf263aa62c5a91634efdbc70d5' }))));
     }
     get el() { return this; }
     static get style() { return BalNavMetaBarStyle0; }
@@ -73,13 +74,19 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
         "invisible": [1],
         "position": [1],
         "isHidden": [32]
-    }, [[9, "scroll", "handleScroll"]]]);
+    }]);
 __decorate([
     Logger('bal-meta-bar'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
+__decorate([
+    ListenTo('scroll', { target: 'window', passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "handleScroll", null);
 let NavMetaBarIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-nav.js

@@ -5,6 +5,7 @@ import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$z } from './bal-badge2.js';
 import { d as defineCustomElement$y } from './bal-button2.js';
 import { d as defineCustomElement$x } from './bal-card2.js';
@@ -656,7 +657,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: 'f4468c4973667b52c77b05cee9b3ef521c9b3a58', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '4b66d4ea07b31adb49738316ced208b1bb02c1be', class: {
+        return (h(Host, { key: '9850048bcb764e760f50c6f54f39a094e8113da4', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'c6b2985da610cdbaee3f8cdd9be9f7e5d3f9c026', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -666,7 +667,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '13c3f4f937d282ecff01ec40e10102fed0c3ab62' }, h("slot", { key: 'cad51666687cd1c41734c136f5db77bf1308d1a3' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '9e8d533088aea08856b7b6a03a7fec62fdab2698' }, h("slot", { key: 'daba1f88b1d7d20049682646c7cdd5cfe289d9f9' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -717,7 +718,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         "linkItems": [32],
         "metaButtons": [32],
         "configChanged": [64]
-    }, [[0, "balChange", "listenToPopupChanges"], [5, "click", "clickOnOutside"]], {
+    }, undefined, {
         "options": ["optionChanged"],
         "buttons": ["buttonChanged"]
     }]);
@@ -727,6 +728,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Nav.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balChange'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Nav.prototype, "listenToPopupChanges", null);
+__decorate([
+    ListenTo('click', { target: 'document', passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Nav.prototype, "clickOnOutside", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),

package/components/bal-number-input.js

@@ -10,6 +10,7 @@ import { L as Logger } from './log.js';
 import { l as lodash_isnil } from './index3.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
 import { i as isEmpty } from './index2.js';
+import { L as ListenTo } from './listen.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
@@ -446,7 +447,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '61753da95b80c0d89c838f8311d3d6ce59d707a7', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'c37e297b240a59a36178e9e3e9022188dfef2928', class: {
+        return (h(Host, { key: '25a122a19c18a933d55991cb22b29f6e2a96eb02', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'd9ef6e1d970f4ada012b65d2518fd793b44024c3', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -485,7 +486,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }]);
@@ -495,6 +496,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], NumberInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], NumberInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/components/bal-option-list.js

@@ -7,6 +7,7 @@ import { b as waitAfterFramePaint, m as raf } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as startsWith, i as includes } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 
 const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
 const BalOptionListStyle0 = balOptionListCss;
@@ -420,7 +421,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '5673983f31418c635630da12d6bb353d099b30fb', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '9e161788ffe56009d4992f5bc1c90c8859ef7c2f', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '27f7d54a84ed20d63eb388fdcac01bad65f79d57' }))));
+        return (h(Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -454,7 +455,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
         "getOptions": [64],
         "selectByFocus": [64],
         "setAriaForm": [64]
-    }, [[1, "balOptionFocus", "listenToMouseEnter"], [0, "balOptionChange", "listenToOptionChange"]], {
+    }, undefined, {
         "contentHeight": ["contentHeightChanged"]
     }]);
 __decorate([
@@ -463,6 +464,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balOptionFocus', { passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToMouseEnter", null);
+__decorate([
+    ListenTo('balOptionChange', { passive: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-option2.js

@@ -5,6 +5,7 @@ import { L as Logger } from './log.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-checkbox2.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-stack2.js';
@@ -106,7 +107,7 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'aed8058d7b0526a84dde426b242ded48836fde15', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'e475f8289d2d11ec790e5b808a3b5a67405ee6db', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '9dbc67bbd197f2d30ecc38eba4c1ccf93bb98a7d', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '3e1392bbd15175bc15f43d0e4d90e65abfa0f5ec' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'b69ef765d0cfd4e4e29743026b68c5c6c64f685c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return this; }
     static get style() { return BalOptionStyle0; }
@@ -122,13 +123,19 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         "checkbox": [32],
         "interactionState": [32],
         "select": [64]
-    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
+    }]);
 __decorate([
     Logger('bal-option'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
+__decorate([
+    ListenTo('mouseenter'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "listenToMouseEnter", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),