@baloise/ds-core 16.1.0 → 16.2.0

package/dist/collection/collection-manifest.json

@@ -228,11 +228,6 @@
         "bal-time-input"
       ]
     },
-    {
-      "components": [
-        "bal-notices"
-      ]
-    },
     {
       "components": [
         "bal-notification"
@@ -243,16 +238,6 @@
         "bal-sheet"
       ]
     },
-    {
-      "components": [
-        "bal-snackbar"
-      ]
-    },
-    {
-      "components": [
-        "bal-toast"
-      ]
-    },
     {
       "components": [
         "bal-button",
@@ -333,6 +318,13 @@
         "bal-modal-header"
       ]
     },
+    {
+      "components": [
+        "bal-notices",
+        "bal-snackbar",
+        "bal-toast"
+      ]
+    },
     {
       "components": [
         "bal-accordion",

package/dist/collection/components/bal-date/bal-date.js

@@ -93,6 +93,7 @@ export class Date {
         this.maxYearProp = undefined;
         this.defaultDate = undefined;
         this.allowedDates = undefined;
+        this.allowInvalidValue = false;
         this.debounce = 0;
         this.autoInvalidOff = false;
     }
@@ -264,7 +265,7 @@ export class Date {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     static get is() { return "bal-date"; }
     static get originalStyleUrls() {
@@ -381,7 +382,7 @@ export class Date {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` there will be on trigger icon visible"
+                    "text": "If `true` there will be no trigger icon visible, so no UX indicator for a picker"
                 },
                 "attribute": "free-solo",
                 "reflect": false,
@@ -564,6 +565,24 @@ export class Date {
                 },
                 "defaultValue": "undefined"
             },
+            "allowInvalidValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid."
+                },
+                "attribute": "allow-invalid-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "debounce": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/bal-footer/bal-footer.css

@@ -1 +1 @@
-: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{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;user-select:auto}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);color:var(--bal-footer-color);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,.bal-footer__inner p{color:var(--bal-footer-color)}.bal-footer__inner__wrapper{display:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;align-items:center}.bal-footer__inner__wrapper__header-container__language:hover bal-icon svg,.bal-footer__inner__wrapper__header-container__language:hover bal-icon g,.bal-footer__inner__wrapper__header-container__language:hover bal-icon path,.bal-footer__inner__wrapper__header-container__language:hover bal-icon circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active bal-icon svg,.bal-footer__inner__wrapper__header-container__language:active bal-icon g,.bal-footer__inner__wrapper__header-container__language:active bal-icon path,.bal-footer__inner__wrapper__header-container__language:active bal-icon circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper{width:5rem}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group{background:rgba(0,0,0,0);border:none}.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-icon{min-width:.75rem !important}.bal-footer__inner__wrapper__header-container__logo{display:flex;align-items:center}.bal-footer__inner__wrapper__links-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}
+: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{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;user-select:auto}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);color:var(--bal-footer-color);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,.bal-footer__inner p{color:var(--bal-footer-color)}.bal-footer__inner__wrapper{display:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;align-items:center}.bal-footer__inner__wrapper__header-container__language bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer}.bal-footer__inner__wrapper__header-container__language:hover bal-icon svg,.bal-footer__inner__wrapper__header-container__language:hover bal-icon g,.bal-footer__inner__wrapper__header-container__language:hover bal-icon path,.bal-footer__inner__wrapper__header-container__language:hover bal-icon circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active bal-icon svg,.bal-footer__inner__wrapper__header-container__language:active bal-icon g,.bal-footer__inner__wrapper__header-container__language:active bal-icon path,.bal-footer__inner__wrapper__header-container__language:active bal-icon circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper{width:5rem}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group{background:rgba(0,0,0,0);border:none}.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-icon{min-width:.75rem !important}.bal-footer__inner__wrapper__header-container__logo{display:flex;align-items:center}.bal-footer__inner__wrapper__links-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}

package/dist/collection/components/bal-footer/bal-footer.js

@@ -5,6 +5,7 @@ import { defaultConfig, ListenToConfig, updateBalLanguage, } from "../../utils/c
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { rIC } from "../../utils/helpers";
+import { stopEventBubbling } from "../../utils/form-input";
 export class Footer {
     constructor() {
         this.links = [];
@@ -87,7 +88,11 @@ export class Footer {
         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: {
                 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: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), 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("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white", onClick: el => {
+                var _a;
+                stopEventBubbling(el);
+                (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.open();
+            } }), h("bal-select", { 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-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { 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,

package/dist/collection/components/bal-input/bal-input-date/bal-input-date.js

@@ -31,6 +31,7 @@ export class InputDate {
         this.hasIconRight = false;
         this.value = undefined;
         this.autoInvalidOff = false;
+        this.allowInvalidValue = false;
     }
     createLogger(log) {
         this.log = log;
@@ -366,6 +367,24 @@ export class InputDate {
                 "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "allowInvalidValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid."
+                },
+                "attribute": "allow-invalid-value",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/bal-select/bal-select.js

@@ -811,7 +811,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` there will be on trigger icon visible"
+                    "text": "If `true` there will be no trigger icon visible, so no UX indicator for a popup"
                 },
                 "attribute": "free-solo",
                 "reflect": false,

package/dist/collection/index.js

@@ -41,6 +41,7 @@ export { balBreakpoints, balBreakpointSubject, BalBreakpointSubject, BalBreakpoi
 export { balOrientationSubject, BalOrientationSubject, } from './utils/orientation';
 export { BalSwipeSubject } from './utils/swipe';
 export { BalDate } from './utils/date';
+export { INVALID_VALUE } from './utils/mask/mask-util';
 /**
  * Controllers
  */

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.1.0';
+export const VERSION = '16.2.0';

package/dist/collection/utils/mask/__test__/mask-component.mock.js

@@ -1,6 +1,7 @@
 export class MaskComponentMock {
     constructor() {
         this.value = undefined;
+        this.allowInvalidValue = false;
         this.inputValue = undefined;
         this.initialValue = '';
         this.focused = false;

package/dist/collection/utils/mask/context/mask-context.js

@@ -7,6 +7,7 @@ export class MaskContext {
             this._value = this._options.component.nativeInput.value;
         }
         this.position = new MaskPosition(this._options);
+        this.component = this._options.component;
     }
     get target() {
         if (this._options.component && this._options.component.nativeInput) {

package/dist/collection/utils/mask/mask-util.js

@@ -0,0 +1 @@
+export const INVALID_VALUE = 'INVALID_VALUE';

package/dist/collection/utils/mask/mask.js

@@ -81,7 +81,7 @@ export class AbstractMask {
         context.value = inputValue;
         context.position.toEnd();
     }
-    onParseValue(inputValue) {
+    onParseValue(inputValue, options = { allowInvalidValue: false }) {
         if (inputValue) {
             return inputValue.trim();
         }
@@ -146,7 +146,7 @@ export class AbstractMask {
             }
             else {
                 this.onBlur(context);
-                context.submit('blur', this.onParseValue(context.value));
+                context.submit('blur', this.onParseValue(context.value, { allowInvalidValue: context.component.allowInvalidValue }));
             }
         }
     }

package/dist/collection/utils/mask/types/mask-date.js

@@ -3,6 +3,7 @@ import { NUMBER_KEYS } from "../../constants/keys.constant";
 import { MaskBlock } from "../blocks";
 import { AbstractMask } from "../mask";
 import { BalDate } from "../../date";
+import { INVALID_VALUE } from "../mask-util";
 export class DateMask extends AbstractMask {
     constructor() {
         super([
@@ -81,12 +82,15 @@ export class DateMask extends AbstractMask {
             fi: 'V',
         };
     }
-    onParseValue(inputValue) {
+    onParseValue(inputValue, options = { allowInvalidValue: false }) {
         if (inputValue) {
             const date = BalDate.fromAnyFormat(this.blocks.getRawValueWithoutMask(inputValue));
             if (date.isValid) {
                 return date.toISODate();
             }
+            else if (options && options.allowInvalidValue) {
+                return INVALID_VALUE;
+            }
         }
         return '';
     }
@@ -116,5 +120,10 @@ export class DateMask extends AbstractMask {
                 context.value = formattedDate;
             }
         }
+        else if (context.component.allowInvalidValue) {
+            if (rawValue !== context.value) {
+                context.value = rawValue;
+            }
+        }
     }
 }

package/dist/collection/utils/scroll.js

@@ -60,7 +60,7 @@ export class BalScrollHandler {
         }
     }
     disable() {
-        if (this.target) {
+        if (!this.disabled && this.target) {
             if (balBrowser.hasWindow && balBrowser.hasDocument) {
                 this.x = window.pageXOffset || document.documentElement.scrollLeft;
                 this.y = window.pageYOffset || document.documentElement.scrollTop;

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

@@ -3,12 +3,12 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as raf } from './helpers-c201154e.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { s as stopEventBubbling } from './form-input-28a08ec5.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-021fbaf0.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-dad33c75.js';
 import { g as getComputedWidth } from './style-ca1bd202.js';
 import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
 import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
 import { L as ListenToResize } from './resize.decorator-f70563b5.js';
-import { b as balBreakpoints } from './breakpoints.subject-ef464f89.js';
+import { b as balBreakpoints } from './breakpoints.subject-ba72fe99.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
@@ -18,7 +18,7 @@ import './config.utils-6ac6c9bd.js';
 import './listener-04842ae9.js';
 import './swipe.subject-f1d64e8d.js';
 import './device-8c6d2881.js';
-import './tokens.esm-aab9bd61.js';
+import './tokens.esm-366a5b1e.js';
 import './log-dfd1c19f.js';
 
 const TabControl = ({ value, items, onControlChange }) => {

package/dist/esm/bal-date-calendar_2.entry.js

@@ -13,6 +13,7 @@ import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
+import { I as INVALID_VALUE } from './mask-util-71edc2b8.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './config.utils-6ac6c9bd.js';
 import './browser-a8073d92.js';
@@ -548,6 +549,7 @@ class MaskContext {
             this._value = this._options.component.nativeInput.value;
         }
         this.position = new MaskPosition(this._options);
+        this.component = this._options.component;
     }
     get target() {
         if (this._options.component && this._options.component.nativeInput) {
@@ -917,7 +919,7 @@ class AbstractMask {
         context.value = inputValue;
         context.position.toEnd();
     }
-    onParseValue(inputValue) {
+    onParseValue(inputValue, options = { allowInvalidValue: false }) {
         if (inputValue) {
             return inputValue.trim();
         }
@@ -982,7 +984,7 @@ class AbstractMask {
             }
             else {
                 this.onBlur(context);
-                context.submit('blur', this.onParseValue(context.value));
+                context.submit('blur', this.onParseValue(context.value, { allowInvalidValue: context.component.allowInvalidValue }));
             }
         }
     }
@@ -1172,12 +1174,15 @@ class DateMask extends AbstractMask {
             fi: 'V',
         };
     }
-    onParseValue(inputValue) {
+    onParseValue(inputValue, options = { allowInvalidValue: false }) {
         if (inputValue) {
             const date = BalDate.fromAnyFormat(this.blocks.getRawValueWithoutMask(inputValue));
             if (date.isValid) {
                 return date.toISODate();
             }
+            else if (options && options.allowInvalidValue) {
+                return INVALID_VALUE;
+            }
         }
         return '';
     }
@@ -1207,6 +1212,11 @@ class DateMask extends AbstractMask {
                 context.value = formattedDate;
             }
         }
+        else if (context.component.allowInvalidValue) {
+            if (rawValue !== context.value) {
+                context.value = rawValue;
+            }
+        }
     }
 }
 
@@ -1366,6 +1376,7 @@ const InputDate = class {
         this.hasIconRight = false;
         this.value = undefined;
         this.autoInvalidOff = false;
+        this.allowInvalidValue = false;
     }
     createLogger(log) {
         this.log = log;

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

@@ -112,6 +112,7 @@ const Date = class {
         this.maxYearProp = undefined;
         this.defaultDate = undefined;
         this.allowedDates = undefined;
+        this.allowInvalidValue = false;
         this.debounce = 0;
         this.autoInvalidOff = false;
     }
@@ -283,7 +284,7 @@ const Date = class {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -12,16 +12,16 @@ import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { d as defaultConfig, a as defaultLocale } from './config.default-7efdc82d.js';
-import { b as balBreakpoints } from './breakpoints.subject-ef464f89.js';
+import { b as balBreakpoints } from './breakpoints.subject-ba72fe99.js';
 import { g as useBalConfig } from './config.utils-6ac6c9bd.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-021fbaf0.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-dad33c75.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-aab9bd61.js';
+import './tokens.esm-366a5b1e.js';
 
 /**
  * @name addDays

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

@@ -4,6 +4,7 @@ import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from '
 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-28a08ec5.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';
@@ -12,7 +13,7 @@ import './_commonjsHelpers-1c8beb5f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 
-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{-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__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);color:var(--bal-footer-color);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,.bal-footer__inner p{color:var(--bal-footer-color)}.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:hover bal-icon svg,.bal-footer__inner__wrapper__header-container__language:hover bal-icon g,.bal-footer__inner__wrapper__header-container__language:hover bal-icon path,.bal-footer__inner__wrapper__header-container__language:hover bal-icon circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active bal-icon svg,.bal-footer__inner__wrapper__header-container__language:active bal-icon g,.bal-footer__inner__wrapper__header-container__language:active bal-icon path,.bal-footer__inner__wrapper__header-container__language:active bal-icon circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper{width:5rem}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group{background:rgba(0,0,0,0);border:none}.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-icon{min-width:.75rem !important}.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 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{-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__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);color:var(--bal-footer-color);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,.bal-footer__inner p{color:var(--bal-footer-color)}.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-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer}.bal-footer__inner__wrapper__header-container__language:hover bal-icon svg,.bal-footer__inner__wrapper__header-container__language:hover bal-icon g,.bal-footer__inner__wrapper__header-container__language:hover bal-icon path,.bal-footer__inner__wrapper__header-container__language:hover bal-icon circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active bal-icon svg,.bal-footer__inner__wrapper__header-container__language:active bal-icon g,.bal-footer__inner__wrapper__header-container__language:active bal-icon path,.bal-footer__inner__wrapper__header-container__language:active bal-icon circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper{width:5rem}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group{background:rgba(0,0,0,0);border:none}.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-icon{min-width:.75rem !important}.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;
 
 const Footer = class {
@@ -98,7 +99,11 @@ const Footer = class {
         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: {
                 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: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), 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("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white", onClick: el => {
+                var _a;
+                stopEventBubbling(el);
+                (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.open();
+            } }), h("bal-select", { 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-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { 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,

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

@@ -2,9 +2,9 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-b6
 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-972c7ce5.js';
-import { b as balBreakpoints } from './breakpoints.subject-ef464f89.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-021fbaf0.js';
+import { B as BalScrollHandler } from './scroll-e341d95b.js';
+import { b as balBreakpoints } from './breakpoints.subject-ba72fe99.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-dad33c75.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './index-82aff103.js';
 import './browser-a8073d92.js';
@@ -13,7 +13,7 @@ import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-aab9bd61.js';
+import './tokens.esm-366a5b1e.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;