@baloise/ds-core 16.8.0 → 17.0.0

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() {

package/components/bal-hint-title2.js

@@ -11,7 +11,7 @@ const HintTitle = /*@__PURE__*/ proxyCustomElement(class HintTitle extends HTMLE
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { class: Object.assign({}, elTitle.class()) }, h("h3", { class: Object.assign({}, elHeading.class()) }, h("span", null, h("slot", null)))));
+        return (h(Host, { key: '8f29a6b15159586bb953a76e446574facc9e258a', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '9edc67f39610f47e3adad25fb931809cef09b908', class: Object.assign({}, elHeading.class()) }, h("span", { key: '30b258cb3ec7ffe8463c7fe5364ab61093611015' }, h("slot", { key: '9b8eb3d881e5393c757362c0e66be4debd4031b4' })))));
     }
 }, [4, "bal-hint-title"]);
 function defineCustomElement() {

package/components/bal-icon2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
+import { l as rLCP } from './helpers.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
@@ -938,6 +939,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
             return this.svg || '';
         };
         this.icons = defaultConfig.icons;
+        this.isLargestContentfulPaintDone = false;
         this.name = '';
         this.svg = '';
         this.size = '';
@@ -951,6 +953,15 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         this.hovered = false;
         this.pressed = false;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -1014,7 +1025,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         const color = this.parseColor();
         const block = BEM.block('icon');
         const svgContent = this.svgContent(this.name);
-        return (h(Host, { "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
+        return (h(Host, { key: '6aa25caeb32d3b55b35b7bc563823b6bcaa477f0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, this.isLargestContentfulPaintDone ? (h("div", { class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })) : ('')));
     }
     static get style() { return BalIconStyle0; }
 }, [0, "bal-icon", {
@@ -1031,6 +1042,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         "hovered": [4],
         "pressed": [4],
         "icons": [32],
+        "isLargestContentfulPaintDone": [32],
         "configChanged": [64]
     }]);
 __decorate([

package/components/bal-input-date2.js

@@ -3,13 +3,13 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { i as inheritAttributes } from './attributes.js';
-import { o as hasParent } from './helpers.js';
+import { q as hasParent } from './helpers.js';
 import { h as hasValueChanged, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { d as dateSeparator } from './index.esm.js';
+import { L as ListenTo } from './listen.js';
 import { N as NUMBER_KEYS } from './keys.constant.js';
 import { I as INVALID_VALUE } from './mask-util.js';
-import { B as BalDate } from './date.js';
+import { d as dateSeparator, B as BalDate } from './date.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
 class MaskPosition {
@@ -989,14 +989,14 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ class: {
+        return (h(Host, { key: 'c19d0b61364480bbcb5067bf0c5d68b83dab6fa7', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'e8cbf0a3372a06823953459eeb754f2c22fc0b22', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'b6acc3e893caf68b4823addac74e4cea27fdc98b', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1026,7 +1026,7 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "reset", "resetHandler"], [6, "click", "listenOnClick"]], {
+    }, undefined, {
         "value": ["valueChanged"]
     }]);
 __decorate([
@@ -1041,6 +1041,18 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], InputDate.prototype, "configChanged", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], InputDate.prototype, "listenOnClick", null);
 let inputDateIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-input-group2.js

@@ -18,7 +18,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", null)));
+        return (h(Host, { key: 'b5038db22ec5c61a3f23e8d49e7e010c1095caf7', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: '190951b467b003b066c34894295a5ef15304353b' })));
     }
     get el() { return this; }
     static get style() { return BalInputGroupStyle0; }