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

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

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-5dbdcff9.js');
 const date = require('./date-c2a815e4.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
@@ -12,6 +11,8 @@ const attributes = require('./attributes-9f366716.js');
 const formInput = require('./form-input-35653e8f.js');
 const helpers = require('./helpers-393c2183.js');
 const form = require('./form-2279fb2f.js');
+const floatingUi = require('./floating-ui-9f03e1cf.js');
+const listen = require('./listen-b42a4134.js');
 const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
 const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
@@ -246,10 +247,11 @@ const Date = class {
      */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
+            const lib = await floatingUi.balFloatingUi.load();
             this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
-            this.popupCleanup = floatingUi_dom_esm.autoUpdate(this.referenceEl, this.floatingEl, () => {
+            this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
                 this.updatePosition(this.referenceEl, this.floatingEl);
             });
         }
@@ -266,11 +268,14 @@ const Date = class {
         }
         return this.isExpanded;
     }
-    updatePosition(referenceEl, floatingEl) {
-        floatingUi_dom_esm.computePosition(referenceEl, floatingEl, {
+    async updatePosition(referenceEl, floatingEl) {
+        const lib = await floatingUi.balFloatingUi.load();
+        lib
+            .computePosition(referenceEl, floatingEl, {
             placement: 'bottom-start',
-            middleware: [floatingUi_dom_esm.offset(4), floatingUi_dom_esm.flip({ crossAxis: false })],
-        }).then(({ x, y }) => {
+            middleware: [lib.offset(4), lib.flip({ crossAxis: false })],
+        })
+            .then(({ x, y }) => {
             Object.assign(floatingEl.style, {
                 left: `${x}px`,
                 top: `${y}px`,
@@ -286,7 +291,7 @@ const Date = class {
         const block = bem.BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (index.h(index.Host, { key: '0a035309be8e68bcbb7e70723183d212f8eac7f1', id: this.inputId, class: Object.assign({}, block.class()) }, index.h("bal-input-group", { key: '37430d77af90cc5e82014ea43ea77333df8524a9', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, index.h("bal-input-date", Object.assign({ key: '32e7f8ae9e6bf16ce8f12506c3c07371ff63fe0f', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (index.h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": date.i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), index.h("div", { key: '16717f90a3df588e7fe6fbc45e44c2ce9e377240', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, index.h("bal-date-calendar", { key: '54ba9d9d46dc491a3ea069f1d8b2c9899362b693', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (index.h(index.Host, { key: '0e4243022c01b88366ad8f8b750da6de3b9ecfc3', id: this.inputId, class: Object.assign({}, block.class()) }, index.h("bal-input-group", { key: '86132e01d44f18bbd89efa002117b20bbf754837', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, index.h("bal-input-date", Object.assign({ key: '07737ec9049d123c3966bc00e6ccb918cca23236', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (index.h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": date.i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), index.h("div", { key: 'c2102abdd6b594154520b4df8cb8419c81dfd6f1', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, index.h("bal-date-calendar", { key: 'be87d5e2a31943b1661aea0d6012db8dcd7002b2', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -300,6 +305,30 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Date.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keydown', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Date.prototype, "listenToKeydown", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keyup', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Date.prototype, "listenOnKeyup", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Date.prototype, "listenOnclick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balPopoverPrepare', { target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Date.prototype, "listenOnPopoverPrepare", null);
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),
     tslib_es6.__metadata("design:type", Function),

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
@@ -10,15 +10,15 @@ const formInput = require('./form-input-35653e8f.js');
 const attributes = require('./attributes-9f366716.js');
 const form = require('./form-2279fb2f.js');
 const helpers = require('./helpers-393c2183.js');
+const browser = require('./browser-1d542d0f.js');
 const array = require('./array-ae164ca3.js');
 const index$1 = require('./index-e6a233be.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-5dbdcff9.js');
+const floatingUi = require('./floating-ui-9f03e1cf.js');
 const option = require('./option-4034ca7d.js');
 const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
 const aria = require('./aria-c8955a5c.js');
 const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
-require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./index-3b7f8988.js');
@@ -242,11 +242,13 @@ const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPr
 
 class DropdownPopupUtil {
     constructor() {
-        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
-            floatingUi_dom_esm.computePosition(referenceEl, floatingEl, {
+        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
+            lib
+                .computePosition(referenceEl, floatingEl, {
                 placement: 'bottom-start',
-                middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()],
-            }).then(({ x, y }) => {
+                middleware: [lib.flip(), lib.shift()],
+            })
+                .then(({ x, y }) => {
                 Object.assign(floatingEl.style, {
                     left: `${x}px`,
                     top: `${y}px`,
@@ -270,7 +272,8 @@ class DropdownPopupUtil {
     async expandList() {
         var _a;
         if (this.component.panelEl) {
-            this.component.panelCleanup = floatingUi_dom_esm.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+            const lib = await floatingUi.balFloatingUi.load();
+            this.component.panelCleanup = lib.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(lib, this.component.el, this.component.panelEl));
         }
         this.component.isExpanded = true;
         await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
@@ -418,7 +421,16 @@ const Dropdown = class {
          * LIFECYCLE
          * ------------------------------------------------------
          */
-        this.areUtilsConnected = false;
+        this.hasConnected = false;
+        this.listenToOptionChange = (ev) => {
+            this.optionUtil.listenToOptionChange(ev);
+        };
+        this.listenOnClickOutside = (ev) => {
+            this.eventsUtil.handleOutsideClick(ev);
+        };
+        this.resetHandler = (ev) => {
+            this.formSubmitUtil.handle(ev);
+        };
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -542,7 +554,7 @@ const Dropdown = class {
         this.valueUtil.valueChanged(newValue, oldValue);
     }
     connectedCallback() {
-        if (this.areUtilsConnected === false) {
+        if (!this.hasConnected) {
             this.eventsUtil.connectedCallback(this);
             this.valueUtil.connectedCallback(this);
             this.popupUtil.connectedCallback(this);
@@ -550,7 +562,23 @@ const Dropdown = class {
             this.formSubmitUtil.connectedCallback(this);
             this.focusUtil.connectedCallback(this);
             this.autoFillUtil.connectedCallback(this);
-            this.areUtilsConnected = true;
+        }
+        helpers.addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (browser.balBrowser.hasDocument) {
+            helpers.addEventListener(document, 'click', this.listenOnClickOutside);
+            helpers.addEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
+        this.hasConnected = true;
+    }
+    disconnectedCallback() {
+        helpers.removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (browser.balBrowser.hasDocument) {
+            helpers.removeEventListener(document, 'click', this.listenOnClickOutside);
+            helpers.removeEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
         }
     }
     async componentWillRender() {
@@ -575,15 +603,6 @@ const Dropdown = class {
         this.region = state.region;
         this.httpFormSubmit = state.httpFormSubmit;
     }
-    async listenToOptionChange(ev) {
-        this.optionUtil.listenToOptionChange(ev);
-    }
-    listenOnClickOutside(ev) {
-        this.eventsUtil.handleOutsideClick(ev);
-    }
-    resetHandler(ev) {
-        this.formSubmitUtil.handle(ev);
-    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -644,7 +663,7 @@ const Dropdown = class {
      */
     render() {
         const block = bem.BEM.block('dropdown');
-        return (index.h(index.Host, { key: '66597f22426c1b7f6ba12db53994eac865397bad', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, index.h("div", { key: 'edf58497762245b9587407fcd3515543dc409134', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, index.h("span", { key: 'c7d7c1ea9f036d0fec16de6be2b18940152063ec', class: Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())) }, index.h(DropdownValue, { key: '58478193d0927cd9c9f7f77c27e221a1eb41f704', filled: this.valueUtil.isFilled(), chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), index.h(DropdownInput, { key: '1d9e2a4bf77e01c5d3247af040cd9da2a8216d6d', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), index.h(DropdownNativeSelect, { key: 'f1571c4331e0529d35a2e7a11167b10ecdfb3b73', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), index.h(DropdownIcon, { key: '076bb372b58ba8a297eb1a474b9848bd0fcb851b', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), index.h(DropdownOptionList, { key: '8af09317b458fe2f5269094812608a1275a4ec3c', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, index.h("slot", { key: '61ed479837411e662c313c2f81ea1eea26de4797' }))));
+        return (index.h(index.Host, { key: 'fea0abd6ec54fd7724201d2f772a93949932bd44', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, index.h("div", { key: '259704fb0bec9453131bad395e084fba43aa03dd', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, index.h("span", { key: '7fddec690d760b4c38ea29221468a7d14df18d5d', class: Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())) }, index.h(DropdownValue, { key: 'e73533861ddd53aac505fdc78bf051a0449cf655', filled: this.valueUtil.isFilled(), chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), index.h(DropdownInput, { key: '7299e6b670a1b2283b1383040d9a75f29c76fe84', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), index.h(DropdownNativeSelect, { key: '97da430cab5eef476c4404eb27dcc65edf0b8d6e', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), index.h(DropdownIcon, { key: 'c2d77ffd50a1062f772123954fd95b44200b04c3', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), index.h(DropdownOptionList, { key: 'd4c82b91392692aad6a1095fa6b25bad7ecefffa', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, index.h("slot", { key: '1d9732ce6013922a304a7d52b34e79a128fb22d3' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const helpers = require('./helpers-393c2183.js');
 const form = require('./form-2279fb2f.js');

package/dist/cjs/bal-file-upload.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const array = require('./array-ae164ca3.js');
 const formInput = require('./form-input-35653e8f.js');
@@ -10,6 +10,7 @@ const log = require('./log-33398c2a.js');
 const bem = require('./bem-81bc6a2d.js');
 const balFileUpload_type = require('./bal-file-upload.type-616d69d9.js');
 const form = require('./form-2279fb2f.js');
+const listen = require('./listen-b42a4134.js');
 require('./index-e6a233be.js');
 require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
@@ -339,16 +340,16 @@ const FileUpload = class {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (index.h(index.Host, { key: 'e1924e378256a4e5f9ef14cb5dec531d1b71ed5b', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (index.h(index.Host, { key: '474742770b56c2c9200dc402db53bb4266592c72', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
                 'bal-file-upload': true,
-            } }, index.h("div", { key: '5eea726388bf34b30d52ef057be0d02ce55a4a32', class: {
+            } }, index.h("div", { key: '8ce2bbbf975c8fb0dfa9b177d1a107401b7d0a33', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, index.h("label", { key: '3db76968c7413f788b37eba41df11f398517b2c4', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, index.h("label", { key: 'c1e836840cf74f73702af305f1d99ebca2de52b8', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, index.h("input", { key: '5e1c43e583d684ca778836c0a209c7ad87e9fa7d', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (index.h("span", { class: "file-cta" }, index.h("bal-spinner", null))) : (index.h("span", { class: "file-cta" }, index.h("span", { class: "file-icon" }, index.h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), index.h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (index.h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, index.h("input", { key: '3ae311e7c1c0e550b3551e9f1e70ce65c54c0c83', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (index.h("span", { class: "file-cta" }, index.h("bal-spinner", null))) : (index.h("span", { class: "file-cta" }, index.h("span", { class: "file-icon" }, index.h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), index.h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (index.h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -361,6 +362,12 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], FileUpload.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], FileUpload.prototype, "resetHandler", null);
 let FileUploadIds = 0;
 FileUpload.style = BalFileUploadStyle0;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 require('./index-3b7f8988.js');
 require('./index-758765f7.js');

package/dist/cjs/bal-form-col_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 
 const FormCol = class {
     constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const form = require('./form-2279fb2f.js');
 const helpers = require('./helpers-393c2183.js');
 require('./browser-1d542d0f.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 const browser = require('./browser-1d542d0f.js');
 

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

@@ -2,23 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const utils = require('./utils-9ea175af.js');
 const scroll = require('./scroll-73c1b762.js');
-const breakpoints_subject = require('./breakpoints.subject-ef2650af.js');
-const breakpoints_decorator = require('./breakpoints.decorator-cf3eca02.js');
+const breakpoints_subject = require('./breakpoints.subject-679bdc55.js');
+const breakpoints_decorator = require('./breakpoints.decorator-967c2fd2.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
 const browser = require('./browser-1d542d0f.js');
 const log = require('./log-33398c2a.js');
+const listen = require('./listen-b42a4134.js');
 require('./index-e6a233be.js');
 require('./helpers-393c2183.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-b363e28a.js');
+require('./tokens.esm-e4edac35.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;
@@ -2068,12 +2069,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`;
                 }
             });
         }
@@ -2091,7 +2092,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)) {
@@ -2106,7 +2107,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();
         }
     }
@@ -2171,7 +2172,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 {
@@ -2191,13 +2192,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 (browser.balBrowser.hasWindow) {
@@ -2218,13 +2219,13 @@ const Popover = class {
      */
     render() {
         const block = bem.BEM.block('popover');
-        return (index.h(index.Host, { key: '3889b838b862e7216016cd26758423088f8cd1be', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (index.h("div", { key: '221a0a98143aa720c83c1b542cdfe8eff65e5318', ref: el => {
+        return (index.h(index.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 && (index.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`,
-            } })), index.h("slot", { key: 'e7293d370c9af68a797ee1b05282b769afd964a5' })));
+            } })), index.h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
     }
-    get element() { return index.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "active": ["activeChanged"]
     }; }
@@ -2235,6 +2236,30 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balPopoverPrepare', { target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Popover.prototype, "handlePopoverPrepare", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Popover.prototype, "clickOnOutside", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keydown', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Popover.prototype, "handleKeyUp", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keyup', { target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Popover.prototype, "tabOutside", null);
 tslib_es6.__decorate([
     breakpoints_decorator.ListenToBreakpoints(),
     tslib_es6.__metadata("design:type", Function),

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const _commonjsHelpers = require('./_commonjsHelpers-68cdf74f.js');
 const bem = require('./bem-81bc6a2d.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.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)}";

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

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a5d5074f.js');
+const index = require('./index-96c178a6.js');
+const tslib_es6 = require('./tslib.es6-a680968e.js');
 const index$1 = require('./index-e6a233be.js');
 const helpers = require('./helpers-393c2183.js');
 const formInput = require('./form-input-35653e8f.js');
 const bem = require('./bem-81bc6a2d.js');
 const form = require('./form-2279fb2f.js');
+const listen = require('./listen-b42a4134.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -162,11 +164,11 @@ const InputSlider = class {
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (index.h(index.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 }, index.h("div", { key: '7c410c03aa9619192b09070f454e14074536fe6d', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, index.h("div", { key: '484b46bc3be5ef3fec1aed742448e1bbf1b45a99', class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (index.h(index.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 }, index.h("div", { key: '7b31c11bf1d3423be6b2d7837a0f8ccaafe46daa', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, index.h("div", { key: '6a4440695d82c35bf8c8195dc79e5c8c14c91f16', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, index.h("div", { key: 'dbec8b1b193b0483477556f279d83f70b9762903', class: Object.assign({}, backgroundUpperInnerEl.class()) })), index.h("div", { key: '5c945858200ebd7d1bd21ab938326deede5ad5a2', class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, index.h("div", { key: '5be6c525ff34e993b27424e5dcfe4d5bc4609ba7', class: Object.assign({}, backgroundUpperInnerEl.class()) })), index.h("div", { key: '3eb1fae3c122c23db8bc05c8f246c23984a8dbfc', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, index.h("div", { key: '76c8afe4b0592fab4ae8442756244b913eaaf450', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), index.h("div", { key: '1637419e70a53b4b17c7ca7eaa494cb6271220a5', class: Object.assign({}, inputEl.class()) }, index.h("div", { key: '25095f62531acf43feeee439a2c1d23925d8e92c', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), index.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" }), index.h("div", { key: '5f158e2c228b50b94448ff2f786697107dc892b1', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), index.h("div", { key: '969c8a93a96b0c36d9f12a4b59e31c484c695617', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (index.h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, index.h("div", { key: '53ae6ada3c544a543180a21721b6271c36db5c47', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), index.h("div", { key: 'f309f58ec23b5bc31799fcf0e3f5ef6c4cc25039', class: Object.assign({}, inputEl.class()) }, index.h("div", { key: 'c8d0fc9abf6a2384a44af08e581e3ca4f1115f60', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), index.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" }), index.h("div", { key: '8c93968c955d1bdb970e31308240db6e5f3a6795', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), index.h("div", { key: 'f89ab4d7d6b67d976856bbabfb018d474f0bf306', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (index.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 index.getElement(this); }
     static get watchers() { return {
@@ -174,6 +176,18 @@ const InputSlider = class {
         "value": ["valueChanged"]
     }; }
 };
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], InputSlider.prototype, "listenOnClick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], InputSlider.prototype, "resetHandler", null);
 let inputSliderIds = 0;
 InputSlider.style = BalInputSliderStyle0;