@baloise/ds-core 16.1.0 → 16.2.0-nightly.20240520

package/dist/collection/collection-manifest.json

@@ -114,7 +114,8 @@
     "components/bal-textarea/bal-textarea.js",
     "components/bal-time-input/bal-time-input.js",
     "components/bal-toast/bal-toast.js",
-    "components/bal-tooltip/bal-tooltip.js"
+    "components/bal-tooltip/bal-tooltip.js",
+    "components/docs/bal-doc-app/bal-doc-app.js"
   ],
   "compiler": {
     "name": "@stencil/core",
@@ -228,11 +229,6 @@
         "bal-time-input"
       ]
     },
-    {
-      "components": [
-        "bal-notices"
-      ]
-    },
     {
       "components": [
         "bal-notification"
@@ -243,16 +239,6 @@
         "bal-sheet"
       ]
     },
-    {
-      "components": [
-        "bal-snackbar"
-      ]
-    },
-    {
-      "components": [
-        "bal-toast"
-      ]
-    },
     {
       "components": [
         "bal-button",
@@ -333,6 +319,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,