@baloise/ds-core 19.3.0 → 19.4.0

package/components/bal-field-label.js

@@ -5,13 +5,45 @@ const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTM
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the for attribute must be a single id for a labeled
+         * form-related element in the same document as the <label> element.
+         * So, any given label element can be associated with only one form control.
+         */
         this.htmlFor = undefined;
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
         this.required = true;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = undefined;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
         this.disabled = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
         this.readonly = undefined;
+        /**
+         * Defines the size of the font. Default is like a heading 5 and small is used
+         * with the form fields.
+         */
         this.size = 'small';
+        /**
+         * Defines the font weight of the label.
+         */
         this.weight = 'bold';
     }
     /**

package/components/bal-field-message.js

@@ -6,10 +6,25 @@ const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends
         super();
         this.__registerHost();
         this.ariaForm = defaultBalAriaForm;
+        /**
+         * Defines the color of the message.
+         */
         this.color = '';
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = false;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
         this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
         this.readonly = false;
     }
     /**

package/components/bal-field.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
 import { d as deepReady, b as waitAfterFramePaint } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
 
 const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
-const BalFieldStyle0 = balFieldCss;
 
 const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
     constructor() {
@@ -31,6 +30,35 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
+        this.required = undefined;
+        /**
+         * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
+         */
+        this.horizontal = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true` the component gets a valid green style.
+         */
+        this.valid = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
+        this.loading = undefined;
         this.isDirectChild = (el) => {
             if (!el) {
                 return false;
@@ -71,13 +99,6 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
                 .flat();
         };
         this.mutationObserverActive = true;
-        this.required = undefined;
-        this.horizontal = false;
-        this.invalid = undefined;
-        this.valid = false;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.loading = undefined;
     }
     requiredHandler() {
         this.updateProps([...this.inputElements, 'bal-field-label'], 'required');
@@ -189,7 +210,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         "readonly": ["readonlyHandler"],
         "loading": ["loadingHandler"]
     }; }
-    static get style() { return BalFieldStyle0; }
+    static get style() { return balFieldCss; }
 }, [4, "bal-field", {
         "required": [4],
         "horizontal": [4],

package/components/bal-file-upload.js

@@ -3,6 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as areArraysEqual } from './array.js';
 import { s as stopEventBubbling, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { L as Logger } from './log.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 import { d as defaultBalAriaForm } from './form.js';
@@ -22,37 +23,56 @@ var lib = {};
 
 var spec = {};
 
-Object.defineProperty(spec, "__esModule", { value: true });
-var si = { radix: 1e3, unit: ['b', 'kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
-var iec = { radix: 1024, unit: ['b', 'Kib', 'Mib', 'Gib', 'Tib', 'Pib', 'Eib', 'Zib', 'Yib'] };
-var jedec = { radix: 1024, unit: ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
-spec.SPECS = {
-    si: si,
-    iec: iec,
-    jedec: jedec,
-};
+var hasRequiredSpec;
 
-Object.defineProperty(lib, "__esModule", { value: true });
-var spec_1 = spec;
-/**
- * file size
- * @param bytes
- * @param fixed
- * @param spec
- */
-function default_1(bytes, fixed, spec) {
-    if (fixed === void 0) { fixed = 1; }
-    bytes = Math.abs(bytes);
-    var _a = spec_1.SPECS[spec] || spec_1.SPECS['jedec'], radix = _a.radix, unit = _a.unit;
-    var loop = 0;
-    // calculate
-    while (bytes >= radix) {
-        bytes /= radix;
-        ++loop;
-    }
-    return bytes.toFixed(fixed) + " " + unit[loop];
+function requireSpec () {
+	if (hasRequiredSpec) return spec;
+	hasRequiredSpec = 1;
+	Object.defineProperty(spec, "__esModule", { value: true });
+	var si = { radix: 1e3, unit: ['b', 'kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
+	var iec = { radix: 1024, unit: ['b', 'Kib', 'Mib', 'Gib', 'Tib', 'Pib', 'Eib', 'Zib', 'Yib'] };
+	var jedec = { radix: 1024, unit: ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
+	spec.SPECS = {
+	    si: si,
+	    iec: iec,
+	    jedec: jedec,
+	};
+	
+	return spec;
 }
-var _default = lib.default = default_1;
+
+var hasRequiredLib;
+
+function requireLib () {
+	if (hasRequiredLib) return lib;
+	hasRequiredLib = 1;
+	Object.defineProperty(lib, "__esModule", { value: true });
+	var spec_1 = requireSpec();
+	/**
+	 * file size
+	 * @param bytes
+	 * @param fixed
+	 * @param spec
+	 */
+	function default_1(bytes, fixed, spec) {
+	    if (fixed === void 0) { fixed = 1; }
+	    bytes = Math.abs(bytes);
+	    var _a = spec_1.SPECS[spec] || spec_1.SPECS['jedec'], radix = _a.radix, unit = _a.unit;
+	    var loop = 0;
+	    // calculate
+	    while (bytes >= radix) {
+	        bytes /= radix;
+	        ++loop;
+	    }
+	    return bytes.toFixed(fixed) + " " + unit[loop];
+	}
+	lib.default = default_1;
+	
+	return lib;
+}
+
+var libExports = requireLib();
+var fileSize = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
 const bemListEl = BEM.block('file-upload').element('list');
 const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
@@ -62,7 +82,7 @@ const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
                 h("bal-icon", { name: "document" })),
             h("bal-list-item-content", null,
                 h("bal-list-item-title", null, file.name),
-                h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : _default(file.size))),
+                h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : fileSize(file.size))),
             h("bal-list-item-icon", { right: true, class: {
                     'file-remove': true,
                     'is-clickable': !disabled,
@@ -135,7 +155,6 @@ const validateFileArray = (state, files, fileOptions) => {
 };
 
 const balFileUploadCss = ".bal-file-upload{display:block;position:static;width:100%}.bal-file-upload .file-label{word-break:break-word;white-space:normal}.bal-file-upload .bal-heading{word-break:break-all}.bal-file-upload__card{margin-top:var(--bal-space-normal)}.bal-file-upload__list{padding:0 !important}";
-const BalFileUploadStyle0 = balFileUploadCss;
 
 const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTMLElement {
     constructor() {
@@ -149,7 +168,58 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         this.balBlur = createEvent(this, "balBlur", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.fileUploadId = `bal-file-upload-${FileUploadIds++}`;
+        this.files = [];
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.fileUploadId;
+        /**
+         * Input value.
+         */
+        this.value = [];
         this.initialValue = this.value || [];
+        /**
+         * Label of the drop area.
+         */
+        this.label = 'Choose or drop a file...';
+        /**
+         * If `true` multiple file upload is possible.
+         */
+        this.multiple = true;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the file upload is disabled and shows a spinner
+         */
+        this.loading = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true` below the drop-down area it generates a file list.
+         */
+        this.hasFileList = true;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -239,25 +309,6 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
             }
             this.balInputClick.emit(ev);
         };
-        this.files = [];
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.fileUploadId;
-        this.value = [];
-        this.label = 'Choose or drop a file...';
-        this.multiple = true;
-        this.disabled = false;
-        this.readonly = false;
-        this.loading = false;
-        this.required = false;
-        this.accept = undefined;
-        this.maxFiles = undefined;
-        this.maxFileSize = undefined;
-        this.maxBundleSize = undefined;
-        this.hasFileList = true;
-        this.invalid = false;
-        this.subTitle = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -355,7 +406,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
     static get watchers() { return {
         "value": ["onValueChange"]
     }; }
-    static get style() { return BalFileUploadStyle0; }
+    static get style() { return balFileUploadCss; }
 }, [0, "bal-file-upload", {
         "name": [1],
         "value": [16],
@@ -371,7 +422,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         "maxBundleSize": [2, "max-bundle-size"],
         "hasFileList": [4, "has-file-list"],
         "invalid": [4],
-        "subTitle": [16],
+        "subTitle": [16, "sub-title"],
         "autoInvalidOff": [516, "auto-invalid-off"],
         "files": [32],
         "focused": [32],

package/components/bal-footer.js

@@ -1,14 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+import { e as updateBalLanguage } from './config.utils.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { p as rIC } from './helpers.js';
+import { m as rIC } from './helpers.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
-import { e as updateBalLanguage } from './config.utils.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalFooter = {
     en: {
@@ -44,7 +44,6 @@ const i18nBalFooter = {
 };
 
 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__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__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select{padding-left:2px;padding-right:2px;background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-color-white);font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select option{background:var(--bal-color-white) !important;color:var(--bal-color-primary) !important;font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.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 = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
@@ -55,9 +54,25 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.allowedLanguages = defaultConfig.allowedLanguages;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the legal Baloise links will be hidden.
+         */
         this.hideLinks = false;
+        /**
+         * If provided, the footer links will be overridden.
+         */
         this.overrideLinks = undefined;
+        /**
+         * If `true` the social media links will be shown.
+         */
         this.showSocialMedia = false;
+        /**
+         * If `true` the language selection will be hidden.
+         */
         this.hideLanguageSelection = false;
     }
     createLogger(log) {
@@ -144,10 +159,10 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
                 'is-light': true,
             } }, link.label)))))))));
     }
-    static get style() { return BalFooterStyle0; }
+    static get style() { return balFooterCss; }
 }, [4, "bal-footer", {
         "hideLinks": [4, "hide-links"],
-        "overrideLinks": [16],
+        "overrideLinks": [16, "override-links"],
         "showSocialMedia": [4, "show-social-media"],
         "hideLanguageSelection": [4, "hide-language-selection"],
         "links": [32],

package/components/bal-form-grid.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:.25rem}@media screen and (min-width: 1024px){.bal-form-grid{-ms-flex-direction:row;flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}";
-const BalFormGridStyle0 = balFormGridCss;
 
 const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLElement {
     constructor() {
@@ -11,7 +10,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
     render() {
         return (h(Host, { key: '7dd05e54b6f2070956b4630a542c249734981731', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'd9490a9e4153d985dad9258dc795ea1b092930f4' })));
     }
-    static get style() { return BalFormGridStyle0; }
+    static get style() { return balFormGridCss; }
 }, [4, "bal-form-grid"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-form.js

@@ -3,14 +3,22 @@ import { s as scrollToFirstInvalidField } from './form.js';
 import { e as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers.js';
 
 const balFormCss = ".bal-form{display:block;position:static}";
-const BalFormStyle0 = balFormCss;
 
 const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` a native form element is added as a wrapper of the slot.
+         */
         this.native = false;
+        /**
+         * If `true` it adds the novalidate attribute to the native form element.
+         */
         this.novalidate = false;
+        /**
+         * The css class for the inner form element
+         */
         this.formClass = '';
     }
     /**
@@ -32,7 +40,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
         return (h(Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
     }
     get el() { return this; }
-    static get style() { return BalFormStyle0; }
+    static get style() { return balFormCss; }
 }, [4, "bal-form", {
         "native": [4],
         "novalidate": [4],

package/components/bal-heading2.js

@@ -61,21 +61,40 @@ const HEADING_COLORS = {
 };
 
 const balHeadingCss = ":root{--bal-heading-color-white:var(--bal-color-text-white);--bal-heading-color-success:var(--bal-color-text-success);--bal-heading-color-warning:var(--bal-color-text-warning);--bal-heading-color-danger:var(--bal-color-text-danger)}.bal-heading{display:block;position:static;margin:0}.bal-heading:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-heading.bal-heading--level-display:not(:last-child){margin-bottom:var(--bal-space-normal)}.bal-heading--space-all,.bal-heading--space-top{margin-top:var(--bal-space-x-small)}.bal-heading--space-all,.bal-heading--space-bottom{margin-bottom:var(--bal-space-x-small)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-top{margin-top:var(--bal-space-normal)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-bottom{margin-bottom:var(--bal-space-normal)}.bal-heading--space-top,.bal-heading--space-top:not(:last-child){margin-bottom:0}.bal-heading--space-none,.bal-heading--space-none:not(:last-child){margin:0}.bal-heading__text{margin:0 !important;padding:0;font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title)}.bal-heading__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-heading__text--subtitle{font-weight:var(--bal-font-weight-light)}.bal-heading__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-heading__text--color-white{color:var(--bal-heading-color-white)}.bal-heading__text--color-success{color:var(--bal-heading-color-success)}.bal-heading__text--color-warning{color:var(--bal-heading-color-warning)}.bal-heading__text--color-danger{color:var(--bal-heading-color-danger)}.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}@media screen and (min-width: 769px),print{.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-tablet);line-height:var(--bal-line-height-tablet-normal)}}@media screen and (min-width: 1024px){.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-desktop);line-height:var(--bal-line-height-desktop-normal)}}.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-heading__text--size-large{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-x-large{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-heading__text--size-x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large);line-height:var(--bal-line-height-xxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxx-large)}}.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large);line-height:var(--bal-line-height-xxxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxxx-large)}}";
-const BalHeadingStyle0 = balHeadingCss;
 
 const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.autoFontSize = undefined;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The actual heading level used in the HTML markup.
+         */
         this.level = 'h1';
-        this.visualLevel = undefined;
-        this.autoLevel = undefined;
+        /**
+         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
+         * Please note that text overflow can only occur in block or inline-block level elements,
+         * as these elements require a width to overflow.
+         */
         this.noWrap = false;
+        /**
+         * If `true` the heading gets displayed slimmer.
+         */
         this.subtitle = false;
-        this.space = undefined;
+        /**
+         * The theme type of the toast.
+         */
         this.color = '';
+        /**
+         * If `true` the color gets inverted for dark backgrounds
+         */
         this.inverted = false;
+        /**
+         * If `true` adds a text shadow to improve readability on image background
+         * */
         this.shadow = false;
     }
     levelWatcher() {
@@ -151,7 +170,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         "visualLevel": ["visualLevelWatcher"],
         "autoLevel": ["autoLevelWatcher"]
     }; }
-    static get style() { return BalHeadingStyle0; }
+    static get style() { return balHeadingCss; }
 }, [4, "bal-heading", {
         "level": [1],
         "visualLevel": [1, "visual-level"],

package/components/bal-hint2.js

@@ -1,8 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { B as BEM } from './bem.js';
 import { p as preventDefault } from './utils.js';
 import { B as BalScrollHandler } from './scroll.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 import { d as defineCustomElement$8 } from './bal-button2.js';
 import { d as defineCustomElement$7 } from './bal-button-group2.js';
 import { d as defineCustomElement$6 } from './bal-close2.js';
@@ -11,13 +15,8 @@ import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-popup2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 import { d as defineCustomElement$1 } from './bal-stack2.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { L as ListenToConfig } from './config.decorator.js';
-import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 
-const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}: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}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem}.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__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.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;
+const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}: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}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background)}.bal-hint__content{background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem;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__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.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 Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
     constructor() {
@@ -25,15 +24,17 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         this.__registerHost();
         this.bodyScrollHandler = new BalScrollHandler();
         this.componentId = `bal-hint-${hintIds++}`;
-        this.onPopupChange = (ev) => {
-            this.isActive = ev.detail;
-            preventDefault(ev);
-        };
         this.isActive = false;
         this.innerCloseLabel = 'Close';
         this.isMobile = balBreakpoints.isMobile;
-        this.closeLabel = undefined;
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
+        this.onPopupChange = (ev) => {
+            this.isActive = ev.detail;
+            preventDefault(ev);
+        };
     }
     connectedCallback() {
         this.bodyScrollHandler.connect();
@@ -137,7 +138,7 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
     }
     get element() { return this; }
-    static get style() { return BalHintStyle0; }
+    static get style() { return balHintCss; }
 }, [4, "bal-hint", {
         "closeLabel": [1, "close-label"],
         "small": [4],