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

package/components/all.d.ts

@@ -27,7 +27,6 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,7 +144,6 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,7 +27,6 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,7 +144,6 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -264,7 +262,6 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
-  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-app.js

@@ -1,4 +1,94 @@
-import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { j as debounce, o as rIC, l as rLCP } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
+const BalAppStyle0 = balAppCss;
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+        this.animated = true;
+        this.ready = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        updateBalAnimated(this.animated);
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rLCP(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: '7e5b5c9164dd2fc89e1a41278904b6e020b535a7', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: '5eac7462d067b17d8ff18ceb5d6ae8aa4e040d39' })));
+    }
+    get el() { return this; }
+    static get style() { return BalAppStyle0; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-button2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as inheritAttributes } from './attributes.js';
 import { l as rLCP } from './helpers.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 
@@ -196,7 +198,13 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "value": [8],
         "aria": [16],
         "isLargestContentPaintDone": [32]
-    }, [[6, "click", "listenOnClick"]]]);
+    }]);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Button.prototype, "listenOnClick", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-carousel2.js

@@ -4,6 +4,7 @@ import { j as debounce, l as rLCP, m as raf } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$7 } from './bal-button2.js';
 import { d as defineCustomElement$6 } from './bal-card2.js';
 import { d as defineCustomElement$5 } from './bal-card-content2.js';
@@ -408,7 +409,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (h(Host, { key: 'b43c7c7436f2d59d06c1484d4b99a92f0a6dc063', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { key: 'b5ec62ae47a0bca2cc111f6a584286bf38bc02d3', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { key: '001a2a761091891c94fe38110726fc2ddf945f09', role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", { key: '8c85141f517da84c238170769b38e3f79f938579' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { key: '8f136f31e2fe4fb99703fdd2a5974697cea659b7', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { key: '76e644a3db07b7aeae2a599b560903a24312cb6b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { key: '8040a1b67deccfa135bda7c1b3cef5b05492ad19', role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", { key: '855f44ac6e8b1cfdfd31cc39f9fd2d9749a2f326' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     get el() { return this; }
     static get style() { return BalCarouselStyle0; }
@@ -433,7 +434,13 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "configChanged": [64],
         "previous": [64],
         "next": [64]
-    }, [[8, "touchmove", "blockVerticalScrolling"], [0, "keydown", "listenToKeyDown"]]]);
+    }]);
+__decorate([
+    ListenTo('touchmove', { target: 'window', passive: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "blockVerticalScrolling", null);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),
@@ -458,6 +465,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/components/bal-checkbox-group.js

@@ -7,6 +7,7 @@ import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-checkbox2.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
@@ -314,7 +315,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "setValue": [64],
         "getOptionByValue": [64],
         "setAriaForm": [64]
-    }, [[6, "balChange", "listenOnClick"], [6, "reset", "resetHandler"], [6, "balFocus", "checkboxFocusListener"], [6, "balBlur", "checkboxBlurListener"]], {
+    }, undefined, {
         "options": ["optionChanged"],
         "invalid": ["invalidChanged"],
         "disabled": ["disabledChanged"],
@@ -348,6 +349,30 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "mutationListener", null);
+__decorate([
+    ListenTo('balChange', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('balFocus', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxFocusListener", null);
+__decorate([
+    ListenTo('balBlur', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxBlurListener", null);
 let checkboxGroupIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-checkbox2.js

@@ -8,6 +8,7 @@ import { L as Logger } from './log.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { a as ariaBooleanToString } from './aria.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
 import { a as isSpaceKey } from './keyboard.helpers.js';
 
@@ -277,7 +278,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { key: 'c8750cdbfdcacaad3f9732df1b6f41737d8161c6', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": 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 }, h("input", Object.assign({ key: '3ca5dba1459ca35a59463ced5cdc7f14a227110d', 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": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": 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 ? (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' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), 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, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'ecce7f9cb60f37a738f18f72a2735c853ae02985', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": 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 }, 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": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": 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 ? (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' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), 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, h("slot", null)))) : ('')));
     }
     get el() { return this; }
     static get style() { return BalCheckboxStyle0; }
@@ -311,13 +312,25 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "setButtonTabindex": [64],
         "updateState": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]]]);
+    }]);
 __decorate([
     Logger('bal-checkbox'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "resetHandler", null);
 let checkboxIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-date.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
@@ -8,6 +7,8 @@ import { i as inheritAttributes } from './attributes.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { n as debounceEvent } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { b as balFloatingUi } from './floating-ui.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$6 } from './bal-date-calendar2.js';
 import { d as defineCustomElement$5 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
@@ -246,10 +247,11 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
      */
     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);
             });
         }
@@ -266,11 +268,14 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         }
         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`,
@@ -286,7 +291,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: '0a035309be8e68bcbb7e70723183d212f8eac7f1', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '37430d77af90cc5e82014ea43ea77333df8524a9', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '32e7f8ae9e6bf16ce8f12506c3c07371ff63fe0f', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (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: '16717f90a3df588e7fe6fbc45e44c2ce9e377240', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '54ba9d9d46dc491a3ea069f1d8b2c9899362b693', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (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 this; }
     static get watchers() { return {
@@ -327,7 +332,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[8, "keydown", "listenToKeydown"], [8, "keyup", "listenOnKeyup"], [4, "click", "listenOnclick"], [16, "balPopoverPrepare", "listenOnPopoverPrepare"]], {
+    }, undefined, {
         "value": ["valueChanged"],
         "debounce": ["debounceChanged"]
     }]);
@@ -337,6 +342,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/components/bal-dropdown2.js

@@ -5,10 +5,11 @@ import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { i as inheritAttributes } from './attributes.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { o as rIC, b as waitAfterFramePaint, d as waitAfterIdleCallback } from './helpers.js';
+import { o as rIC, b as waitAfterFramePaint, k as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers.js';
+import { b as balBrowser } from './browser.js';
 import { a as areArraysEqual } from './array.js';
 import { l as lodash_isnil } from './index3.js';
-import { c as computePosition, a as autoUpdate, f as flip, s as shift } from './floating-ui.dom.esm.js';
+import { b as balFloatingUi } from './floating-ui.js';
 import { D as DropdownOptionUtil } from './option.js';
 import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
 import { a as ariaBooleanToString } from './aria.js';
@@ -233,11 +234,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`,
@@ -261,7 +264,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());
@@ -410,7 +414,16 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
          * LIFECYCLE
          * ------------------------------------------------------
          */
-        this.areUtilsConnected = false;
+        this.hasConnected = false;
+        this.listenToOptionChange = (ev) => {
+            this.optionUtil.listenToOptionChange(ev);
+        };
+        this.listenOnClickOutside = (ev) => {
+            this.eventsUtil.handleOutsideClick(ev);
+        };
+        this.resetHandler = (ev) => {
+            this.formSubmitUtil.handle(ev);
+        };
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -534,7 +547,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.valueUtil.valueChanged(newValue, oldValue);
     }
     connectedCallback() {
-        if (this.areUtilsConnected === false) {
+        if (!this.hasConnected) {
             this.eventsUtil.connectedCallback(this);
             this.valueUtil.connectedCallback(this);
             this.popupUtil.connectedCallback(this);
@@ -542,7 +555,23 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             this.formSubmitUtil.connectedCallback(this);
             this.focusUtil.connectedCallback(this);
             this.autoFillUtil.connectedCallback(this);
-            this.areUtilsConnected = true;
+        }
+        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() {
@@ -567,15 +596,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         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
      * ------------------------------------------------------
@@ -636,7 +656,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
      */
     render() {
         const block = BEM.block('dropdown');
-        return (h(Host, { key: '66597f22426c1b7f6ba12db53994eac865397bad', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'edf58497762245b9587407fcd3515543dc409134', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'c7d7c1ea9f036d0fec16de6be2b18940152063ec', class: Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())) }, h(DropdownValue, { key: '58478193d0927cd9c9f7f77c27e221a1eb41f704', filled: this.valueUtil.isFilled(), chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: '1d9e2a4bf77e01c5d3247af040cd9da2a8216d6d', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: 'f1571c4331e0529d35a2e7a11167b10ecdfb3b73', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: '076bb372b58ba8a297eb1a474b9848bd0fcb851b', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: '8af09317b458fe2f5269094812608a1275a4ec3c', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '61ed479837411e662c313c2f81ea1eea26de4797' }))));
+        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 this; }
     static get watchers() { return {
@@ -682,7 +702,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "close": [64],
         "select": [64],
         "setAriaForm": [64]
-    }, [[0, "balOptionChange", "listenToOptionChange"], [4, "click", "listenOnClickOutside"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "options": ["optionChanged"],
         "value": ["valueChanged"]
     }]);

package/components/bal-file-upload.js

@@ -6,6 +6,7 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$b } from './bal-card2.js';
 import { d as defineCustomElement$a } from './bal-heading2.js';
 import { d as defineCustomElement$9 } from './bal-icon2.js';
@@ -339,16 +340,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { key: 'e1924e378256a4e5f9ef14cb5dec531d1b71ed5b', 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", { key: '5eea726388bf34b30d52ef057be0d02ce55a4a32', class: {
+            } }, h("div", { key: '8ce2bbbf975c8fb0dfa9b177d1a107401b7d0a33', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: '3db76968c7413f788b37eba41df11f398517b2c4', 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", { key: '5e1c43e583d684ca778836c0a209c7ad87e9fa7d', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (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 this; }
     static get watchers() { return {
@@ -380,7 +381,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "reset", "resetHandler"]], {
+    }, undefined, {
         "value": ["onValueChange"]
     }]);
 __decorate([
@@ -389,6 +390,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;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {