@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

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

@@ -0,0 +1,159 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var footer_i18n = require('./footer.i18n-CpGxizgm.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.js');
+
+const footerHostCss = () => `:host{--_footer-position:var(--footer-position, var(--mod-footer-position, static));--_footer-top:var(--footer-top, var(--mod-footer-top));--_footer-right:var(--footer-right, var(--mod-footer-right));--_footer-bottom:var(--footer-bottom, var(--mod-footer-bottom));--_footer-left:var(--footer-left, var(--mod-footer-left));position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);--_footer-m:var(--footer-m, var(--mod-footer-m, 0));--_footer-my:var(--footer-my, var(--mod-footer-my));--_footer-mx:var(--footer-mx, var(--mod-footer-mx));--_footer-ml:var(--footer-ml, var(--mod-footer-ml));--_footer-mr:var(--footer-mr, var(--mod-footer-mr));--_footer-mt:var(--footer-mt, var(--mod-footer-mt));--_footer-mb:var(--footer-mb, var(--mod-footer-mb));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);--_footer-background:var(--footer-background, var(--mod-footer-background, var(--ds-footer-color-background)));--_footer-color:var(--footer-color, var(--mod-footer-color, var(--ds-footer-color-text)));--_footer-link-color:var(--footer-link-color, var(--mod-footer-link-color, var(--ds-footer-color-link-base)));--_footer-link-color-hover:var(--footer-link-color-hover, var(--mod-footer-link-color-hover, var(--ds-footer-color-link-hover)));--_footer-divider-color:var(--footer-divider-color, var(--mod-footer-divider-color, var(--ds-footer-color-divider)));--_footer-content-max-width:var(--footer-content-max-width, var(--mod-footer-content-max-width, var(--ds-footer-space-content-max-width)));--_footer-padding:var(--footer-padding, var(--mod-footer-padding, var(--ds-footer-space-padding-base)));--_footer-content-padding-top:var(--footer-content-padding-top, var(--mod-footer-content-padding-top, var(--ds-footer-space-content-padding-top)));--_footer-gap-row:var(--footer-gap-row, var(--mod-footer-gap-row, var(--ds-footer-space-gap-row)));--_footer-gap-column:var(--footer-gap-column, var(--mod-footer-gap-column, var(--ds-footer-space-gap-column)));--_footer-language-font-family:var(--footer-language-font-family, var(--mod-footer-language-font-family, var(--ds-footer-typography-language-family)));--_footer-language-font-weight:var(--footer-language-font-weight, var(--mod-footer-language-font-weight, var(--ds-footer-typography-language-weight)));--_footer-language-gap:var(--footer-language-gap, var(--mod-footer-language-gap, var(--ds-footer-space-language-gap)));--_footer-bottom-gap:var(--footer-bottom-gap, var(--mod-footer-bottom-gap, var(--ds-footer-space-bottom-gap)));--_footer-link-gap:var(--footer-link-gap, var(--mod-footer-link-gap, var(--ds-footer-space-link-gap)));--_footer-social-gap:var(--footer-social-gap, var(--mod-footer-social-gap, var(--ds-footer-space-social-gap)));--_footer-font-size:var(--footer-font-size, var(--mod-footer-font-size, var(--ds-footer-typography-font-size)));--_footer-line-height:var(--footer-line-height, var(--mod-footer-line-height, var(--ds-footer-typography-line-height)));--_footer-social-icon-size:var(--footer-social-icon-size, var(--mod-footer-social-icon-size, var(--ds-footer-space-social-icon-size)));--_footer-social-icon-gap:var(--footer-social-icon-gap, var(--mod-footer-social-icon-gap, var(--ds-footer-space-social-icon-gap)));--_footer-slotted-margin-right:var(--footer-slotted-margin-right, var(--mod-footer-slotted-margin-right, var(--ds-footer-space-slotted-margin-right)));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);display:block;color:var(--_footer-color);background:var(--_footer-background)}footer{margin:0 auto;padding-block:var(--_footer-padding);padding-inline:var(--ds-alias-container-space-device);width:100%;max-width:var(--ds-alias-container-width-base)}footer.is-fluid{max-width:var(--ds-alias-container-width-fluid)}footer.is-compact{max-width:var(--ds-alias-container-width-compact)}.top-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-gap-row) var(--_footer-gap-column);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.logo-area{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.logo-link{display:-ms-inline-flexbox;display:inline-flex;color:inherit}.logo-svg{display:-ms-inline-flexbox;display:inline-flex}.language-picker{-ms-flex-align:center;align-items:center;border:0;color:var(--_footer-color);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--_footer-language-font-family);font-weight:var(--_footer-language-font-weight);gap:var(--_footer-language-gap);margin:0 0 0 auto;max-width:100%;width:auto}.language-picker ds-icon{--icon-color:currentColor;-ms-flex-negative:0;flex-shrink:0}.language-picker select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:rgba(0,0,0,0);border:0;border-radius:0;color:inherit;cursor:pointer;-ms-flex:0 0 auto;flex:0 0 auto;font:inherit;line-height:1.3;min-width:auto;padding:0}.language-picker select:hover,.language-picker select:focus-visible{color:var(--_footer-link-color-hover)}.content{padding-top:var(--_footer-content-padding-top)}.bottom-row{display:grid;font-size:var(--_footer-font-size);gap:var(--_footer-bottom-gap);grid-template-columns:1fr;line-height:var(--_footer-line-height)}.legal{margin:0;font-size:var(--_footer-font-size);line-height:var(--_footer-line-height)}.links,.social{min-width:0}.link-list,.social-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-link-gap);margin:0;padding:0}.social-list{gap:var(--_footer-social-gap)}.link-list li,.social-list li{list-style:none}.links a,::slotted([slot=links]){color:var(--_footer-link-color);text-decoration:none}.links a:hover,::slotted([slot=links]:hover){color:var(--_footer-link-color-hover);text-decoration:underline}.social a,::slotted([slot=social-links]){--icon-color:var(--ds-alias-text-color-white);--icon-size:var(--ds-icon-size-sm);-ms-flex-align:center;align-items:center;color:var(--_footer-link-color);display:-ms-inline-flexbox;display:inline-flex;height:var(--_footer-social-icon-size);-ms-flex-pack:center;justify-content:center;text-decoration:none;width:var(--_footer-social-icon-size)}.social a:hover,::slotted([slot=social-links]:hover){--icon-color:var(--_footer-link-color-hover);color:var(--_footer-link-color-hover)}::slotted([slot=links]),::slotted([slot=social-links]){margin-right:var(--_footer-slotted-margin-right)}@media screen and (min-width: 769px){.bottom-row{-ms-flex-align:start;align-items:start;grid-template-columns:1fr}.social,.links{justify-self:start}}@media screen and (min-width: 1024px){.bottom-row{-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto;grid-template-areas:"legal social" "links links"}.legal{align-self:center;grid-area:legal}.social{align-self:center;grid-area:social;justify-self:end}.links{grid-area:links;justify-self:stretch;width:100%}}`;
+
+const Footer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsLanguageChange = index.createEvent(this, "dsLanguageChange");
+        // ========================================================================
+        // PUBLIC PROPERTY API
+        // ========================================================================
+        this.brand = index.defaultConfig.brand;
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        this.allowedLanguages = index.defaultConfig.allowedLanguages;
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = '';
+        /**
+         * If `true` the language selection will be hidden.
+         */
+        this.hideLanguageSelection = false;
+        /**
+         * If `true` the default legal links from config will not be rendered.
+         * User must provide links via the `links` slot.
+         */
+        this.disableDefaultLinks = false;
+        /**
+         * If `true` the default social links from config will not be rendered.
+         * User must provide social links via the `social-links` slot.
+         */
+        this.disableDefaultSocialLinks = false;
+        /**
+         * Copyright and address text below the divider.
+         * If not provided, uses the text from config based on region and language.
+         */
+        this.legalText = undefined;
+        this.handleLanguageChange = (ev) => {
+            const selectEl = ev.target;
+            const nextLanguage = selectEl.value;
+            this.language = nextLanguage;
+            this.dsLanguageChange.emit({ language: nextLanguage });
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    // ========================================================================
+    // LIFECYCLE
+    // ========================================================================
+    // ========================================================================
+    // PROPERTY VALIDATION
+    // ========================================================================
+    // ========================================================================
+    // PUBLIC METHODS
+    // ========================================================================
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a, _b, _c, _d;
+        this.brand = state.brand;
+        this.language = state.language;
+        this.region = state.region;
+        this.allowedLanguages = state.allowedLanguages;
+        this.legalLinksConfig = (_a = state.legalLinks) === null || _a === void 0 ? void 0 : _a[state.region];
+        this.legalTextConfig = (_c = (_b = state.legalText) === null || _b === void 0 ? void 0 : _b[state.region]) === null || _c === void 0 ? void 0 : _c[state.language];
+        this.socialLinksConfig = (_d = state.socialLinks) === null || _d === void 0 ? void 0 : _d[state.region];
+    }
+    // ========================================================================
+    // PRIVATE METHODS
+    // ========================================================================
+    hasNamedSlot(name) {
+        return this.el.querySelector(`[slot="${name}"]`) !== null;
+    }
+    getLanguageLabel(languageCode) {
+        const labels = footer_i18n.i18nDsFooter[this.language].languageLabels;
+        return labels[languageCode] || languageCode.toUpperCase();
+    }
+    renderLogo() {
+        if (this.hasNamedSlot('logo')) {
+            return index.h("slot", { name: "logo" });
+        }
+        return index.h("ds-logo", { brand: this.brand, color: "white" });
+    }
+    renderLinkList(links, className) {
+        return (index.h("ul", { class: className }, links.map(link => (index.h("li", { key: `${link.href}-${link.label}` }, index.h("a", { href: link.href, target: link.target, rel: link.rel }, link.label))))));
+    }
+    renderSocialList(links) {
+        return (index.h("ul", { class: "social-list", "aria-label": "Social links" }, links.map(link => (index.h("li", { key: `${link.href}-${link.icon}` }, index.h("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel || link.label, title: link.ariaLabel || link.label }, index.h("ds-icon", { name: link.icon, "aria-hidden": "true" })))))));
+    }
+    // ========================================================================
+    // RENDER
+    // ========================================================================
+    render() {
+        var _a;
+        const hasLinksSlot = this.hasNamedSlot('links');
+        const hasSocialSlot = this.hasNamedSlot('social-links');
+        const configLinks = !this.disableDefaultLinks && ((_a = this.legalLinksConfig) === null || _a === void 0 ? void 0 : _a[this.language]);
+        const configSocial = !this.disableDefaultSocialLinks && this.socialLinksConfig;
+        const textToDisplay = this.legalText || this.legalTextConfig;
+        const showLinks = hasLinksSlot || (configLinks && configLinks.length > 0);
+        const showSocial = hasSocialSlot || (configSocial && configSocial.length > 0);
+        return (index.h(index.Host, { key: 'f5041f27ffaa02706365e348e9fbcd433b61e597' }, index.h("footer", { key: 'fa7fc4395a0181d27866703ca109ee7b14e1be69', class: {
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            } }, index.h("div", { key: 'e99d0e4e3a2043579d74082828c433bfa49bee77', class: "top-row" }, index.h("div", { key: 'b6d3605f12ffbcc3a90474c7dff995d51a59ac3c', class: "logo-area" }, this.renderLogo()), !this.hideLanguageSelection && (index.h("label", { key: 'becbaddae40dce976c39033513e911d49611b9bf', class: "language-picker", "aria-label": footer_i18n.i18nDsFooter[this.language].languageSelector }, index.h("ds-icon", { key: '6ff2ab4a2ac6bb92a817f55bafa5496c76a4c72f', name: "web", "aria-hidden": "true" }), index.h("select", { key: 'f12f1ad864b76d9ac7d4cd9958fa9b6a426fe80c', "data-testid": "footer-language-select", onChange: this.handleLanguageChange }, this.allowedLanguages.map(languageCode => (index.h("option", { key: languageCode, value: languageCode, selected: this.language === languageCode }, this.getLanguageLabel(languageCode)))))))), index.h("div", { key: '6179015e628411a0baa40db7f3c43e0a1fe73c24', class: "content" }, index.h("slot", { key: '1726a81dc4ab97761840e4b8540d1998479fc3f5' })), index.h("ds-divider", { key: 'c393531689e81c30a561a720bc9db3b53c0c7e7f', space: "sm", color: "primary-light" }), index.h("div", { key: '11bbe98d7c55c063275f6f1dfb2790b4027e6071', class: "bottom-row" }, textToDisplay && index.h("p", { key: '216b2953c145b87c50f1dbc6995a60b2fa38110f', class: "legal" }, textToDisplay), showSocial && (index.h("nav", { key: 'c0b32fc3ee82d898fd167c00415a947ca69c9c42', class: "social", "aria-label": "Social navigation" }, index.h("slot", { key: 'e1cd6bdccbe2b175135035d8bb3ca60bf7cf6c90', name: "social-links" }), !hasSocialSlot && configSocial && this.renderSocialList(configSocial))), showLinks && (index.h("nav", { key: '3fa8077bda4f64f43323be9867d6e379b310b20f', class: "links", "aria-label": "Footer links" }, index.h("slot", { key: '05cc5e0987afdf5eec45eac14fe146610e54c142', name: "links" }), !hasLinksSlot && configLinks && this.renderLinkList(configLinks, 'link-list')))))));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('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([
+    oneOf.OneOf(footer_i18n.FOOTER_CONTAINERS),
+    tslib_es6.__metadata("design:type", String)
+], Footer.prototype, "container", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Footer.prototype, "hideLanguageSelection", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Footer.prototype, "disableDefaultLinks", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Footer.prototype, "disableDefaultSocialLinks", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Footer.prototype, "legalText", void 0);
+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 = footerHostCss();
+
+exports.ds_footer = Footer;

package/dist/cjs/ds-heading.cjs.entry.js

@@ -3,10 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
 var heading_interfaces = require('./heading.interfaces-B5NJ2yjL.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const HEADING_TAG_MAP = {
     'display': 'h1',
@@ -124,11 +127,10 @@ const Heading = class {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        validate_decorator.setupValidation(this);
         this.updateAutoFontSize();
     }
     componentDidRender() {
-        if (this.autoLevel && this.autoFontSize) {
+        if (hasValue.hasValue(this.autoLevel) && this.autoFontSize) {
             const rows = this.rows;
             if (rows > 1) {
                 const minSize = HEADING_SIZES[this.autoLevel];
@@ -159,7 +161,7 @@ const Heading = class {
         if (this.inverted) {
             return 'white';
         }
-        return HEADING_COLOR_MAP[this.color];
+        return hasValue.hasValue(this.color) ? HEADING_COLOR_MAP[this.color] : '';
     }
     get fontSize() {
         return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
@@ -173,14 +175,14 @@ const Heading = class {
      */
     render() {
         const Heading = this.tag;
-        return (index.h(index.Host, { key: '0b502ee9b85add9b3276695e5eb2b6497ba339f2', class: {
+        return (index.h(index.Host, { key: 'dd9df7b068c6a489c4a56437a19e6f7a27a1c1ea', class: {
                 [`is-${this.autoFontSize}`]: this.autoFontSize !== undefined,
-                [`is-${this.fontColor}`]: this.fontColor !== undefined,
+                [`is-${this.fontColor}`]: hasValue.hasValue(this.fontColor),
                 'is-subtitle': this.subtitle,
                 'has-no-wrap': this.noWrap,
                 'has-shadow': this.shadow,
-                [`has-space-${this.space}`]: !!this.space,
-            } }, index.h(Heading, { key: 'c88498ebc2531d6060c9aec68cb33c051b0ef336', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, index.h("slot", { key: '51db87f89bcea927d039e4d2cc6b12c1c04ec19b' }))));
+                [`has-space-${this.space}`]: hasValue.hasValue(this.space),
+            } }, index.h(Heading, { key: 'e437b9f774f324b5628d002210b1af6763cc9dc8', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, index.h("slot", { key: '61234ad53aa55043c4982b94e40155fb5b40b69b' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -202,39 +204,39 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Heading.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...heading_interfaces.HEADING_LEVELS),
+    oneOf.OneOf(heading_interfaces.HEADING_LEVELS),
     tslib_es6.__metadata("design:type", String)
 ], Heading.prototype, "level", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...heading_interfaces.HEADING_VISUAL_LEVELS),
+    oneOf.OneOf(heading_interfaces.HEADING_VISUAL_LEVELS),
     tslib_es6.__metadata("design:type", String)
 ], Heading.prototype, "visualLevel", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...heading_interfaces.HEADING_VISUAL_LEVELS),
+    oneOf.OneOf(heading_interfaces.HEADING_VISUAL_LEVELS),
     tslib_es6.__metadata("design:type", String)
 ], Heading.prototype, "autoLevel", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Heading.prototype, "noWrap", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Heading.prototype, "subtitle", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...heading_interfaces.HEADING_SPACES),
+    oneOf.OneOf(heading_interfaces.HEADING_SPACES),
     tslib_es6.__metadata("design:type", String)
 ], Heading.prototype, "space", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...heading_interfaces.HEADING_COLORS),
+    oneOf.OneOf(heading_interfaces.HEADING_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Heading.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Heading.prototype, "inverted", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Heading.prototype, "shadow", void 0);
 Heading.style = headingHostCss();

package/dist/cjs/ds-hint-text.cjs.entry.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+
+const HintText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e29a27c1f5176a5b9a29297d4b9f46db9fb9a58b', style: { display: 'contents' } }, index.h("slot", { key: '5135ac7a804d2a76c66df93aad918720fed7f0a5' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('hint-text'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], HintText.prototype, "createLogger", null);
+
+exports.ds_hint_text = HintText;

package/dist/cjs/ds-hint-title.cjs.entry.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+
+const HintTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'title';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fd1b78370d7474d8ec7e514556fdb9444fa12e70', style: { display: 'contents' } }, index.h("slot", { key: 'd2d14b2c4cfe147042c8c9a93c1d980f2bfd343d' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('hint-title'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], HintTitle.prototype, "createLogger", null);
+
+exports.ds_hint_title = HintTitle;

package/dist/cjs/ds-hint.cjs.entry.js

@@ -0,0 +1,243 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var keyboard = require('./keyboard-C7y0jXYb.js');
+var popup_interfaces = require('./popup.interfaces-B-mwd9rh.js');
+var breakpoints_decorator = require('./breakpoints.decorator-C-Qm21UK.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./breakpoints.subject-XNcGwhzh.js');
+require('./listener-BwB_xent.js');
+require('./device-BnjBOLnP.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.js');
+
+const i18nDsHint = {
+    de: {
+        triggerLabel: 'Weitere Informationen',
+    },
+    en: {
+        triggerLabel: 'More information',
+    },
+    fr: {
+        triggerLabel: "Plus d'informations",
+    },
+    it: {
+        triggerLabel: 'Ulteriori informazioni',
+    },
+    nl: {
+        triggerLabel: 'Meer informatie',
+    },
+    es: {
+        triggerLabel: 'Más información',
+    },
+    pl: {
+        triggerLabel: 'Więcej informacji',
+    },
+    pt: {
+        triggerLabel: 'Mais informações',
+    },
+    sv: {
+        triggerLabel: 'Mer information',
+    },
+    fi: {
+        triggerLabel: 'Lisätiedot',
+    },
+};
+
+const hintHostCss = () => `:host{--_hint-position:var(--hint-position, var(--mod-hint-position, static));--_hint-top:var(--hint-top, var(--mod-hint-top));--_hint-right:var(--hint-right, var(--mod-hint-right));--_hint-bottom:var(--hint-bottom, var(--mod-hint-bottom));--_hint-left:var(--hint-left, var(--mod-hint-left));position:var(--_hint-position);top:var(--_hint-top);right:var(--_hint-right);bottom:var(--_hint-bottom);left:var(--_hint-left);--_hint-m:var(--hint-m, var(--mod-hint-m, 0));--_hint-my:var(--hint-my, var(--mod-hint-my));--_hint-mx:var(--hint-mx, var(--mod-hint-mx));--_hint-ml:var(--hint-ml, var(--mod-hint-ml));--_hint-mr:var(--hint-mr, var(--mod-hint-mr));--_hint-mt:var(--hint-mt, var(--mod-hint-mt));--_hint-mb:var(--hint-mb, var(--mod-hint-mb));margin:var(--_hint-m);margin-inline:var(--_hint-mx);margin-block:var(--_hint-my);margin-left:var(--_hint-ml);margin-right:var(--_hint-mr);margin-top:var(--_hint-mt);margin-bottom:var(--_hint-mb);--_hint-color-trigger:var(--hint-color-trigger, var(--mod-hint-color-trigger, var(--ds-alias-text-color-primary)));--_hint-color-trigger-background-hover:var(--hint-color-trigger-background-hover, var(--mod-hint-color-trigger-background-hover, var(--ds-alias-interaction-selection-background)));--_hint-color-focus:var(--hint-color-focus, var(--mod-hint-color-focus, var(--ds-alias-interaction-focus-color-base)));--_hint-color-title:var(--hint-color-title, var(--mod-hint-color-title, var(--ds-alias-text-color-primary)));--_hint-color-body:var(--hint-color-body, var(--mod-hint-color-body, var(--ds-alias-text-color-primary)))}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:middle;font-weight:var(--ds-global-font-weight-400)}:host [part=trigger]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:.25rem;border-radius:50%;cursor:pointer;color:var(--_hint-color-trigger);line-height:0}@media (hover: hover)and (pointer: fine){:host [part=trigger]:hover{background:var(--_hint-color-trigger-background-hover)}}@media (hover: hover)and (pointer: fine){:host [part=trigger]:focus-visible{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_hint-color-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_hint-color-focus) 0 0 0 5px !important}}:host [part=trigger] ds-icon{--icon-size:20px;--icon-inner-size:20px}:host ds-popup{--popup-background:var(--ds-alias-background-color-grey-light);--popup-radius:var(--ds-alias-radius-lg);--popup-max-width:20rem}:host ds-drawer{--drawer-background:var(--ds-alias-background-color-grey-light);--drawer-radius:var(--ds-alias-radius-lg)}:host .hint-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--ds-alias-space-sm-mobile)}:host .hint-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;gap:var(--ds-alias-space-sm-mobile)}:host .hint-title{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-alias-text-weight-bold);font-size:var(--ds-alias-text-size-xl-mobile);line-height:var(--ds-alias-text-line-height-heading);color:var(--_hint-color-title)}:host .hint-body{font-family:var(--ds-alias-text-family-body);font-size:var(--ds-alias-text-size-base-mobile);line-height:var(--ds-alias-text-line-height-body);color:var(--_hint-color-body)}:host .hint-close-btn{margin-top:var(--ds-alias-space-sm-mobile);width:100%}`;
+
+const Hint = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.isTouch = false;
+        this.animated = true;
+        this.innerCloseLabel = 'Close';
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Preferred placement of the popup panel on desktop viewports.
+         */
+        this.placement = 'right';
+        /**
+         * Title text displayed in the hint panel.
+         * When provided, renders in the title section without needing a named slot.
+         */
+        this.label = undefined;
+        /**
+         * Label for the close button shown in the drawer on touch viewports.
+         * When omitted the label is localised from the language config.
+         */
+        this.closeLabel = undefined;
+        /**
+         * Accessible label for the trigger button.
+         * When omitted the label is localised from the language config.
+         */
+        this.triggerLabel = undefined;
+        this.handleTriggerClick = () => {
+            this.toggle();
+        };
+        this.handleWillPresent = () => {
+            this.isOpen = true;
+        };
+        this.handleWillDismiss = () => {
+            this.isOpen = false;
+        };
+        this.handleCloseClick = () => {
+            this.dismiss();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    componentDidLoad() {
+        this.wirePopupTrigger();
+    }
+    componentDidUpdate() {
+        this.wirePopupTrigger();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the hint panel. */
+    async present() {
+        var _a, _b;
+        if (this.isTouch) {
+            await ((_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.present());
+        }
+        else {
+            await ((_b = this.popupEl) === null || _b === void 0 ? void 0 : _b.present());
+        }
+    }
+    /** Closes the hint panel. */
+    async dismiss() {
+        var _a, _b;
+        if (this.isTouch) {
+            await ((_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.dismiss());
+        }
+        else {
+            await ((_b = this.popupEl) === null || _b === void 0 ? void 0 : _b.dismiss());
+        }
+    }
+    /** Toggles the hint panel open or closed. */
+    async toggle() {
+        this.isOpen ? this.dismiss() : this.present();
+    }
+    /**
+     * @internal
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+        this.language = state.language;
+        this.region = state.region;
+        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';
+            }
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    listenToBreakpoint(breakpoints) {
+        const wasTouch = this.isTouch;
+        this.isTouch = breakpoints.touch;
+        if (wasTouch !== this.isTouch) {
+            this.isOpen = false;
+        }
+    }
+    wirePopupTrigger() {
+        if (!this.isTouch && this.popupEl && this.triggerButtonEl) {
+            this.popupEl.trigger = this.triggerButtonEl;
+        }
+    }
+    hasTitle() {
+        var _a, _b;
+        const titleSlot = this.el.querySelector('[slot="title"]');
+        return titleSlot !== null && ((_b = (_a = titleSlot.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) > 0;
+    }
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    listenToKeyDown(ev) {
+        if (!this.isOpen || this.isTouch)
+            return;
+        if (keyboard.isEscapeKey(ev)) {
+            ev.stopPropagation();
+            this.dismiss();
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const closeLabel = this.closeLabel || this.innerCloseLabel;
+        const triggerLabel = this.triggerLabel || i18nDsHint[this.language].triggerLabel;
+        return (index.h(index.Host, { key: 'e8a9e9e57768c5ca46710453b1ed7698df22a897' }, index.h("button", { key: '7ea41a18615ec50bbffb0bb5211db8d827ab701c', part: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "dialog", "aria-label": triggerLabel, ref: el => (this.triggerButtonEl = el), onClick: this.handleTriggerClick }, index.h("ds-icon", { key: '4b539e28416f080109972241e2304340a3edb0d5', name: "info-circle", "aria-hidden": "true" })), this.isTouch ? (index.h("ds-drawer", { ref: el => (this.drawerEl = el), closable: false, backdropDismiss: true, onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, index.h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (index.h("div", { class: "hint-header" }, index.h("div", { class: "hint-title" }, this.label || index.h("slot", { name: "title" })))), index.h("div", { class: "hint-body" }, index.h("slot", null))), index.h("ds-button", { color: "primary", class: "hint-close-btn", onClick: this.handleCloseClick }, closeLabel))) : (index.h("ds-popup", { ref: el => (this.popupEl = el), closable: false, placement: this.placement, backdropDismiss: true, role: "dialog", onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, index.h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (index.h("div", { class: "hint-header" }, index.h("div", { class: "hint-title" }, this.label || index.h("slot", { name: "title" })), index.h("ds-close", { onClick: this.handleCloseClick }))), index.h("div", { class: "hint-body" }, index.h("slot", null)))))));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('hint'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Hint.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    oneOf.OneOf(popup_interfaces.POPUP_PLACEMENTS),
+    tslib_es6.__metadata("design:type", String)
+], Hint.prototype, "placement", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Hint.prototype, "label", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Hint.prototype, "closeLabel", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Hint.prototype, "triggerLabel", void 0);
+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);
+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, "listenToBreakpoint", null);
+Hint.style = hintHostCss();
+
+exports.ds_hint = Hint;