@baloise/ds-core 16.8.0 → 17.0.0

package/dist/cjs/bal-divider.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');
@@ -32,7 +32,7 @@ const Divider = class {
         const space = !!this.space;
         const color = !!this.color;
         const borderStyle = !!this.borderStyle;
-        return (index.h(index.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)) }, index.h("slot", null)));
+        return (index.h(index.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)) }, index.h("slot", { key: '30d8100818dcddd6a2d8d21df17f41965d12d4f8' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -2,25 +2,27 @@
 
 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 bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
-const formInput = require('./form-input-b61eb894.js');
+const formInput = require('./form-input-35653e8f.js');
 const attributes = require('./attributes-9f366716.js');
 const form = require('./form-2279fb2f.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
+const browser = require('./browser-1d542d0f.js');
+const array = require('./array-ae164ca3.js');
 const index$1 = require('./index-e6a233be.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-5dbdcff9.js');
+const floatingUi = require('./floating-ui-9f03e1cf.js');
 const option = require('./option-4034ca7d.js');
+const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
 const aria = require('./aria-c8955a5c.js');
 const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
-require('./_commonjsHelpers-68cdf74f.js');
-require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
+require('./index-3b7f8988.js');
+require('./_commonjsHelpers-68cdf74f.js');
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -34,7 +36,7 @@ class DropdownAutoFillUtil {
                     this.component.isAutoFilled = false;
                     return;
                 }
-                if (!index_esm.areArraysEqual(newValue, this.component.rawValue)) {
+                if (!array.areArraysEqual(newValue, this.component.rawValue)) {
                     this.component.valueUtil.updateRawValueBySelection(newValue, true);
                 }
             }
@@ -220,7 +222,7 @@ const DropdownIcon = ({ icon, language, loading, clearable, invalid, filled, exp
         return index.h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
     }
     else if (clearable && filled && !disabled) {
-        return (index.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 (index.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)) },
             index.h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
     }
     else {
@@ -240,11 +242,13 @@ const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPr
 
 class DropdownPopupUtil {
     constructor() {
-        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
-            floatingUi_dom_esm.computePosition(referenceEl, floatingEl, {
+        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
+            lib
+                .computePosition(referenceEl, floatingEl, {
                 placement: 'bottom-start',
-                middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()],
-            }).then(({ x, y }) => {
+                middleware: [lib.flip(), lib.shift()],
+            })
+                .then(({ x, y }) => {
                 Object.assign(floatingEl.style, {
                     left: `${x}px`,
                     top: `${y}px`,
@@ -268,7 +272,8 @@ class DropdownPopupUtil {
     async expandList() {
         var _a;
         if (this.component.panelEl) {
-            this.component.panelCleanup = floatingUi_dom_esm.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+            const lib = await floatingUi.balFloatingUi.load();
+            this.component.panelCleanup = lib.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(lib, this.component.el, this.component.panelEl));
         }
         this.component.isExpanded = true;
         await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
@@ -305,7 +310,7 @@ class DropdownValueUtil {
         if (newValueType === 'string' && newValue !== oldValue) {
             this.updateRawValueByValueProp(newValue);
         }
-        if (Array.isArray(newValue) && Array.isArray(oldValue) && !index_esm.areArraysEqual(newValue, oldValue)) {
+        if (Array.isArray(newValue) && Array.isArray(oldValue) && !array.areArraysEqual(newValue, oldValue)) {
             this.updateRawValueByValueProp(newValue);
         }
     }
@@ -412,6 +417,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
          * ------------------------------------------------------
@@ -427,14 +446,14 @@ const Dropdown = class {
                     /**
                      * ⬇️ Arrow up key
                      */
-                    if (index_esm.isArrowDownKey(ev)) {
+                    if (keyboard_helpers.isArrowDownKey(ev)) {
                         formInput.stopEventBubbling(ev);
                         (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focusNext();
                         /**
                          * ⬆️ Arrow up key
                          */
                     }
-                    else if (index_esm.isArrowUpKey(ev)) {
+                    else if (keyboard_helpers.isArrowUpKey(ev)) {
                         formInput.stopEventBubbling(ev);
                         (_b = this.listEl) === null || _b === void 0 ? void 0 : _b.focusPrevious();
                         /**
@@ -455,14 +474,14 @@ const Dropdown = class {
                          * Select focused option
                          */
                     }
-                    else if (index_esm.isEnterKey(ev)) {
+                    else if (keyboard_helpers.isEnterKey(ev)) {
                         formInput.stopEventBubbling(ev);
                         (_e = this.listEl) === null || _e === void 0 ? void 0 : _e.selectByFocus();
                         /**
                          * Close list
                          */
                     }
-                    else if (ev.key === 'Tab' || index_esm.isEscapeKey(ev)) {
+                    else if (ev.key === 'Tab' || keyboard_helpers.isEscapeKey(ev)) {
                         this.popupUtil.collapseList();
                         /**
                          * Focus on label
@@ -476,7 +495,7 @@ const Dropdown = class {
                     /**
                      * Open list
                      */
-                    if (index_esm.isEnterKey(ev) || index_esm.isSpaceKey(ev)) {
+                    if (keyboard_helpers.isEnterKey(ev) || keyboard_helpers.isSpaceKey(ev)) {
                         formInput.stopEventBubbling(ev);
                         this.popupUtil.expandList();
                         /**
@@ -534,18 +553,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);
+        }
+        helpers.addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (browser.balBrowser.hasDocument) {
+            helpers.addEventListener(document, 'click', this.listenOnClickOutside);
+            helpers.addEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
+        this.hasConnected = true;
+    }
+    disconnectedCallback() {
+        helpers.removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (browser.balBrowser.hasDocument) {
+            helpers.removeEventListener(document, 'click', this.listenOnClickOutside);
+            helpers.removeEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
     }
     async componentWillRender() {
         this.inheritedAttributes = attributes.inheritAttributes(this.el, ['tabindex']);
@@ -569,15 +603,6 @@ const Dropdown = class {
         this.region = state.region;
         this.httpFormSubmit = state.httpFormSubmit;
     }
-    async listenToOptionChange(ev) {
-        this.optionUtil.listenToOptionChange(ev);
-    }
-    listenOnClickOutside(ev) {
-        this.eventsUtil.handleOutsideClick(ev);
-    }
-    resetHandler(ev) {
-        this.formSubmitUtil.handle(ev);
-    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -638,7 +663,7 @@ const Dropdown = class {
      */
     render() {
         const block = bem.BEM.block('dropdown');
-        return (index.h(index.Host, { class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, index.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) }, index.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())) }, index.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) })), index.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) }), index.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) }), index.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() })), index.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) }, index.h("slot", null))));
+        return (index.h(index.Host, { key: 'fea0abd6ec54fd7724201d2f772a93949932bd44', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, index.h("div", { key: '259704fb0bec9453131bad395e084fba43aa03dd', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, index.h("span", { key: '7fddec690d760b4c38ea29221468a7d14df18d5d', class: Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())) }, index.h(DropdownValue, { key: 'e73533861ddd53aac505fdc78bf051a0449cf655', filled: this.valueUtil.isFilled(), chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), index.h(DropdownInput, { key: '7299e6b670a1b2283b1383040d9a75f29c76fe84', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), index.h(DropdownNativeSelect, { key: '97da430cab5eef476c4404eb27dcc65edf0b8d6e', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), index.h(DropdownIcon, { key: 'c2d77ffd50a1062f772123954fd95b44200b04c3', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), index.h(DropdownOptionList, { key: 'd4c82b91392692aad6a1095fa6b25bad7ecefffa', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, index.h("slot", { key: '1d9732ce6013922a304a7d52b34e79a128fb22d3' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,11 +2,11 @@
 
 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 helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const form = require('./form-2279fb2f.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
 const bem = require('./bem-81bc6a2d.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
@@ -27,7 +27,6 @@ const Field = class {
             'bal-number-input',
             'bal-textarea',
             'bal-select',
-            'bal-datepicker',
             'bal-checkbox',
             'bal-radio',
             'bal-input-group',
@@ -133,7 +132,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',
@@ -183,12 +181,12 @@ const Field = class {
         components.forEach(c => callback(c));
     }
     render() {
-        return (index.h(index.Host, { id: this.fieldId, class: {
+        return (index.h(index.Host, { key: '61d8be020fb71526ad0175d75880eb155cb15623', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, index.h("slot", null), index.h("span", { class: "bal-field-hidden" })));
+            } }, index.h("slot", { key: 'b174f1bdd65a1fb7b63b833c3bf8532e1733d708' }), index.h("span", { key: '570886a9234a9e3a2ef941a419d35d5451d0227a', class: "bal-field-hidden" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -230,14 +228,14 @@ const FieldControl = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { class: {
+        return (index.h(index.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,
-            } }, index.h("slot", null), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, index.h("slot", { key: '0d4aca610ab427ed32a31542ae81223b4d656dfa' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
 };
 
@@ -250,7 +248,7 @@ const FieldHint = class {
     }
     render() {
         const block = bem.BEM.block('field-hint');
-        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h("bal-hint", { class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? index.h("bal-hint-title", null, this.subject) : '', index.h("bal-hint-text", null, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '9c47fdbb402b9b7f4012d2f2160fe99356f58b99', class: Object.assign({}, block.class()) }, index.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 ? index.h("bal-hint-title", null, this.subject) : '', index.h("bal-hint-text", { key: '1523a364269414bb277bba0d0bcc1c8ba946a2cd' }, index.h("slot", { key: '952fa5ac1cb907233cc9ea4c179c859991ed7c4b' })))));
     }
 };
 
@@ -288,7 +286,7 @@ const FieldLabel = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(index.Host, { class: "bal-field-label" }, index.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 }, index.h("slot", null))));
+        return (index.h(index.Host, { key: 'b1ed98ad14b6cb6e3e4642a04d71d93fe6c97e83', class: "bal-field-label" }, index.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 }, index.h("slot", { key: '04b0fb018f316044503e8ffa540441c0e1624807' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -310,14 +308,14 @@ const FieldMessage = class {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     render() {
-        return (index.h(index.Host, { id: this.ariaForm.messageId, class: {
+        return (index.h(index.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,
-            } }, index.h("slot", null)));
+            } }, index.h("slot", { key: 'e82266f5abc43308bf05401fd24f581e2138c3c4' })));
     }
 };
 

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

@@ -2,17 +2,19 @@
 
 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 formInput = require('./form-input-b61eb894.js');
+const array = require('./array-ae164ca3.js');
+const formInput = require('./form-input-35653e8f.js');
 const log = require('./log-33398c2a.js');
 const bem = require('./bem-81bc6a2d.js');
 const balFileUpload_type = require('./bal-file-upload.type-616d69d9.js');
 const form = require('./form-2279fb2f.js');
+const listen = require('./listen-b42a4134.js');
 require('./index-e6a233be.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
-require('./helpers-2a8c8333.js');
+require('./helpers-393c2183.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -261,7 +263,7 @@ const FileUpload = class {
         this.log = log;
     }
     onValueChange() {
-        if (!index_esm.areArraysEqual(this.files, this.value)) {
+        if (!array.areArraysEqual(this.files, this.value)) {
             this.files = this.value;
         }
     }
@@ -338,16 +340,16 @@ const FileUpload = class {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (index.h(index.Host, { onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (index.h(index.Host, { key: '474742770b56c2c9200dc402db53bb4266592c72', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
                 'bal-file-upload': true,
-            } }, index.h("div", { class: {
+            } }, index.h("div", { key: '8ce2bbbf975c8fb0dfa9b177d1a107401b7d0a33', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, index.h("label", { htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, index.h("label", { key: 'c1e836840cf74f73702af305f1d99ebca2de52b8', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, index.h("input", { class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (index.h("span", { class: "file-cta" }, index.h("bal-spinner", null))) : (index.h("span", { class: "file-cta" }, index.h("span", { class: "file-icon" }, index.h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), index.h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (index.h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, index.h("input", { key: '3ae311e7c1c0e550b3551e9f1e70ce65c54c0c83', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (index.h("span", { class: "file-cta" }, index.h("bal-spinner", null))) : (index.h("span", { class: "file-cta" }, index.h("span", { class: "file-icon" }, index.h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), index.h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (index.h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -360,6 +362,12 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], FileUpload.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], FileUpload.prototype, "resetHandler", null);
 let FileUploadIds = 0;
 FileUpload.style = BalFileUploadStyle0;