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

package/components/bal-dropdown2.js

@@ -1,15 +1,17 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as areArraysEqual, o as isArrowDownKey, q as isArrowUpKey, i as isEnterKey, s as isEscapeKey, a as isSpaceKey } from './index.esm.js';
 import { B as BEM } from './bem.js';
 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 { k as rIC, b as waitAfterFramePaint, d as waitAfterIdleCallback } from './helpers.js';
-import { l as lodash_isnil } from './index2.js';
-import { c as computePosition, a as autoUpdate, f as flip, s as shift } from './floating-ui.dom.esm.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 { 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';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
@@ -212,7 +214,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 {
@@ -232,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`,
@@ -260,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());
@@ -405,6 +410,20 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         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
          * ------------------------------------------------------
@@ -527,18 +546,33 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     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']);
@@ -562,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
      * ------------------------------------------------------
@@ -631,7 +656,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
      */
     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 this; }
     static get watchers() { return {
@@ -677,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-field-control.js

@@ -23,14 +23,14 @@ const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends
         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));
     }
 }, [6, "bal-field-control", {
         "iconRight": [1, "icon-right"],

package/components/bal-field-hint.js

@@ -20,7 +20,7 @@ const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLE
     }
     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' })))));
     }
 }, [6, "bal-field-hint", {
         "subject": [1],

package/components/bal-field-label.js

@@ -36,7 +36,7 @@ const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTM
      * ------------------------------------------------------
      */
     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 this; }
 }, [6, "bal-field-label", {

package/components/bal-field-message.js

@@ -19,14 +19,14 @@ const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends
         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' })));
     }
 }, [4, "bal-field-message", {
         "color": [1],

package/components/bal-field.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { e as deepReady, b as waitAfterFramePaint } from './helpers.js';
+import { f as deepReady, b as waitAfterFramePaint } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 
@@ -19,7 +19,6 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-number-input',
             'bal-textarea',
             'bal-select',
-            'bal-datepicker',
             'bal-checkbox',
             'bal-radio',
             'bal-input-group',
@@ -125,7 +124,6 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             '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',
@@ -175,12 +173,12 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         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 this; }
     static get watchers() { return {

package/components/bal-file-upload.js

@@ -1,11 +1,12 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as areArraysEqual } from './index.esm.js';
-import { s as stopEventBubbling, c as inputHandleHostClick, b as inputHandleFocus, e as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { a as areArraysEqual } from './array.js';
+import { s as stopEventBubbling, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 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, { 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 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") {

package/components/bal-footer.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { u as loadFooterLinks, v as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import './array.js';
+import './index4.js';
+import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { k as rIC } from './helpers.js';
+import { o as rIC } from './helpers.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { d as defineCustomElement$8 } from './bal-checkbox2.js';
 import { d as defineCustomElement$7 } from './bal-dropdown2.js';
@@ -16,6 +18,194 @@ import { e as updateBalLanguage } from './config.utils.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
+var lodash_isdate = {exports: {}};
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+(function (module, exports) {
+/** `Object#toString` result references. */
+var dateTag = '[object Date]';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `exports`. */
+var freeExports = exports && !exports.nodeType && exports;
+
+/** Detect free variable `module`. */
+var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+/** Detect the popular CommonJS extension `module.exports`. */
+var moduleExports = freeModule && freeModule.exports === freeExports;
+
+/** Detect free variable `process` from Node.js. */
+var freeProcess = moduleExports && freeGlobal.process;
+
+/** Used to access faster Node.js helpers. */
+var nodeUtil = (function() {
+  try {
+    return freeProcess && freeProcess.binding('util');
+  } catch (e) {}
+}());
+
+/* Node.js helper references. */
+var nodeIsDate = nodeUtil && nodeUtil.isDate;
+
+/**
+ * The base implementation of `_.unary` without support for storing metadata.
+ *
+ * @private
+ * @param {Function} func The function to cap arguments for.
+ * @returns {Function} Returns the new capped function.
+ */
+function baseUnary(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/**
+ * The base implementation of `_.isDate` without Node.js optimizations.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a date object, else `false`.
+ */
+function baseIsDate(value) {
+  return isObjectLike(value) && objectToString.call(value) == dateTag;
+}
+
+/**
+ * Checks if `value` is classified as a `Date` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a date object, else `false`.
+ * @example
+ *
+ * _.isDate(new Date);
+ * // => true
+ *
+ * _.isDate('Mon April 23 2012');
+ * // => false
+ */
+var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+module.exports = isDate;
+}(lodash_isdate, lodash_isdate.exports));
+
+var RequestState;
+(function (RequestState) {
+    RequestState[RequestState["INIT"] = 0] = "INIT";
+    RequestState[RequestState["RUNNING"] = 1] = "RUNNING";
+    RequestState[RequestState["SUCCESS"] = 2] = "SUCCESS";
+    RequestState[RequestState["ERROR"] = 3] = "ERROR";
+})(RequestState || (RequestState = {}));
+
+class Language {
+    constructor(key) {
+        this.key = key;
+    }
+}
+
+new Language('de');
+new Language('fr');
+new Language('it');
+new Language('en');
+new Language('nl');
+new Language('lb');
+
+const INTEGRATION_BASE_URL = 'https://www.baloise.ch';
+const INTEGRATION_BASE_PATH = '/app-integration';
+const getIntegrationBaseUrl = () => {
+    const host = getHost();
+    if (host && host.indexOf('www.baloise.ch') >= 0) {
+        return `https://${host}`;
+    }
+    return INTEGRATION_BASE_URL;
+};
+const getIntegrationUrl = (lang, region = 'CH', type = IntegrationType.FOOTER, version = 'v2') => {
+    let langPath = lang.key;
+    if (type === IntegrationType.ONETRUST) {
+        langPath = 'all';
+    }
+    else {
+        if (region === 'DE') {
+            langPath = 'de';
+        }
+    }
+    return `${getIntegrationBaseUrl()}${INTEGRATION_BASE_PATH}/${version}/${region.toLowerCase()}/${type}/${langPath}.json`;
+};
+const getHost = () => { var _a; return ((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host) || undefined; };
+var IntegrationType;
+(function (IntegrationType) {
+    IntegrationType["FOOTER"] = "footer";
+    IntegrationType["SOCIAL_MEDIA"] = "socialmediachannels";
+    IntegrationType["ONETRUST"] = "onetrust";
+})(IntegrationType || (IntegrationType = {}));
+
+const loadFooterLinks = (lang, region = 'CH') => {
+    const url = getIntegrationUrl(lang, region, IntegrationType.FOOTER);
+    return fetch(url)
+        .then(res => res.json())
+        .then(res => res);
+};
+
+const loadSocialMediaLinks = (lang, region = 'CH') => {
+    const url = getIntegrationUrl(lang, region, IntegrationType.SOCIAL_MEDIA, 'v1');
+    return fetch(url)
+        .then(res => res.json())
+        .then(res => res);
+};
+
 const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}bal-footer{--bal-dropdown-control-background:transparent;--bal-dropdown-control-input-background:transparent;--bal-dropdown-control-border-color:transparent;--bal-dropdown-popover-empty-text-color:var(--bal-color-white);--bal-dropdown-control-text-color:var(--bal-color-white);--bal-dropdown-control-text-color-focused:var(---bal-color-white)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__list{min-width:105%;right:0 !important;left:auto !important}.bal-footer__inner__wrapper__header-container__language bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer;min-width:auto !important}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear circle{fill:var(--bal-color-white)}.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__root__content{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__root__content{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group{background:rgba(0,0,0,0);border:none;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group:hover{background:rgba(0,0,0,0) !important}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group bal-dropdown{min-width:5rem}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
 const BalFooterStyle0 = balFooterCss;
 
@@ -102,18 +292,18 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         elLanguage.element('icon');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("footer", { class: Object.assign({}, elInner.class()) }, h("div", { class: Object.assign({}, elInnerWrapper.class()) }, h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { class: Object.assign({}, elLogo.class()) }, h("bal-logo", { color: "white" })), h("div", { class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: '92247adf5c1f59dd1dd83184368dcf6bd34d7a67', class: Object.assign({}, block.class()) }, h("footer", { key: '41a39bb0693ff7d61d6cf331dbd91d1923feed24', class: Object.assign({}, elInner.class()) }, h("div", { key: 'd68120abd008a0a2746c00a055037bc4e2b21865', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'b61b0e9cc643139dfeb7f935b8a29beb50e9dda6', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '41a5007f0e8a4069d540c34cf3603b732ab1f2e4', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '97df5a202cd54287a97343b304e895b096c6c454', color: "white" })), h("div", { key: 'e93ac339f277de74477fc598eb6a1628dd9d70d4', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
+            } }, h("div", { key: 'c9dede4f4cd0d9e62a533632422e07e912df22e1', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '7666a59e6f1a78b5c6c77c2e4f97cfc698ad59cc' }, h("bal-icon", { key: 'fd170603ffd0c8ba4debdf9cad85bfce0741a444', class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
                 var _a;
                 stopEventBubbling(el);
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.open();
-            } }), h("bal-dropdown", { ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("div", { class: Object.assign({}, elSlot.class()) }, h("slot", null)), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }), h("bal-dropdown", { key: '4fcc14f8473e4a35b1fd0f5df6ce550b611c5d84', ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("div", { key: '16878b31dfaec22a49c3dbd7369a6527f0890e42', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'e4855a9897a36f4bdb6759e29337e234658eb3dc' })), h("div", { key: '4ce76b3d2c4b1bb672a0c059f773d30beffdbd4b', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '4a1f975285422c0fce884e087416053830b73d57', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '3cd4ce1eb946f2de35ebd6683f127c17f669e92c', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

package/components/bal-form-col.js

@@ -8,7 +8,7 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
         this.size = 'full';
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'dcfd707ec14153525343b28de33215360552d67d', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -18,7 +18,7 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'eb9686534cb834601ec756657e8576dc0aaac9b4' })));
     }
     get el() { return this; }
 }, [4, "bal-form-col", {

package/components/bal-form-grid.js

@@ -9,7 +9,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", null)));
+        return (h(Host, { key: '35f3c7ca48f2c64d89c90909bca5894d6f578e64', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'dde03d5928d665ada0f41230ff6c01e8f20c1dd1' })));
     }
     static get style() { return BalFormGridStyle0; }
 }, [4, "bal-form-grid"]);

package/components/bal-form.js

@@ -29,7 +29,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, null, h(NativeEl, Object.assign({}, attrs, { class: this.formClass }), h("slot", null))));
+        return (h(Host, { key: '6e18df8ae00274664abd91bce9318de7c9fbd1e3' }, h(NativeEl, Object.assign({ key: '48bee97b1a0e11629d70a562ff7020cb753a258a' }, attrs, { class: this.formClass }), h("slot", { key: '8dae2c5837fead69d624ae443934bb7fa6f7dfe8' }))));
     }
     get el() { return this; }
     static get style() { return BalFormStyle0; }

package/components/bal-heading2.js

@@ -143,7 +143,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", null))));
+        return (h(Host, { key: '8086cde36ed3f4ca517135aad6210dccc9e59039', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '7ed342b861b33bdcb93daec513e593c531e891b5', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'b189e37f7d994616493e86512f6748c85d00ba18' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-hint-text2.js

@@ -11,7 +11,7 @@ const HintText = /*@__PURE__*/ proxyCustomElement(class HintText extends HTMLEle
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { class: Object.assign({}, elText.class()) }, h("p", { class: Object.assign({}, elTextField.class()) }, h("slot", null))));
+        return (h(Host, { key: '10515eb783c2a6feba7f88cc419e7cfa57295231', class: Object.assign({}, elText.class()) }, h("p", { key: '5a2c68d72075d729f72527e2bf6a7afcfa18c29e', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '8da0f8ccdb88e88206c2b87ccae42d2636fc5586' }))));
     }
 }, [4, "bal-hint-text"]);
 function defineCustomElement() {