@baloise/ds-core 16.8.0 → 17.0.0

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

@@ -1,18 +1,206 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm-cc299511.js';
+import './index-95ee0c4b.js';
+import './index-bba06972.js';
+import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { k as rIC } from './helpers-c201154e.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { m as rIC } from './helpers-72ae7307.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { e as updateBalLanguage } from './config.utils-6ac6c9bd.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './index-82aff103.js';
-import './_commonjsHelpers-1c8beb5f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.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;
 
@@ -98,18 +286,18 @@ const Footer = class {
         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/dist/esm/bal-form-col_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 
 const FormCol = class {
     constructor(hostRef) {
@@ -7,7 +7,7 @@ const FormCol = class {
         this.size = 'full';
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'dcfd707ec14153525343b28de33215360552d67d', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -17,7 +17,7 @@ const FormCol = class {
                 '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 getElement(this); }
 };
@@ -30,7 +30,7 @@ const FormGrid = class {
         registerInstance(this, hostRef);
     }
     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' })));
     }
 };
 FormGrid.style = BalFormGridStyle0;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { s as scrollToFirstInvalidField } from './form-fb8dd9f5.js';
-import { d as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers-c201154e.js';
+import { d as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers-72ae7307.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -31,7 +31,7 @@ const Form = class {
                 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 getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 
@@ -142,7 +142,7 @@ const Heading = class {
         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 getElement(this); }
     static get watchers() { return {
@@ -207,10 +207,10 @@ const Text = class {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", null))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
     }
 };
 Text.style = BalTextStyle0;

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

@@ -1,20 +1,21 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { p as preventDefault } from './utils-9fbab1d3.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { b as balBreakpoints } from './breakpoints.subject-d2b4fd79.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f08ad280.js';
+import { b as balBreakpoints } from './breakpoints.subject-ae98d0fa.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { L as Logger } from './log-dfd1c19f.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './index-82aff103.js';
-import './helpers-c201154e.js';
+import './helpers-72ae7307.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-cada8a2a.js';
+import './tokens.esm-ed9fb455.js';
 
 const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
@@ -161,7 +162,7 @@ const HintText = class {
         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' }))));
     }
 };
 
@@ -174,7 +175,7 @@ const HintTitle = class {
         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' })))));
     }
 };
 
@@ -2064,12 +2065,12 @@ const Popover = class {
             clearTimeout(this.componentDidRenderTimer);
             this.componentDidRenderTimer = setTimeout(() => {
                 var _a;
-                const triggerWidth = (_a = this.element) === null || _a === void 0 ? void 0 : _a.clientWidth;
+                const triggerWidth = (_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth;
                 if (triggerWidth) {
-                    this.element.style.maxWidth = `${triggerWidth}px`;
+                    this.el.style.maxWidth = `${triggerWidth}px`;
                 }
                 else {
-                    this.element.style.maxWidth = `initial`;
+                    this.el.style.maxWidth = `initial`;
                 }
             });
         }
@@ -2087,7 +2088,7 @@ const Popover = class {
     async clickOnOutside(ev) {
         var _a;
         if (this.active) {
-            if (!this.element.contains(ev.target)) {
+            if (!this.el.contains(ev.target)) {
                 this.active = false;
             }
             if ((_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.isEqualNode(ev.target)) {
@@ -2102,7 +2103,7 @@ const Popover = class {
         }
     }
     async tabOutside(ev) {
-        if (ev.key === 'Tab' && !this.element.contains(document.activeElement) && this.active) {
+        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.active) {
             await this.toggle();
         }
     }
@@ -2167,7 +2168,7 @@ const Popover = class {
      * ------------------------------------------------------
      */
     get footMobileNav() {
-        return this.element.closest('[slot="meta-mobile-foot"]');
+        return this.el.closest('[slot="meta-mobile-foot"]');
     }
     get modifierOffset() {
         return {
@@ -2187,13 +2188,13 @@ const Popover = class {
         };
     }
     get triggerElement() {
-        return this.element.querySelector('[bal-popover-trigger]');
+        return this.el.querySelector('[bal-popover-trigger]');
     }
     get menuElement() {
-        return this.element.querySelector('bal-popover-content');
+        return this.el.querySelector('bal-popover-content');
     }
     get menuInnerElement() {
-        return this.element.querySelector('.bal-popover__content__inner');
+        return this.el.querySelector('.bal-popover__content__inner');
     }
     getBackdropHeight() {
         if (balBrowser.hasWindow) {
@@ -2214,13 +2215,13 @@ const Popover = class {
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { ref: el => {
+        return (h(Host, { key: '997e5fefb0e6fe103b1732f084f8a7963eb319e5', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: 'd5cb75c1951b9fe7cfd22ef86ee677461eecf5fc', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", null)));
+            } })), h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
     }
-    get element() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "active": ["activeChanged"]
     }; }
@@ -2231,6 +2232,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handlePopoverPrepare", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "clickOnOutside", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handleKeyUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "tabOutside", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),
@@ -2291,7 +2316,7 @@ const PopoverContent = class {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", null)), h("div", { class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
+import { l as rLCP } from './helpers-72ae7307.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './log-dfd1c19f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './log-dfd1c19f.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -941,6 +942,7 @@ const Icon = class {
             return this.svg || '';
         };
         this.icons = defaultConfig.icons;
+        this.isLargestContentfulPaintDone = false;
         this.name = '';
         this.svg = '';
         this.size = '';
@@ -954,6 +956,15 @@ const Icon = class {
         this.hovered = false;
         this.pressed = false;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -1017,7 +1028,7 @@ const Icon = class {
         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 })) : ('')));
     }
 };
 __decorate([

package/dist/esm/bal-input-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balInputGroupCss = ".bal-input-group{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;border:var(--bal-border-width-normal) solid var(--bal-color-border);border-radius:var(--bal-radius-normal);background:var(--bal-color-white)}.bal-input-group .input{min-height:2.75rem;height:2.75rem;border:none;border-radius:0;background:none !important;padding-left:0;padding-right:0;padding-bottom:calc(.5em - .313rem);padding-top:calc(.5em - .313rem)}.bal-input-group .bal-select__control{border:none;min-height:2.75rem}.bal-input-group .bal-select__control__input{padding-left:0 !important;padding-right:0 !important}.bal-input-group .bal-icon{min-width:3rem}.bal-input-group .bal-tag .bal-icon{min-width:unset}.bal-input-group>*:first-child.bal-select .bal-select__control{padding-left:.625rem}.bal-input-group>*:first-child.bal-input .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input .input{padding-right:.625rem}.bal-input-group>*:first-child.bal-input-date .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input-date .input{padding-right:.625rem}.bal-input-group>*:first-child.input{padding-left:.625rem}.bal-input-group>*:last-child.input{padding-right:.625rem}.bal-input-group>*:last-child.bal-tag{margin-right:.625rem}.bal-input-group>*:first-child.bal-tag{margin-left:.625rem}.bal-input-group.is-hovered,.bal-input-group.is-hovered .input,.bal-input-group.is-hovered .bal-select__control,.bal-input-group:hover,.bal-input-group:hover .input,.bal-input-group:hover .bal-select__control{background:var(--bal-color-grey-1)}.bal-input-group--is-danger,.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group--is-danger svg g,.bal-input-group--is-danger svg path,.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-danger,.bal-input-group.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group.bal-input-group--is-danger svg,.bal-input-group.bal-input-group--is-danger svg g,.bal-input-group.bal-input-group--is-danger svg path,.bal-input-group.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-success,.bal-input-group.bal-input-group--is-success .input{border-color:var(--bal-color-border-success);background:var(--bal-color-success-1)}.bal-input-group.bal-input-group--is-success svg,.bal-input-group.bal-input-group--is-success svg g,.bal-input-group.bal-input-group--is-success svg path,.bal-input-group.bal-input-group--is-success svg circle{fill:var(--bal-color-border-success)}.bal-input-group.bal-input-group--is-warning,.bal-input-group.bal-input-group--is-warning .input{border-color:var(--bal-color-border-warning);background:var(--bal-color-warning-1)}.bal-input-group.bal-input-group--is-warning svg,.bal-input-group.bal-input-group--is-warning svg g,.bal-input-group.bal-input-group--is-warning svg path,.bal-input-group.bal-input-group--is-warning svg circle{fill:var(--bal-color-border-warning)}.bal-input-group.bal-input-group--is-disabled,.bal-input-group.bal-input-group--is-disabled .input{border-color:var(--bal-color-border-grey-dark);background:var(--bal-color-grey-2)}.bal-input-group.bal-input-group--is-disabled svg,.bal-input-group.bal-input-group--is-disabled svg g,.bal-input-group.bal-input-group--is-disabled svg path,.bal-input-group.bal-input-group--is-disabled svg circle{fill:var(--bal-color-border-grey-dark)}.bal-input-group--is-disabled,.bal-input-group--is-disabled .input{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-color-text-grey-dark)}.bal-input-group--is-disabled ::-webkit-input-placeholder,.bal-input-group--is-disabled .input ::-webkit-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-moz-placeholder,.bal-input-group--is-disabled .input ::-moz-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled :-ms-input-placeholder,.bal-input-group--is-disabled .input :-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-ms-input-placeholder,.bal-input-group--is-disabled .input ::-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::placeholder,.bal-input-group--is-disabled .input ::placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled .tag{background-color:var(--bal-color-grey-5)}.bal-input-group--is-disabled .tag span{color:var(--bal-color-text-white)}.bal-input-group--is-disabled .tag .delete{display:none}.bal-input-group:not(.bal-input-group--is-disabled):focus-within{border-color:var(--bal-color-primary)}";
@@ -17,7 +17,7 @@ const InputGroup = class {
         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 getElement(this); }
 };

package/dist/esm/bal-input-slider.entry.js

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -158,11 +160,11 @@ const InputSlider = class {
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (h(Host, { key: 'cbbd2a0e62cc67016f215b13d8d0ca0c5de127b7', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { key: '7b31c11bf1d3423be6b2d7837a0f8ccaafe46daa', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '6a4440695d82c35bf8c8195dc79e5c8c14c91f16', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, h("div", { class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, h("div", { key: '5be6c525ff34e993b27424e5dcfe4d5bc4609ba7', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '3eb1fae3c122c23db8bc05c8f246c23984a8dbfc', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { key: '53ae6ada3c544a543180a21721b6271c36db5c47', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: 'f309f58ec23b5bc31799fcf0e3f5ef6c4cc25039', class: Object.assign({}, inputEl.class()) }, h("div", { key: 'c8d0fc9abf6a2384a44af08e581e3ca4f1115f60', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '67a8fb701b5a6c9122abe42331384a99bd5e636f', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: '8c93968c955d1bdb970e31308240db6e5f3a6795', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: 'f89ab4d7d6b67d976856bbabfb018d474f0bf306', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -170,6 +172,18 @@ const InputSlider = class {
         "value": ["valueChanged"]
     }; }
 };
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputSlider.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], InputSlider.prototype, "resetHandler", null);
 let inputSliderIds = 0;
 InputSlider.style = BalInputSliderStyle0;