@baloise/ds-core 0.0.5-nightly.e56f740

package/dist/cjs/bal-file-upload.type-616d69d9.js

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.FileUploadRejectionReason = void 0;
+(function (FileUploadRejectionReason) {
+    FileUploadRejectionReason["BAD_EXTENSION"] = "BAD_EXTENSION";
+    FileUploadRejectionReason["FILE_TOO_BIG"] = "FILE_TOO_BIG";
+    FileUploadRejectionReason["FILE_SIZE_SUM_TOO_BIG"] = "FILE_SIZE_SUM_TOO_BIG";
+    FileUploadRejectionReason["TOO_MANY_FILES"] = "TOO_MANY_FILES";
+    FileUploadRejectionReason["DUPLICATED_FILE"] = "DUPLICATED_FILE";
+})(exports.FileUploadRejectionReason || (exports.FileUploadRejectionReason = {}));

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

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f7def455.js');
+const tslib_es6 = require('./tslib.es6-a680968e.js');
+const index_esm = require('./index.esm-4587dbf0.js');
+const bem = require('./bem-81bc6a2d.js');
+const log = require('./log-33398c2a.js');
+const helpers = require('./helpers-2a8c8333.js');
+const config_utils = require('./config.utils-e4cd49d6.js');
+const config_default = require('./config.default-32725178.js');
+const config_decorator = require('./config.decorator-b393a72f.js');
+require('./index-e6a233be.js');
+require('./_commonjsHelpers-68cdf74f.js');
+require('./browser-1d542d0f.js');
+require('./icons.constant-7c82086a.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 BalFooterStyle0 = balFooterCss;
+
+const Footer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.links = [];
+        this.socialMediaLinks = [];
+        this.language = config_default.defaultConfig.language;
+        this.region = config_default.defaultConfig.region;
+        this.allowedLanguages = config_default.defaultConfig.allowedLanguages;
+        this.hideLinks = false;
+        this.showSocialMedia = false;
+        this.hideLanguageSelection = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.updateFooterLinks();
+        this.updateSocialMediaLinks();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        if (this.language !== state.language || this.region !== state.region) {
+            this.language = state.language;
+            this.region = state.region;
+            this.allowedLanguages = state.allowedLanguages;
+            this.updateFooterLinks();
+            this.updateSocialMediaLinks();
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    changeLanguage(language) {
+        config_utils.updateBalLanguage(language);
+    }
+    updateFooterLinks() {
+        if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
+            // The following footer links only apply to swiss and german applications
+            const region = this.region;
+            helpers.rIC(() => {
+                index_esm.loadFooterLinks(new index_esm.Language(this.language), region).then(links => (this.links = links));
+            });
+        }
+    }
+    updateSocialMediaLinks() {
+        if (this.showSocialMedia && (this.region === 'CH' || this.region === 'DE')) {
+            // The following footer links only apply to swiss and german applications
+            const region = this.region;
+            helpers.rIC(() => {
+                index_esm.loadSocialMediaLinks(new index_esm.Language(this.language), region).then(links => (this.socialMediaLinks = links));
+            });
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = bem.BEM.block('footer');
+        const elInner = block.element('inner');
+        const elInnerWrapper = elInner.element('wrapper');
+        const elContainer = elInnerWrapper.element('container');
+        const elLinksContainer = elInnerWrapper.element('links-container');
+        const elHeaderContainer = elInnerWrapper.element('header-container');
+        const elLogo = elHeaderContainer.element('logo');
+        const elLanguage = elHeaderContainer.element('language');
+        const elWrapper = elLanguage.element('wrapper');
+        const elIcon = elLanguage.element('icon');
+        const elLegalLinks = elLinksContainer.element('legal-links');
+        const elSocialMediaLinks = elLinksContainer.element('social-media-links');
+        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h("footer", { class: Object.assign({}, elInner.class()) }, index.h("div", { class: Object.assign({}, elInnerWrapper.class()) }, index.h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, index.h("div", { class: Object.assign({}, elLogo.class()) }, index.h("bal-logo", { color: "white" })), index.h("div", { class: Object.assign({}, elLanguage.class()), style: {
+                display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
+            } }, index.h("div", { class: Object.assign({}, elWrapper.class()) }, index.h("bal-input-group", null, index.h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white" }), index.h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (index.h("bal-select-option", { label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), index.h("slot", null), index.h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, index.h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+                display: !this.showSocialMedia ? 'none' : 'flex',
+            } }, this.socialMediaLinks.map(link => (index.h("a", { href: link.link, target: "_blank", class: {
+                'link': true,
+                'is-inverted': true,
+            } }, index.h("bal-icon", { name: link.label.toLowerCase() }))))), index.h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (index.h("a", { href: link.link, target: "_blank", class: {
+                'link': true,
+                'is-light': true,
+            } }, link.label)))))))));
+    }
+};
+tslib_es6.__decorate([
+    log.Logger('bal-footer'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Footer.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Footer.prototype, "configChanged", null);
+Footer.style = BalFooterStyle0;
+
+exports.bal_footer = Footer;

package/dist/cjs/bal-form-col_2.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f7def455.js');
+
+const FormCol = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.colClass = 'col';
+        this.size = 'full';
+    }
+    render() {
+        return (index.h(index.Host, { class: {
+                [`${this.colClass}`]: true,
+                'py-none': true,
+                'touch:is-12': true,
+                'is-12': this.size === 'full' || this.size === 'fullwidth' || this.size === undefined,
+                'is-6': this.size === 'half',
+                'is-4': this.size === 'one-third',
+                'is-8': this.size === 'two-thirds',
+                'is-3': this.size === 'one-quarter',
+                'is-9': this.size === 'three-quarters',
+            } }, index.h("slot", null)));
+    }
+    get el() { return index.getElement(this); }
+};
+
+const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { class: `bal-form-grid grid is-multiline my-none py-none` }, index.h("slot", null)));
+    }
+};
+FormGrid.style = BalFormGridStyle0;
+
+exports.bal_form_col = FormCol;
+exports.bal_form_grid = FormGrid;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f7def455.js');
+const form = require('./form-2279fb2f.js');
+
+const Form = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.native = false;
+        this.novalidate = false;
+    }
+    /**
+     * Scrolls to the first invalid field inside this form component.
+     */
+    async scrollToFirstInvalidField() {
+        form.scrollToFirstInvalidField({ formEl: this.el });
+    }
+    render() {
+        const NativeEl = this.native ? 'form' : 'div';
+        let attrs = {};
+        if (this.native) {
+            attrs = {
+                novalidate: this.novalidate,
+            };
+        }
+        return (index.h(index.Host, null, index.h(NativeEl, Object.assign({}, attrs), index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.bal_form = Form;

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

@@ -0,0 +1,223 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f7def455.js');
+const bem = require('./bem-81bc6a2d.js');
+const browser = require('./browser-1d542d0f.js');
+
+const HEADING_TAGS = {
+    'display': 'h1',
+    'display-2': 'h1',
+    'h1': 'h1',
+    'h2': 'h2',
+    'h3': 'h3',
+    'h4': 'h4',
+    'h5': 'h5',
+    'span': 'span',
+    'p': 'p',
+    'xxxxx-large': 'h1',
+    'xxxx-large': 'h1',
+    'xxx-large': 'h1',
+    'xx-large': 'h1',
+    'x-large': 'h2',
+    'large': 'h3',
+    'medium': 'h4',
+    'normal': 'h5',
+};
+const HEADING_ORDER = [
+    'xxxxx-large',
+    'xxxx-large',
+    'xxx-large',
+    'xx-large',
+    'x-large',
+    'large',
+    'medium',
+    'normal',
+];
+const HEADING_SIZES = {
+    'display': 'xxxxx-large',
+    'display-2': 'xxxx-large',
+    'h1': 'xxx-large',
+    'h2': 'xx-large',
+    'h3': 'x-large',
+    'h4': 'large',
+    'h5': 'normal',
+    'p': 'normal',
+    'span': 'normal',
+    'xxxxx-large': 'xxxxx-large',
+    'xxxx-large': 'xxxx-large',
+    'xxx-large': 'xxx-large',
+    'xx-large': 'xx-large',
+    'x-large': 'x-large',
+    'large': 'large',
+    'medium': 'medium',
+    'normal': 'normal',
+};
+const HEADING_COLORS = {
+    primary: 'primary',
+    info: 'primary',
+    blue: 'primary',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+    white: 'white',
+};
+
+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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.autoFontSize = undefined;
+        this.level = 'h1';
+        this.visualLevel = undefined;
+        this.autoLevel = undefined;
+        this.noWrap = false;
+        this.subtitle = false;
+        this.space = undefined;
+        this.color = '';
+        this.inverted = false;
+        this.shadow = false;
+    }
+    levelWatcher() {
+        this.updateAutoFontSize();
+    }
+    visualLevelWatcher() {
+        this.updateAutoFontSize();
+    }
+    autoLevelWatcher() {
+        this.updateAutoFontSize();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.updateAutoFontSize();
+    }
+    componentDidRender() {
+        if (this.autoLevel && this.autoFontSize) {
+            const rows = this.rows;
+            if (rows > 1) {
+                const minSize = HEADING_SIZES[this.autoLevel];
+                if (minSize !== this.autoFontSize) {
+                    const nextIndex = HEADING_ORDER.indexOf(this.autoFontSize) + 1;
+                    this.autoFontSize = HEADING_ORDER[nextIndex];
+                }
+            }
+        }
+    }
+    updateAutoFontSize() {
+        this.autoFontSize = this.fontSize;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get rows() {
+        if (this.headingEl && browser.balBrowser.hasWindow) {
+            const computedStyle = window.getComputedStyle(this.headingEl);
+            const lineHeight = parseInt(computedStyle.lineHeight.slice(0, -2), 10);
+            const height = this.headingEl.offsetHeight;
+            return height / lineHeight;
+        }
+        return 1;
+    }
+    get fontColor() {
+        if (this.inverted) {
+            return 'white';
+        }
+        return HEADING_COLORS[this.color];
+    }
+    get fontSize() {
+        return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
+    }
+    get tag() {
+        return HEADING_TAGS[this.level];
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = bem.BEM.block('heading');
+        const bemTextEl = block.element('text');
+        const Heading = this.tag;
+        const fontColor = this.fontColor;
+        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, index.h(Heading, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "level": ["levelWatcher"],
+        "visualLevel": ["visualLevelWatcher"],
+        "autoLevel": ["autoLevelWatcher"]
+    }; }
+};
+Heading.style = BalHeadingStyle0;
+
+const balTextCss = ":root{--bal-text-color-light-blue:var(--bal-color-text-light-blue);--bal-text-color-blue-dark:var(--bal-color-text-primary-dark);--bal-text-color-blue-light:var(--bal-color-text-hovered);--bal-text-color-primary-light:var(--bal-color-text-primary-light);--bal-text-color-primary-dark:var(--bal-color-text-primary-dark);--bal-text-color-white:var(--bal-color-text-white);--bal-text-color-black:var(--bal-color-text-black);--bal-text-color-grey:var(--bal-color-text-grey);--bal-text-color-primary:var(--bal-color-text-primary);--bal-text-color-blue:var(--bal-color-text-primary);--bal-text-color-info:var(--bal-color-text-info);--bal-text-color-success:var(--bal-color-text-success);--bal-text-color-warning:var(--bal-color-text-warning);--bal-text-color-danger:var(--bal-color-text-danger);--bal-text-color-danger-dark:var(--bal-color-text-danger-dark);--bal-text-color-danger-darker:var(--bal-color-text-danger-darker)}.bal-text{display:block;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word;margin:0 0 var(--bal-space-normal) 0}.bal-text--inline{display:inline;margin:0}.bal-text--space-all{margin-top:var(--bal-space-normal);margin-bottom:var(--bal-space-normal)}.bal-text--space-top{margin-top:var(--bal-space-normal);margin-bottom:0}.bal-text--space-bottom{margin-top:0;margin-bottom:var(--bal-space-normal)}.bal-text--space-none{margin:0}.bal-text__text{padding:0;margin:0}.bal-text__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-text__text--bold{font-weight:var(--bal-font-weight-bold)}.bal-text__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-text__text--heading{font-family:var(--bal-font-family-title)}.bal-text__text--size-small{font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-text__text--size-small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-text__text--size-small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-text__text--size-block{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-text__text--size-block{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-text__text--size-block{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-text__text--size-lead{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-text__text--size-lead{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-text__text--size-lead{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-text__text--color-light-blue{color:var(--bal-text-color-light-blue)}.bal-text__text--color-blue-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-blue-light{color:var(--bal-text-color-blue-light)}.bal-text__text--color-primary-light{color:var(--bal-text-color-primary-light)}.bal-text__text--color-primary-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-white{color:var(--bal-text-color-white)}.bal-text__text--color-black{color:var(--bal-text-color-black)}.bal-text__text--color-grey{color:var(--bal-text-color-grey)}.bal-text__text--color-primary{color:var(--bal-text-color-primary)}.bal-text__text--color-blue{color:var(--bal-text-color-primary)}.bal-text__text--color-info{color:var(--bal-text-color-info)}.bal-text__text--color-success{color:var(--bal-text-color-success)}.bal-text__text--color-warning{color:var(--bal-text-color-warning)}.bal-text__text--color-danger{color:var(--bal-text-color-danger)}.bal-text__text--color-danger-dark{color:var(--bal-text-color-danger-dark)}.bal-text__text--color-danger-darker{color:var(--bal-text-color-danger-darker)}";
+const BalTextStyle0 = balTextCss;
+
+const Text = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = '';
+        this.heading = false;
+        this.noWrap = false;
+        this.bold = false;
+        this.inline = false;
+        this.color = '';
+        this.space = '';
+        this.inverted = false;
+        this.shadow = false;
+        this.disabled = undefined;
+        this.invalid = undefined;
+        this.hovered = false;
+        this.pressed = false;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    parseColor() {
+        if (this.disabled) {
+            return 'grey';
+        }
+        if (this.invalid) {
+            if (this.pressed) {
+                return 'danger-darker';
+            }
+            if (this.hovered) {
+                return 'danger-dark';
+            }
+            return 'danger';
+        }
+        const color = this.inverted ? 'white' : this.color === 'info' ? 'primary' : this.color;
+        if (this.pressed) {
+            return 'primary-dark';
+        }
+        if (this.hovered) {
+            return 'light-blue';
+        }
+        return color;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const Text = this.inline ? 'span' : 'p';
+        const color = this.parseColor();
+        const block = bem.BEM.block('text');
+        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, index.h(Text, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+                .element('text')
+                .modifier(`size-${this.size}`)
+                .class(this.size !== '')), "data-testid": "bal-text" }, index.h("slot", null))));
+    }
+};
+Text.style = BalTextStyle0;
+
+exports.bal_heading = Heading;
+exports.bal_text = Text;

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

@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f7def455.js');
+const tslib_es6 = require('./tslib.es6-a680968e.js');
+const bem = require('./bem-81bc6a2d.js');
+const utils = require('./utils-9ea175af.js');
+const scroll = require('./scroll-b839ffe1.js');
+const breakpoints_subject = require('./breakpoints.subject-0a1809a1.js');
+const breakpoints_decorator = require('./breakpoints.decorator-517effdd.js');
+const config_decorator = require('./config.decorator-b393a72f.js');
+require('./index-e6a233be.js');
+require('./browser-1d542d0f.js');
+require('./helpers-2a8c8333.js');
+require('./icons.constant-7c82086a.js');
+require('./config.utils-e4cd49d6.js');
+require('./device-9f97a845.js');
+require('./listener-52d2e5fd.js');
+require('./tokens.esm-8d48a205.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;
+
+const Hint = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bodyScrollHandler = new scroll.BalScrollHandler();
+        this.onPopoverChange = (ev) => {
+            this.isActive = ev.detail;
+            utils.preventDefault(ev);
+        };
+        this.isActive = false;
+        this.innerCloseLabel = 'Close';
+        this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
+        this.closeLabel = undefined;
+        this.small = false;
+    }
+    connectedCallback() {
+        this.bodyScrollHandler.connect();
+    }
+    componentDidRender() {
+        this.updateContent();
+    }
+    disconnectedCallback() {
+        this.bodyScrollHandler.disconnect();
+    }
+    breakpointListener(breakpoints) {
+        const isCurrentMobile = breakpoints.mobile;
+        if (isCurrentMobile !== this.isMobile) {
+            this.isActive = false;
+        }
+        this.isMobile = isCurrentMobile;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        if (!this.closeLabel) {
+            switch (state.language) {
+                case 'de':
+                    this.innerCloseLabel = 'Schliessen';
+                    break;
+                case 'fr':
+                    this.innerCloseLabel = 'Fermer';
+                    break;
+                case 'it':
+                    this.innerCloseLabel = 'Chiudere';
+                    break;
+                case 'nl':
+                    this.innerCloseLabel = 'Sluiten';
+                    break;
+                default:
+                    this.innerCloseLabel = 'Close';
+                    break;
+            }
+        }
+    }
+    /**
+     * Toggles the hint box.
+     */
+    async toggle() {
+        if (this.isActive) {
+            this.dismiss();
+        }
+        else {
+            this.present();
+        }
+    }
+    /**
+     * Opens the hint box.
+     */
+    async present() {
+        if (this.popoverElement) {
+            this.popoverElement.present();
+        }
+        if (this.isMobile) {
+            this.bodyScrollHandler.disable();
+        }
+        this.isActive = true;
+    }
+    /**
+     * Closes the hint box.
+     */
+    async dismiss() {
+        if (this.popoverElement) {
+            this.popoverElement.dismiss();
+        }
+        if (this.isMobile) {
+            this.bodyScrollHandler.enable();
+        }
+        this.isActive = false;
+    }
+    updateContent() {
+        if (this.hintContentEl && this.slotWrapperEl) {
+            this.hintContentEl.innerHTML = this.slotWrapperEl.innerHTML;
+        }
+    }
+    render() {
+        const block = bem.BEM.block('hint');
+        const elIcon = block.element('icon');
+        const elContent = block.element('content');
+        const elButtons = elContent.element('buttons');
+        const padding = this.isMobile ? 0 : 8;
+        const offsetY = this.isMobile ? 0 : 16;
+        const TriggerIcon = () => {
+            return (index.h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", onClick: () => this.toggle() }));
+        };
+        const HintContent = () => {
+            return (index.h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, index.h("div", { ref: el => (this.hintContentEl = el) }), index.h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, index.h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
+        };
+        const MobileOverlay = () => {
+            const elOverlay = block.element('overlay');
+            return (index.h("div", { class: Object.assign({}, elOverlay.class()) }, index.h(TriggerIcon, null), index.h("div", { class: Object.assign(Object.assign({}, elOverlay.element('content').class()), elOverlay.element('content').modifier('active').class(this.isActive)) }, index.h(HintContent, null))));
+        };
+        const Popover = () => {
+            return (index.h("div", { class: Object.assign({}, block.element('popover').class()) }, index.h("bal-popover", { hint: true, position: "right", offsetX: 0, offsetY: offsetY, padding: padding, ref: el => (this.popoverElement = el), onBalChange: this.onPopoverChange }, index.h(TriggerIcon, null), index.h("bal-popover-content", { color: "grey" }, index.h(HintContent, null)))));
+        };
+        const HintElement = this.isMobile ? MobileOverlay : Popover;
+        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h(HintElement, null), index.h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, index.h("slot", null))));
+    }
+    get element() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    breakpoints_decorator.ListenToBreakpoints(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Hint.prototype, "breakpointListener", null);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Hint.prototype, "configChanged", null);
+Hint.style = BalHintStyle0;
+
+const HintText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const block = bem.BEM.block('hint');
+        const elContent = block.element('content');
+        const elText = elContent.element('text');
+        const elTextField = elText.element('field');
+        return (index.h(index.Host, { class: Object.assign({}, elText.class()) }, index.h("p", { class: Object.assign({}, elTextField.class()) }, index.h("slot", null))));
+    }
+};
+
+const HintTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const block = bem.BEM.block('hint');
+        const elContent = block.element('content');
+        const elTitle = elContent.element('title');
+        const elHeading = elTitle.element('heading');
+        return (index.h(index.Host, { class: Object.assign({}, elTitle.class()) }, index.h("h3", { class: Object.assign({}, elHeading.class()) }, index.h("span", null, index.h("slot", null)))));
+    }
+};
+
+exports.bal_hint = Hint;
+exports.bal_hint_text = HintText;
+exports.bal_hint_title = HintTitle;