@baloise/ds-core 16.8.0 → 17.0.0

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

@@ -2,23 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const formInput = require('./form-input-b61eb894.js');
-const helpers = require('./helpers-2a8c8333.js');
+const formInput = require('./form-input-35653e8f.js');
+const helpers = require('./helpers-393c2183.js');
 const attributes = require('./attributes-9f366716.js');
 const bem = require('./bem-81bc6a2d.js');
-const index_esm = require('./index.esm-54a3d84e.js');
 const log = require('./log-33398c2a.js');
 const focusVisible = require('./focus-visible-264bd9b8.js');
 const form = require('./form-2279fb2f.js');
 const aria = require('./aria-c8955a5c.js');
-const focus_decorator = require('./focus.decorator-afaf9ac4.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
+const listen = require('./listen-b42a4134.js');
+const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
+const array = require('./array-ae164ca3.js');
+const focus_decorator = require('./focus.decorator-ec3a858c.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./index-e6a233be.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./listener-52d2e5fd.js');
 
@@ -36,7 +39,7 @@ const Checkbox = class {
         this.keyboardMode = true;
         this.initialValue = false;
         this.onKeypress = (ev) => {
-            if (index_esm.isSpaceKey(ev)) {
+            if (keyboard_helpers.isSpaceKey(ev)) {
                 const element = ev.target;
                 if (element.href) {
                     return;
@@ -88,7 +91,7 @@ const Checkbox = class {
         };
         this.onPointerDown = () => (this.keyboardMode = false);
         this.onKeydown = (ev) => {
-            if (!index_esm.isSpaceKey(ev)) {
+            if (!keyboard_helpers.isSpaceKey(ev)) {
                 this.wasFocused = false;
             }
             this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
@@ -287,7 +290,7 @@ const Checkbox = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (index.h(index.Host, { "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, index.h("slot", null)))) : ('')));
+        return (index.h(index.Host, { key: 'ecce7f9cb60f37a738f18f72a2735c853ae02985', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ key: '7a7fe32e829fb5fb68de8a2bb7705db0465792ae', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, index.h("slot", null)))) : ('')));
     }
     get el() { return index.getElement(this); }
 };
@@ -297,6 +300,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Checkbox.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)
+], Checkbox.prototype, "resetHandler", null);
 let checkboxIds = 0;
 Checkbox.style = BalCheckboxStyle0;
 
@@ -340,7 +355,7 @@ const CheckboxGroup = class {
                     newValue.push(cb.value);
                 }
             });
-            if (!index_esm.areArraysEqual(this.value, newValue)) {
+            if (!array.areArraysEqual(this.value, newValue)) {
                 this.value = [...newValue];
                 this.balChange.emit(this.value);
             }
@@ -412,7 +427,7 @@ const CheckboxGroup = class {
     }
     valueChanged(_value, oldValue) {
         if (this.control) {
-            if (!index_esm.areArraysEqual(this.value, oldValue)) {
+            if (!array.areArraysEqual(this.value, oldValue)) {
                 this.onOptionChange();
             }
         }
@@ -606,6 +621,30 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "mutationListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balChange', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.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)
+], CheckboxGroup.prototype, "resetHandler", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balFocus', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxFocusListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balBlur', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxBlurListener", null);
 let checkboxGroupIds = 0;
 
 exports.bal_checkbox = Checkbox;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const balClose_i18n = require('./bal-close.i18n-56dddd35.js');
@@ -36,7 +36,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = balClose_i18n.i18nBalClose[this.language].close;
-        return (index.h(index.Host, { class: Object.assign({}, blockEl.class()) }, index.h("button", { type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (index.h(index.Host, { key: '28a807ed717bd60d6534beee83086e87165c6b8f', class: Object.assign({}, blockEl.class()) }, index.h("button", { key: 'f74d31fca4b77c4a39365cb43ff44279fbfcfe65', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { key: '49e49cf68edacc7d69e8d7c42abfb98ff1281f28', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
@@ -42,7 +42,7 @@ const Content = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'f5838f89492ab4147c9654d4490780ac55f64437', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", { key: '07907466799f1bc60d530215fd92b7e2c2636e6f' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 const index$1 = require('./index-e6a233be.js');
 
@@ -34,7 +34,7 @@ const Data = class {
     }
     render() {
         const block = bem.BEM.block('data');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '864257bdb7de053ad8905c5ed5bd0b2bb9dd5793', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", { key: '2480dde04221d364d9a6f16a3469d6238762bf86' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -51,7 +51,7 @@ const DataItem = class {
     }
     render() {
         const element = bem.BEM.block('data-item');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'a2c7f920fdafc6672964f3a34785f9e1bf10f7e3', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", { key: 'e34d2d90b08bd824b54cd636beee7702c2e57192' })));
     }
 };
 
@@ -61,7 +61,7 @@ const DataLabel = class {
         this.required = false;
     }
     render() {
-        return (index.h(index.Host, { class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", null), this.required ? '*' : ''));
+        return (index.h(index.Host, { key: '1c156284930b724997e295912bfebfba138649a2', class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", { key: 'b39c528fb8f45324a056c9b7305bb4ce8fea47c6' }), this.required ? '*' : ''));
     }
 };
 
@@ -85,7 +85,7 @@ const DataValue = class {
     render() {
         const block = bem.BEM.block('data-value');
         const buttonEl = block.element('button');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", null, index.h("slot", null)), index.h("bal-button", { class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
+        return (index.h(index.Host, { key: 'a3694b08f08f4bfd2a6de223ae7c27453cdc7f02', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", { key: 'f26f3535658c7a2aacd45b71d0c7feab05703bbb' }, index.h("slot", { key: 'd2b482f904a0312555cc24cc22db7126e1b8da6c' })), index.h("bal-button", { key: 'c3357978fa4d4fdbc65825e8dd0d87d3b22af10b', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
-const formInput = require('./form-input-b61eb894.js');
+const index = require('./index-96c178a6.js');
+const formInput = require('./form-input-35653e8f.js');
 const bem = require('./bem-81bc6a2d.js');
-require('./helpers-2a8c8333.js');
+require('./helpers-393c2183.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -41,7 +41,7 @@ const DateCalendarCell = class {
      */
     render() {
         const block = bem.BEM.block('date-calendar-cell');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { dateTime: this.isoDate }, this.day)));
+        return (index.h(index.Host, { key: 'f3e32c2777dee61702819acd5839608ae8f28c0c', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { key: '3e9df0253eb9828eacd3fe73f6ce58bfc500e3d4', dateTime: this.isoDate }, this.day)));
     }
 };
 

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

@@ -2,27 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-219b2f52.js');
+const index$2 = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const index = require('./index-e6a233be.js');
-const date = require('./date-20be7524.js');
+const index = require('./index-758765f7.js');
+const index$1 = require('./index-e6a233be.js');
+const date = require('./date-c2a815e4.js');
 const log = require('./log-33398c2a.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const bem = require('./bem-81bc6a2d.js');
 const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
-const swipe_decorator = require('./swipe.decorator-5206d283.js');
+const swipe_decorator = require('./swipe.decorator-391a0941.js');
 const attributes = require('./attributes-9f366716.js');
-const formInput = require('./form-input-b61eb894.js');
+const formInput = require('./form-input-35653e8f.js');
 const form = require('./form-2279fb2f.js');
+const listen = require('./listen-b42a4134.js');
 const keys_constant = require('./keys.constant-b53da545.js');
 const maskUtil = require('./mask-util-19c28b4a.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./config.utils-e4cd49d6.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
-require('./swipe.subject-4ec94271.js');
+require('./swipe.subject-48bf62a1.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
 
@@ -34,11 +35,11 @@ function getDaysInMonth(year, month) {
     return new Date(year, month, 0).getDate();
 }
 function isoDateOfDay(day, month, year) {
-    return `${year}-${index_esm.lodash_padstart(`${month}`, 2, '0')}-${index_esm.lodash_padstart(`${day}`, 2, '0')}`;
+    return `${year}-${index.lodash_padstart(`${month}`, 2, '0')}-${index.lodash_padstart(`${day}`, 2, '0')}`;
 }
 function isoDateOfToday() {
     const today = new Date();
-    return `${today.getFullYear()}-${index_esm.lodash_padstart(`${today.getMonth() + 1}`, 2, '0')}-${index_esm.lodash_padstart(`${today.getDate()}`, 2, '0')}`;
+    return `${today.getFullYear()}-${index.lodash_padstart(`${today.getMonth() + 1}`, 2, '0')}-${index.lodash_padstart(`${today.getDate()}`, 2, '0')}`;
 }
 // Function to generate the calendar grid
 function generateCalendarGrid(year, month, min, max, allowedDates) {
@@ -53,7 +54,7 @@ function generateCalendarGrid(year, month, min, max, allowedDates) {
         const dateMin = date.BalDate.fromISO(min);
         const dateMax = date.BalDate.fromISO(max);
         const allowedDate = (isoDate) => {
-            if (index.lodash_isnil(allowedDates)) {
+            if (index$1.lodash_isnil(allowedDates)) {
                 return false;
             }
             return !allowedDates(isoDate);
@@ -171,10 +172,10 @@ const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) =>
     const block = bem.BEM.block('date-calendar');
     const blockBody = block.element('body');
     const blockBodyList = blockBody.element('list');
-    return (index$1.h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
+    return (index$2.h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
             height: `${girdHeight - 2 - 8 - 8}px`,
-        }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (index$1.h("li", { key: item.value, id: `${name}-${item.value}` },
-        index$1.h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), disabled: item.disabled, tabIndex: -1, onClick: () => {
+        }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (index$2.h("li", { key: item.value, id: `${name}-${item.value}` },
+        index$2.h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), disabled: item.disabled, tabIndex: -1, onClick: () => {
                 if (!item.disabled) {
                     onSelect(item);
                 }
@@ -185,9 +186,9 @@ const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOf
     const block = bem.BEM.block('date-calendar');
     const blockBody = block.element('body');
     const blockBodyGrid = blockBody.element('grid');
-    return (index$1.h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
-        index$1.h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (index$1.h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
-        index$1.h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (index$1.h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
+    return (index$2.h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
+        index$2.h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (index$2.h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
+        index$2.h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (index$2.h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
 };
 
 const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {
@@ -196,21 +197,21 @@ const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, mont
     const nextMonthLabel = date.i18nBalDate[language].nextMonth;
     const previousMonthLabel = date.i18nBalDate[language].previousMonth;
     const selectMonthLabel = date.i18nBalDate[language].selectMonth;
-    return (index$1.h("div", { class: Object.assign({}, blockNav.class()) },
-        index$1.h("div", { class: Object.assign({}, blockNav.modifier('start').class()) },
-            index$1.h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-test": "change-year-month", onClick: onClickSelectMonthAndYear },
-                index$1.h("span", null,
+    return (index$2.h("div", { class: Object.assign({}, blockNav.class()) },
+        index$2.h("div", { class: Object.assign({}, blockNav.modifier('start').class()) },
+            index$2.h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-test": "change-year-month", onClick: onClickSelectMonthAndYear },
+                index$2.h("span", null,
                     monthFullNames[month - 1],
                     " ",
                     year),
-                index$1.h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))),
-        index$1.h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
+                index$2.h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))),
+        index$2.h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
                 display: isListVisible ? 'none' : 'flex',
             } },
-            index$1.h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-test": "previous-month" },
-                index$1.h("bal-icon", { name: "caret-left", color: "primary", size: "small" })),
-            index$1.h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" },
-                index$1.h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
+            index$2.h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-test": "previous-month" },
+                index$2.h("bal-icon", { name: "caret-left", color: "primary", size: "small" })),
+            index$2.h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" },
+                index$2.h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
 };
 
 const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__nav button--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar-cell--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";
@@ -218,8 +219,8 @@ const BalDateCalendarStyle0 = balDateCalendarCss;
 
 const DateCalendar = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.balChange = index$1.createEvent(this, "balChange", 7);
+        index$2.registerInstance(this, hostRef);
+        this.balChange = index$2.createEvent(this, "balChange", 7);
         this.oldMin = '';
         this.oldMax = '';
         /**
@@ -448,9 +449,9 @@ const DateCalendar = class {
         const block = bem.BEM.block('date-calendar');
         const blockBody = block.element('body');
         const blockFoot = block.element('foot');
-        return (index$1.h(index$1.Host, { class: Object.assign({}, block.class()) }, index$1.h(CalendarNav, { language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), index$1.h("div", { class: Object.assign({}, blockBody.class()) }, index$1.h(CalendarGrid, { isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), index$1.h(CalendarList, { name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), index$1.h(CalendarList, { name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), index$1.h("div", { class: Object.assign({}, blockFoot.class()) }, index$1.h("slot", null))));
+        return (index$2.h(index$2.Host, { key: '248e291f860cdb55eb13cce3afa9fd453efd9bb1', class: Object.assign({}, block.class()) }, index$2.h(CalendarNav, { key: 'b22fb7f5d3459b29b1bc7ad10925f797964a1bf2', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), index$2.h("div", { key: 'e7348e9fe457bd309ecf8645ae1af0138d6ea156', class: Object.assign({}, blockBody.class()) }, index$2.h(CalendarGrid, { key: '87bab404d1e8777b818c4d4df0d49092b29e96ff', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), index$2.h(CalendarList, { key: '106142481bd53e6d24e91ef0245fe336704c0578', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), index$2.h(CalendarList, { key: '9341dbb8c0f7ce5713a9cbdb5e4a22d3db83b43a', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), index$2.h("div", { key: '5e74571cea6b858964554f3065eb40092535f1dd', class: Object.assign({}, blockFoot.class()) }, index$2.h("slot", { key: 'c3cc4f4f43d40b095ad03fe23a8645282e658765' }))));
     }
-    get el() { return index$1.getElement(this); }
+    get el() { return index$2.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"],
         "min": ["rangePropChanged"],
@@ -1116,7 +1117,7 @@ class DateMask extends AbstractMask {
                     return this.dayMask[locale.split('-')[0]] || this.dayMask['de'];
                 },
             }),
-            new MaskBlock({ from: 2, to: 3, mask: locale => index_esm.dateSeparator(locale), isSeparator: true }),
+            new MaskBlock({ from: 2, to: 3, mask: locale => date.dateSeparator(locale), isSeparator: true }),
             new MaskBlock({
                 from: 3,
                 to: 5,
@@ -1129,7 +1130,7 @@ class DateMask extends AbstractMask {
                 },
                 mask: locale => this.monthMask[locale.split('-')[0]] || this.monthMask['de'],
             }),
-            new MaskBlock({ from: 5, to: 6, mask: locale => index_esm.dateSeparator(locale), isSeparator: true }),
+            new MaskBlock({ from: 5, to: 6, mask: locale => date.dateSeparator(locale), isSeparator: true }),
             new MaskBlock({
                 from: 6,
                 to: 10,
@@ -1352,12 +1353,12 @@ const BalInputDateStyle0 = balInputDateCss;
 
 const InputDate = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.balKeyPress = index$1.createEvent(this, "balKeyPress", 7);
-        this.balChange = index$1.createEvent(this, "balChange", 7);
-        this.balInput = index$1.createEvent(this, "balInput", 7);
-        this.balBlur = index$1.createEvent(this, "balBlur", 7);
-        this.balFocus = index$1.createEvent(this, "balFocus", 7);
+        index$2.registerInstance(this, hostRef);
+        this.balKeyPress = index$2.createEvent(this, "balKeyPress", 7);
+        this.balChange = index$2.createEvent(this, "balChange", 7);
+        this.balInput = index$2.createEvent(this, "balInput", 7);
+        this.balBlur = index$2.createEvent(this, "balBlur", 7);
+        this.balFocus = index$2.createEvent(this, "balFocus", 7);
         this.inputId = `bal-i-date-${inputDateIds++}`;
         this.inheritedAttributes = {};
         this.maskAdapter = new MaskComponentAdapter(new DateMask());
@@ -1455,16 +1456,16 @@ const InputDate = class {
     render() {
         const block = bem.BEM.block('input-date');
         const native = block.element('native');
-        return (index$1.h(index$1.Host, { onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ class: {
+        return (index$2.h(index$2.Host, { key: 'c19d0b61364480bbcb5067bf0c5d68b83dab6fa7', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, index$2.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) })), index$1.h("input", { 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) })), index$2.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 index$1.getElement(this); }
+    get el() { return index$2.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }
@@ -1481,6 +1482,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Object]),
     tslib_es6.__metadata("design:returntype", Promise)
 ], InputDate.prototype, "configChanged", 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)
+], InputDate.prototype, "resetHandler", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [MouseEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], InputDate.prototype, "listenOnClick", null);
 let inputDateIds = 0;
 InputDate.style = BalInputDateStyle0;
 

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

@@ -2,21 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-5dbdcff9.js');
-const date = require('./date-20be7524.js');
+const date = require('./date-c2a815e4.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 const attributes = require('./attributes-9f366716.js');
-const formInput = require('./form-input-b61eb894.js');
-const helpers = require('./helpers-2a8c8333.js');
+const formInput = require('./form-input-35653e8f.js');
+const helpers = require('./helpers-393c2183.js');
 const 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');
-require('./index-e6a233be.js');
-require('./_commonjsHelpers-68cdf74f.js');
 require('./config.utils-e4cd49d6.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
@@ -87,7 +86,7 @@ const Date = class {
             this.balBlur.emit(ev.detail);
         };
         this.onKeyPress = async ({ detail }) => {
-            if (index_esm.isSpaceKey(detail) && !this.triggerIcon) {
+            if (keyboard_helpers.isSpaceKey(detail) && !this.triggerIcon) {
                 if (this.isExpanded) {
                     await this.close();
                 }
@@ -248,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);
             });
         }
@@ -268,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`,
@@ -288,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, { id: this.inputId, class: Object.assign({}, block.class()) }, index.h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, index.h("bal-input-date", Object.assign({ 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", { 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", { 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 {
@@ -302,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),