@baloise/ds-core 16.8.0 → 17.0.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 
@@ -30,7 +30,7 @@ const Data = class {
     }
     render() {
         const block = BEM.block('data');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, h("slot", null)));
+        return (h(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)) }, h("slot", { key: '2480dde04221d364d9a6f16a3469d6238762bf86' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -47,7 +47,7 @@ const DataItem = class {
     }
     render() {
         const element = BEM.block('data-item');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, h("slot", null)));
+        return (h(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)) }, h("slot", { key: 'e34d2d90b08bd824b54cd636beee7702c2e57192' })));
     }
 };
 
@@ -57,7 +57,7 @@ const DataLabel = class {
         this.required = false;
     }
     render() {
-        return (h(Host, { class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", null), this.required ? '*' : ''));
+        return (h(Host, { key: '1c156284930b724997e295912bfebfba138649a2', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'b39c528fb8f45324a056c9b7305bb4ce8fea47c6' }), this.required ? '*' : ''));
     }
 };
 
@@ -81,7 +81,7 @@ const DataValue = class {
     render() {
         const block = BEM.block('data-value');
         const buttonEl = block.element('button');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, h("div", null, h("slot", null)), 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 (h(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)) }, h("div", { key: 'f26f3535658c7a2aacd45b71d0c7feab05703bbb' }, h("slot", { key: 'd2b482f904a0312555cc24cc22db7126e1b8da6c' })), 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 getElement(this); }
 };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b6003bc7.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5b1faf93.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import './helpers-c201154e.js';
+import './helpers-72ae7307.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -37,7 +37,7 @@ const DateCalendarCell = class {
      */
     render() {
         const block = BEM.block('date-calendar-cell');
-        return (h(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) }, h("time", { dateTime: this.isoDate }, this.day)));
+        return (h(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) }, h("time", { key: '3e9df0253eb9828eacd3fe73f6ce58bfc500e3d4', dateTime: this.isoDate }, this.day)));
     }
 };
 

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

@@ -1,24 +1,25 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { D as lodash_padstart, d as dateSeparator } from './index.esm-cc299511.js';
+import { l as lodash_padstart } from './index-bba06972.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { B as BalDate, i as i18nBalDate } from './date-6e8f5617.js';
+import { B as BalDate, i as i18nBalDate, d as dateSeparator } from './date-3b88d03c.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { b as waitAfterFramePaint, n as hasParent } from './helpers-c201154e.js';
+import { b as waitAfterFramePaint, p as hasParent } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
+import { L as ListenToSwipe } from './swipe.decorator-56b6d574.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { m as hasValueChanged, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
+import { m as hasValueChanged, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
 import { I as INVALID_VALUE } from './mask-util-71edc2b8.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './config.utils-6ac6c9bd.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
-import './swipe.subject-f1d64e8d.js';
+import './swipe.subject-683f7c7b.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
 
@@ -444,7 +445,7 @@ const DateCalendar = class {
         const block = BEM.block('date-calendar');
         const blockBody = block.element('body');
         const blockFoot = block.element('foot');
-        return (h(Host, { class: Object.assign({}, block.class()) }, 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 }), h("div", { class: Object.assign({}, blockBody.class()) }, 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) }), h(CalendarList, { name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { class: Object.assign({}, blockFoot.class()) }, h("slot", null))));
+        return (h(Host, { key: '248e291f860cdb55eb13cce3afa9fd453efd9bb1', class: Object.assign({}, block.class()) }, 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 }), h("div", { key: 'e7348e9fe457bd309ecf8645ae1af0138d6ea156', class: Object.assign({}, blockBody.class()) }, 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) }), 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) }), h(CalendarList, { key: '9341dbb8c0f7ce5713a9cbdb5e4a22d3db83b43a', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: '5e74571cea6b858964554f3065eb40092535f1dd', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: 'c3cc4f4f43d40b095ad03fe23a8645282e658765' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1451,14 +1452,14 @@ const InputDate = class {
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ class: {
+        return (h(Host, { key: 'c19d0b61364480bbcb5067bf0c5d68b83dab6fa7', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'e8cbf0a3372a06823953459eeb754f2c22fc0b22', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'b6acc3e893caf68b4823addac74e4cea27fdc98b', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1477,6 +1478,18 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], InputDate.prototype, "configChanged", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "listenOnClick", null);
 let inputDateIds = 0;
 InputDate.style = BalInputDateStyle0;
 

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

@@ -1,18 +1,17 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { e as isSpaceKey } from './index.esm-cc299511.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm-f1cf1077.js';
-import { B as BalDate, i as i18nBalDate } from './date-6e8f5617.js';
+import { B as BalDate, i as i18nBalDate } from './date-3b88d03c.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { b as balFloatingUi } from './floating-ui-82413f23.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './index-82aff103.js';
-import './_commonjsHelpers-1c8beb5f.js';
 import './config.utils-6ac6c9bd.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
@@ -244,10 +243,11 @@ const Date = class {
      */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
+            const lib = await balFloatingUi.load();
             this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
-            this.popupCleanup = autoUpdate(this.referenceEl, this.floatingEl, () => {
+            this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
                 this.updatePosition(this.referenceEl, this.floatingEl);
             });
         }
@@ -264,11 +264,14 @@ const Date = class {
         }
         return this.isExpanded;
     }
-    updatePosition(referenceEl, floatingEl) {
-        computePosition(referenceEl, floatingEl, {
+    async updatePosition(referenceEl, floatingEl) {
+        const lib = await balFloatingUi.load();
+        lib
+            .computePosition(referenceEl, floatingEl, {
             placement: 'bottom-start',
-            middleware: [offset(4), 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`,
@@ -284,7 +287,7 @@ const Date = class {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, 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 ? (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": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), 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}` }, 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 (h(Host, { key: '0e4243022c01b88366ad8f8b750da6de3b9ecfc3', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '86132e01d44f18bbd89efa002117b20bbf754837', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, 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 ? (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": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), 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}` }, 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 getElement(this); }
     static get watchers() { return {
@@ -298,6 +301,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Date.prototype, "createLogger", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenToKeydown", null);
+__decorate([
+    ListenTo('keyup', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnKeyup", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnclick", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnPopoverPrepare", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -28,7 +28,7 @@ const Divider = class {
         const space = !!this.space;
         const color = !!this.color;
         const borderStyle = !!this.borderStyle;
-        return (h(Host, { role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", null)));
+        return (h(Host, { key: '8478d5e9ab81d7062675e8a83f5da79efe9e2554', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", { key: '30d8100818dcddd6a2d8d21df17f41965d12d4f8' })));
     }
 };
 __decorate([

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

@@ -1,22 +1,24 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { o as areArraysEqual, q as isArrowDownKey, s as isArrowUpKey, h as isEnterKey, u as isEscapeKey, e as isSpaceKey } from './index.esm-cc299511.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
-import { k as rIC, b as waitAfterFramePaint, d as waitAfterIdleCallback } from './helpers-c201154e.js';
+import { m as rIC, b as waitAfterFramePaint, k as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers-72ae7307.js';
+import { b as balBrowser } from './browser-a8073d92.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { c as computePosition, a as autoUpdate, f as flip, s as shift } from './floating-ui.dom.esm-f1cf1077.js';
+import { b as balFloatingUi } from './floating-ui-82413f23.js';
 import { D as DropdownOptionUtil } from './option-01553dab.js';
+import { i as isArrowDownKey, a as isArrowUpKey, b as isEnterKey, c as isEscapeKey, d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
 import { a as ariaBooleanToString } from './aria-d5877698.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './_commonjsHelpers-1c8beb5f.js';
-import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './index-95ee0c4b.js';
+import './_commonjsHelpers-1c8beb5f.js';
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -216,7 +218,7 @@ const DropdownIcon = ({ icon, language, loading, clearable, invalid, filled, exp
         return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
     }
     else if (clearable && filled && !disabled) {
-        return (h("button", { title: i18nBalDropdown[language].clearable, class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) },
+        return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) },
             h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
     }
     else {
@@ -236,11 +238,13 @@ const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPr
 
 class DropdownPopupUtil {
     constructor() {
-        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
-            computePosition(referenceEl, floatingEl, {
+        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
+            lib
+                .computePosition(referenceEl, floatingEl, {
                 placement: 'bottom-start',
-                middleware: [flip(), shift()],
-            }).then(({ x, y }) => {
+                middleware: [lib.flip(), lib.shift()],
+            })
+                .then(({ x, y }) => {
                 Object.assign(floatingEl.style, {
                     left: `${x}px`,
                     top: `${y}px`,
@@ -264,7 +268,8 @@ class DropdownPopupUtil {
     async expandList() {
         var _a;
         if (this.component.panelEl) {
-            this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+            const lib = await 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());
@@ -408,6 +413,20 @@ const Dropdown = class {
         this.formSubmitUtil = new DropdownFormSubmitUtil();
         this.focusUtil = new DropdownFocusUtil();
         this.autoFillUtil = new DropdownAutoFillUtil();
+        /**
+         * LIFECYCLE
+         * ------------------------------------------------------
+         */
+        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
          * ------------------------------------------------------
@@ -530,18 +549,33 @@ const Dropdown = class {
     valueChanged(newValue, oldValue) {
         this.valueUtil.valueChanged(newValue, oldValue);
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
     connectedCallback() {
-        this.eventsUtil.connectedCallback(this);
-        this.valueUtil.connectedCallback(this);
-        this.popupUtil.connectedCallback(this);
-        this.optionUtil.connectedCallback(this);
-        this.formSubmitUtil.connectedCallback(this);
-        this.focusUtil.connectedCallback(this);
-        this.autoFillUtil.connectedCallback(this);
+        if (!this.hasConnected) {
+            this.eventsUtil.connectedCallback(this);
+            this.valueUtil.connectedCallback(this);
+            this.popupUtil.connectedCallback(this);
+            this.optionUtil.connectedCallback(this);
+            this.formSubmitUtil.connectedCallback(this);
+            this.focusUtil.connectedCallback(this);
+            this.autoFillUtil.connectedCallback(this);
+        }
+        addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (balBrowser.hasDocument) {
+            addEventListener(document, 'click', this.listenOnClickOutside);
+            addEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
+        this.hasConnected = true;
+    }
+    disconnectedCallback() {
+        removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (balBrowser.hasDocument) {
+            removeEventListener(document, 'click', this.listenOnClickOutside);
+            removeEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
     }
     async componentWillRender() {
         this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
@@ -565,15 +599,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
      * ------------------------------------------------------
@@ -634,7 +659,7 @@ const Dropdown = class {
      */
     render() {
         const block = BEM.block('dropdown');
-        return (h(Host, { class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { 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) }, h("span", { 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())) }, h(DropdownValue, { 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) })), h(DropdownInput, { 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) }), h(DropdownNativeSelect, { name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { 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() })), h(DropdownOptionList, { 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) }, h("slot", null))));
+        return (h(Host, { key: 'fea0abd6ec54fd7724201d2f772a93949932bd44', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, 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) }, 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())) }, 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) })), 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) }), 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) }), 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() })), 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) }, h("slot", { key: '1d9732ce6013922a304a7d52b34e79a128fb22d3' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { e as deepReady, b as waitAfterFramePaint } from './helpers-c201154e.js';
+import { f as deepReady, b as waitAfterFramePaint } from './helpers-72ae7307.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
-import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
+import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
@@ -23,7 +23,6 @@ const Field = class {
             'bal-number-input',
             'bal-textarea',
             'bal-select',
-            'bal-datepicker',
             'bal-checkbox',
             'bal-radio',
             'bal-input-group',
@@ -129,7 +128,6 @@ const Field = class {
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',
             'bal-field-control bal-time-input',
-            'bal-field-control bal-datepicker',
             'bal-field-control bal-input-slider',
             'bal-field-control bal-input-stepper',
             'bal-field-control bal-textarea',
@@ -179,12 +177,12 @@ const Field = class {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { id: this.fieldId, class: {
+        return (h(Host, { key: '61d8be020fb71526ad0175d75880eb155cb15623', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", null), h("span", { class: "bal-field-hidden" })));
+            } }, h("slot", { key: 'b174f1bdd65a1fb7b63b833c3bf8532e1733d708' }), h("span", { key: '570886a9234a9e3a2ef941a419d35d5451d0227a', class: "bal-field-hidden" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -226,14 +224,14 @@ const FieldControl = class {
         return '';
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'bcb91952d67d6c7d2677845d6f9167ed5fe1bcff', class: {
                 'bal-field-control': true,
                 'control': true,
                 'has-icons-left': !!this.iconLeft,
                 'has-icons-right': !!this.iconRight,
                 'is-loading': this.loading,
                 'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
-            } }, h("slot", null), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: '0d4aca610ab427ed32a31542ae81223b4d656dfa' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
 };
 
@@ -246,7 +244,7 @@ const FieldHint = class {
     }
     render() {
         const block = BEM.block('field-hint');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("bal-hint", { class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", null, h("slot", null)))));
+        return (h(Host, { key: '9c47fdbb402b9b7f4012d2f2160fe99356f58b99', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '8cea3277913207cca651bcad4cb22fa9b8fad2f4', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", { key: '1523a364269414bb277bba0d0bcc1c8ba946a2cd' }, h("slot", { key: '952fa5ac1cb907233cc9ea4c179c859991ed7c4b' })))));
     }
 };
 
@@ -284,7 +282,7 @@ const FieldLabel = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { class: "bal-field-label" }, h("bal-label", { multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", null))));
+        return (h(Host, { key: 'b1ed98ad14b6cb6e3e4642a04d71d93fe6c97e83', class: "bal-field-label" }, h("bal-label", { key: 'fdec2d6fd449841320b4646e925c09c05c39739c', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '04b0fb018f316044503e8ffa540441c0e1624807' }))));
     }
     get element() { return getElement(this); }
 };
@@ -306,14 +304,14 @@ const FieldMessage = class {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     render() {
-        return (h(Host, { id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: '962c48c52992d5689c6de2ce866863bdd8436a68', id: this.ariaForm.messageId, class: {
                 'bal-field-message': true,
                 'help': true,
                 'is-danger': this.invalid,
                 'is-success': this.valid,
                 'is-disabled': this.disabled || this.readonly,
                 [`is-${this.color}`]: !!this.color,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'e82266f5abc43308bf05401fd24f581e2138c3c4' })));
     }
 };
 

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

@@ -1,14 +1,16 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { o as areArraysEqual } from './index.esm-cc299511.js';
-import { s as stopEventBubbling, a as inputHandleHostClick, i as inputHandleFocus, e as inputHandleBlur, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
+import { s as stopEventBubbling, i as inputHandleHostClick, a as inputHandleFocus, b as inputHandleBlur, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type-2a70f4ec.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './index-82aff103.js';
+import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
-import './helpers-c201154e.js';
+import './helpers-72ae7307.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -334,16 +336,16 @@ const FileUpload = class {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '474742770b56c2c9200dc402db53bb4266592c72', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
                 'bal-file-upload': true,
-            } }, h("div", { class: {
+            } }, h("div", { key: '8ce2bbbf975c8fb0dfa9b177d1a107401b7d0a33', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: 'c1e836840cf74f73702af305f1d99ebca2de52b8', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { 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 ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, 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 ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -356,6 +358,12 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], FileUpload.prototype, "createLogger", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], FileUpload.prototype, "resetHandler", null);
 let FileUploadIds = 0;
 FileUpload.style = BalFileUploadStyle0;