@oiz/stzh-components 4.9.0-beta3 → 4.9.0-beta4

package/dist/cjs/stzh-input-description-5cckM0rY.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var index = require('./index-B4CkE4NR.js');
-
-const StzhInputDescription = ({ id, classPrefix, error, description, descriptionLong, descriptionLongTitle, descriptionLongUsed, moreInfoButtonLabel, }) => {
-    return (index.h("div", { class: `${classPrefix}__description-wrapper`, id: id }, index.h("div", { class: `${classPrefix}__error` }, error.length > 0 ? (index.h("ul", { class: `${classPrefix}__error-list` }, error.map(error => (index.h("li", { class: `${classPrefix}__error-listitem` }, error))))) : (index.h("slot", { name: "error" }))), index.h("div", { class: `${classPrefix}__description` }, descriptionLongUsed && (index.h("div", { class: `${classPrefix}__description-long` }, index.h("stzh-popover", { class: `${classPrefix}__description-long-popover`, variant: "tooltip" }, index.h("button", { class: `${classPrefix}__description-long-button`, "aria-label": moreInfoButtonLabel, type: "button", "s-object-id": moreInfoButtonLabel }, index.h("stzh-icon", { class: `${classPrefix}__description-long-icon`, name: "info-help" })), index.h("div", { slot: "label" }, descriptionLongTitle || description ? (descriptionLongTitle || description) : (index.h("slot", { name: "description-long-title" }))), index.h("stzh-text", { curve: "none", slot: "content" }, descriptionLong ? descriptionLong : index.h("slot", { name: "description-long" }))))), index.h("div", { class: `${classPrefix}__description-text` }, description ? description : index.h("slot", { name: "description" })))));
-};
-
-exports.StzhInputDescription = StzhInputDescription;
-//# sourceMappingURL=stzh-input-description-5cckM0rY.js.map
-
-//# sourceMappingURL=stzh-input-description-5cckM0rY.js.map

package/dist/cjs/stzh-input-description-5cckM0rY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stzh-input-description-5cckM0rY.js","sources":["src/components/stzh-input/stzh-input-description.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\n\nexport type StzhInputDescriptionProps = {\n  id: string;\n  classPrefix: string;\n  error?: string[];\n  description?: string;\n  descriptionLong?: string;\n  descriptionLongTitle?: string;\n  descriptionLongUsed?: boolean;\n  moreInfoButtonLabel?: string;\n};\n\nexport const StzhInputDescription: FunctionalComponent<StzhInputDescriptionProps> = ({\n  id,\n  classPrefix,\n  error,\n  description,\n  descriptionLong,\n  descriptionLongTitle,\n  descriptionLongUsed,\n  moreInfoButtonLabel,\n}) => {\n  return (\n    <div class={`${classPrefix}__description-wrapper`} id={id}>\n      <div class={`${classPrefix}__error`}>\n        {error.length > 0 ? (\n          <ul class={`${classPrefix}__error-list`}>\n            {error.map(error => (\n              <li class={`${classPrefix}__error-listitem`}>{error}</li>\n            ))}\n          </ul>\n        ) : (\n          <slot name=\"error\"></slot>\n        )}\n      </div>\n      <div class={`${classPrefix}__description`}>\n        {descriptionLongUsed && (\n          <div class={`${classPrefix}__description-long`}>\n            <stzh-popover class={`${classPrefix}__description-long-popover`} variant=\"tooltip\">\n              <button\n                class={`${classPrefix}__description-long-button`}\n                aria-label={moreInfoButtonLabel}\n                type=\"button\"\n                s-object-id={moreInfoButtonLabel}\n              >\n                <stzh-icon class={`${classPrefix}__description-long-icon`} name=\"info-help\"></stzh-icon>\n              </button>\n              <div slot=\"label\">\n                {descriptionLongTitle || description ? (\n                  descriptionLongTitle || description\n                ) : (\n                  <slot name=\"description-long-title\"></slot>\n                )}\n              </div>\n              <stzh-text curve=\"none\" slot=\"content\">\n                {descriptionLong ? descriptionLong : <slot name=\"description-long\"></slot>}\n              </stzh-text>\n            </stzh-popover>\n          </div>\n        )}\n\n        <div class={`${classPrefix}__description-text`}>\n          {description ? description : <slot name=\"description\"></slot>}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["h"],"mappings":";;;;MAaa,oBAAoB,GAAmD,CAAC,EACnF,EAAE,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,GACpB,KAAI;AACH,IAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,qBAAA,CAAuB,EAAE,EAAE,EAAE,EAAE,EAAA,EACvDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,OAAA,CAAS,IAChC,KAAK,CAAC,MAAM,GAAG,CAAC,IACfA,OAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,CAAc,YAAA,CAAA,EACpC,EAAA,KAAK,CAAC,GAAG,CAAC,KAAK,KACdA,OAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAG,EAAA,WAAW,kBAAkB,EAAG,EAAA,KAAK,CAAM,CAC1D,CAAC,CACC,KAELA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CAC3B,CACG,EACNA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,aAAA,CAAe,EAAA,EACtC,mBAAmB,KAClBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,CAAoB,kBAAA,CAAA,EAAA,EAC5CA,OAAc,CAAA,cAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,0BAAA,CAA4B,EAAE,OAAO,EAAC,SAAS,EAAA,EAChFA,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAG,EAAA,WAAW,CAA2B,yBAAA,CAAA,EAAA,YAAA,EACpC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,mBAAmB,EAAA,EAEhCA,OAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,GAAG,WAAW,CAAA,uBAAA,CAAyB,EAAE,IAAI,EAAC,WAAW,EAAA,CAAa,CACjF,EACTA,OAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACd,EAAA,oBAAoB,IAAI,WAAW,IAClC,oBAAoB,IAAI,WAAW,KAEnCA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,wBAAwB,EAAQ,CAAA,CAC5C,CACG,EACNA,OAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAA,EACnC,eAAe,GAAG,eAAe,GAAGA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,kBAAkB,EAAQ,CAAA,CAChE,CACC,CACX,CACP,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,kBAAA,CAAoB,EAC3C,EAAA,WAAW,GAAG,WAAW,GAAGA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,GAAQ,CACzD,CACF,CACF;AAEV;;;;"}

package/dist/collection/assets/media/icons/mono/.gitignore

@@ -1,3 +0,0 @@
-*
-!.gitignore
-!README.md

package/dist/components/p--fLq8aoA.js

@@ -1,55 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-
-const stzhRowCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span="1"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span="2"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span="3"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span="4"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span="5"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span="6"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span="7"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span="8"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span="9"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span="10"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span="11"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span="12"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium="1"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="2"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="3"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium="4"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="5"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="6"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium="7"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="8"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="9"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium="10"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="11"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="12"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra="1"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="2"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="3"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra="4"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="5"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="6"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra="7"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="8"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="9"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra="10"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="11"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="12"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2)}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 900px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}@media screen and (min-width: 1260px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-large) / -2);margin-right:calc(var(--stzh-grid-gutter-large) / -2)}}@media screen and (min-width: 1600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-ultra) / -2);margin-right:calc(var(--stzh-grid-gutter-ultra) / -2)}}.stzh-row{}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row{}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row{}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}`;
-
-const StzhRow = /*@__PURE__*/ proxyCustomElement(class StzhRow extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Controlling how cells are positioned along a container's main axis */
-        this.justify = "start";
-        /** Control how cells items are positioned along a container's cross axis */
-        this.items = "start";
-        /** Utilities for controlling how rows are positioned in multi-row flex containers. */
-        this.content = "start";
-    }
-    render() {
-        return (h(Host, { key: '4dcd0c5491c21ff434da3f58e3ebdf5da2e70b4b' }, h("div", { key: '0da37e0bd00c1cc53a055c21c6297d7f6a877a96', class: {
-                "stzh-row": true,
-                [`stzh-row--justify-${this.justify}`]: !!this.justify,
-                [`stzh-row--items-${this.items}`]: !!this.items,
-                [`stzh-row--content-${this.content}`]: !!this.content,
-            } }, h("slot", { key: 'a6f99fbcee35df5bd6c5629e0c15d70bdf7091ed' }))));
-    }
-    static get style() { return stzhRowCss(); }
-}, [257, "stzh-row", {
-        "span": [514],
-        "spanSmall": [514, "span-small"],
-        "spanMedium": [514, "span-medium"],
-        "spanLarge": [514, "span-large"],
-        "spanUltra": [514, "span-ultra"],
-        "justify": [513],
-        "items": [513],
-        "content": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-row"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-row":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhRow);
-            }
-            break;
-    } });
-}
-
-export { StzhRow as S, defineCustomElement as d };
-//# sourceMappingURL=p--fLq8aoA.js.map
-
-//# sourceMappingURL=p--fLq8aoA.js.map

package/dist/components/p--fLq8aoA.js.map

@@ -1 +0,0 @@
-{"file":"p--fLq8aoA.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,mxSAAmxS,CAAC;;MCYjyS,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;AAkB3D;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;AACtD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-02MiVwEL.js

@@ -1,271 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-import { a as addWordBreakToLinks } from './p-CN5apKPb.js';
-import { d as defineCustomElement$6 } from './p-BaC_gScF.js';
-import { d as defineCustomElement$5 } from './p-ka1rmhv9.js';
-import { d as defineCustomElement$4 } from './p-B8VeEjIy.js';
-import { d as defineCustomElement$3 } from './p-BCH90Ynw.js';
-import { d as defineCustomElement$2 } from './p-BxhXhWgp.js';
-import { d as defineCustomElement$1 } from './p-BVrrMSYA.js';
-
-const stzhDatalistItemCss = () => `.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--vertical-wrapper-padding:var(
-    --stzh-datalist-item-vertical-wrapper-padding,
-    var(--stzh-space-xsmall)
-  );--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.value-truncate.sc-stzh-datalist-item-h{--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column;min-width:0}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;min-width:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--vertical-wrapper-padding);padding-bottom:var(--vertical-wrapper-padding)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}`;
-
-let datalistItemCounter = 0;
-const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhItemActionClick = createEvent(this, "stzhItemActionClick");
-        this.stzhClick = createEvent(this, "stzhClick");
-        /** Icon position */
-        this.iconPosition = "right";
-        /** Label */
-        this.label = "";
-        /** Value (or use value slot instead) */
-        this.value = "";
-        /** Whether value should be truncate or not */
-        this.valueTruncate = false;
-        /** Readspeaker label */
-        this.readspeakerLabel = "";
-        /** Readspeaker link */
-        this.readspeakerHref = "";
-        /** Meta */
-        this.meta = "";
-        this._meta = [];
-        /** Status Label */
-        this.statusLabel = "";
-        /** Status Type */
-        this.statusType = "default";
-        /** Whether the item has child items (only used internally by stzh-datalist). */
-        this.hasNested = false;
-        this.direction = "vertical";
-        this.variant = "default";
-        this.bigLabel = false;
-        this.external = false;
-        this.isPhone = false;
-        this.onActionClick = (originalEvent) => {
-            this.stzhItemActionClick.emit({
-                component: "stzh-datalist-item",
-                originalEvent,
-            });
-        };
-        this.onClick = (event) => {
-            this.stzhClick.emit({
-                component: "stzh-datalist-item",
-                originalEvent: event,
-                href: this.href,
-            });
-        };
-        this.handleDirectionChange = (event) => {
-            this.direction = event.detail.value;
-        };
-        this.handleVariantChange = (event) => {
-            this.variant = event.detail.value;
-        };
-        this.handleBigLabelChange = (event) => {
-            this.bigLabel = event.detail.value;
-        };
-    }
-    metaWatcher(newValue) {
-        if (typeof newValue === "string") {
-            try {
-                this._meta = JSON.parse(newValue);
-            }
-            catch (ex) {
-                this._meta = newValue === "" ? [] : [newValue];
-            }
-        }
-        else {
-            this._meta = newValue;
-        }
-    }
-    externalWatcher() {
-        this.external = this.rel && this.rel.includes("external");
-    }
-    hrefWatcher() {
-        this.isPhone = this.href && (this.href.startsWith("tel:") || this.href.startsWith("fax:"));
-    }
-    addWordBreakToLinks() {
-        var _a;
-        const links = Array.from(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("stzh-datalist-item__value-text")) || []);
-        addWordBreakToLinks(links);
-    }
-    renderInner(isButton, hasActionButton) {
-        const Item = isButton ? "button" : this.href ? "a" : "div";
-        const Icon = () => (h(Fragment, null, (this.href || this.icon) && !hasActionButton && !isButton && (h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : this.isPhone ? "phone" : this.external && "external-link" }))), isButton && (h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })))));
-        return (h(Fragment, null, this.variant === "table" && (h(Item, { "aria-hidden": this.label ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-label`, class: {
-                "stzh-datalist-item__label": true,
-                "is-button": isButton,
-                "is-link": !!this.href,
-            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.label)), h(Item, { id: `${this.datalistItemId}-value`, class: {
-                "stzh-datalist-item__value": true,
-                "is-button": isButton,
-                "is-link": !!this.href,
-            }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== "div"
-                ? `${this.variant === "table" ? `${this.datalistItemId}-label` : ""} ${this.datalistItemId}-value ${this.datalistItemId}-meta`
-                : null, "aria-controls": this.a11yControls || null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, onClick: this.onClick }, this.variant === "default" && h("div", { class: "stzh-datalist-item__label" }, this.label), this.external && (h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel)), this.download && (h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel)), h("div", { class: "stzh-datalist-item__value-wrapper" }, this.iconPosition === "left" && h(Icon, null), this.value ? (h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text", innerHTML: this.value })) : (h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" }))), this.iconPosition === "right" && h(Icon, null))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
-                "stzh-datalist-item__meta": true,
-                "is-button": isButton,
-                "is-link": !!this.href,
-            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.statusLabel && (h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType })), this._meta.length > 0 && (h("span", { class: "stzh-datalist-item__meta-text" }, this._meta.map((meta, index) => (h(Fragment, null, h("span", { class: "stzh-datalist-item__meta-text-inner" }, meta), index + 1 !== this._meta.length && h("span", { class: "stzh-datalist-item__meta-separator" }, "|"))))))), this.readspeakerHref && this.readspeakerLabel && (h("stzh-button", { class: "stzh-datalist-item__readspeaker", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", "icon-position": "right", icon: "volume-medium", size: "small", href: this.readspeakerHref, target: "_blank" }, this.readspeakerLabel))));
-    }
-    renderLeadingIcon(isButton) {
-        const Item = isButton ? "button" : this.href ? "a" : "div";
-        return (h(Item, { role: "presentation", "aria-hidden": "true", tabindex: "-1", class: {
-                "stzh-datalist-item__leading": true,
-                "is-button": isButton,
-                "is-link": !!this.href,
-            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.leadingIcon && (h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon })))));
-    }
-    async componentDidLoad() {
-        // execute connectedCallbck again, because sometimes has problem rendering
-        this.connectedCallback();
-        this.addWordBreakToLinks();
-    }
-    async componentWillLoad() {
-        this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;
-        this.metaWatcher(this.meta);
-        this.externalWatcher();
-        this.hrefWatcher();
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "datalist-item");
-        }
-    }
-    async connectedCallback() {
-        var _a, _b, _c;
-        this.datalist = this.element.closest("stzh-datalist");
-        if (this.datalist) {
-            this.variant = this.datalist.variant;
-            this.bigLabel = this.datalist.bigLabel;
-            this.direction = await this.datalist.getCurrentDirection();
-            (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.addEventListener("stzhDirectionChange", this.handleDirectionChange);
-            (_b = this.datalist) === null || _b === void 0 ? void 0 : _b.addEventListener("stzhVariantChange", this.handleVariantChange);
-            (_c = this.datalist) === null || _c === void 0 ? void 0 : _c.addEventListener("stzhBigLabelChange", this.handleBigLabelChange);
-        }
-    }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        if (this.datalist) {
-            (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.removeEventListener("stzhDirectionChange", this.handleDirectionChange);
-            (_b = this.datalist) === null || _b === void 0 ? void 0 : _b.removeEventListener("stzhVariantChange", this.handleVariantChange);
-            (_c = this.datalist) === null || _c === void 0 ? void 0 : _c.removeEventListener("stzhBigLabelChange", this.handleBigLabelChange);
-            this.datalist = null;
-        }
-    }
-    render() {
-        const isButton = typeof this.a11yExpanded !== "undefined" || typeof this.a11yControls !== "undefined";
-        const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);
-        const classes = {
-            "stzh-datalist-item": true,
-            "stzh-datalist-item--is-interactive": !!this.href || isButton,
-            "stzh-datalist-item--is-link": !!this.href,
-            "stzh-datalist-item--is-button": isButton,
-            "stzh-datalist-item--is-expanded": this.a11yExpanded,
-            "stzh-datalist-item--big-label": this.bigLabel,
-            [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === "default",
-            [`stzh-datalist-item--${this.variant}`]: !!this.variant,
-        };
-        let ActionItem = isButton ? "button" : hasActionButton ? "div" : "a";
-        const ActionButton = () => {
-            return (h("stzh-button", { class: {
-                    "stzh-datalist-item__action": true,
-                    "is-button": true,
-                }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.onActionClick }));
-        };
-        return (h(Host, { role: "listitem", class: { "value-truncate": this.valueTruncate } }, h("div", { class: classes }, this.direction === "horizontal" || this.variant === "table" ? (h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton, hasActionButton))) : (h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton, hasActionButton)))), h(ActionItem, { role: hasActionButton ? null : "presentation", "aria-hidden": hasActionButton ? null : "true", tabindex: "-1", class: {
-                "stzh-datalist-item__action-list": true,
-                "is-button": isButton,
-                "is-link": !!this.href && !this.iconHref,
-            }, href: !this.iconHref ? this.href : null, rel: !this.iconHref ? this.rel : null, target: !this.iconHref ? this.target : null, download: !this.iconHref ? this.download : null }, hasActionButton &&
-            (this.iconTooltip ? (h("stzh-tooltip", { content: this.iconTooltip }, ActionButton())) : (ActionButton()))), h("div", { class: "stzh-datalist-item__spacer" })), this.hasNested && (h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "meta": ["metaWatcher"],
-        "rel": ["externalWatcher"],
-        "href": ["hrefWatcher"]
-    }; }
-    static get style() { return stzhDatalistItemCss(); }
-}, [262, "stzh-datalist-item", {
-        "localization": [16],
-        "href": [513],
-        "rel": [1],
-        "target": [1],
-        "download": [1],
-        "leadingIcon": [1, "leading-icon"],
-        "icon": [1],
-        "iconPosition": [1, "icon-position"],
-        "iconLabel": [1, "icon-label"],
-        "iconTooltip": [1, "icon-tooltip"],
-        "iconHref": [1, "icon-href"],
-        "label": [1],
-        "value": [1],
-        "valueTruncate": [4, "value-truncate"],
-        "readspeakerLabel": [1, "readspeaker-label"],
-        "readspeakerHref": [1, "readspeaker-href"],
-        "meta": [513],
-        "statusLabel": [513, "status-label"],
-        "statusType": [1, "status-type"],
-        "a11yExpanded": [516, "a11y-expanded"],
-        "a11yControls": [1, "a11y-controls"],
-        "hasNested": [4, "has-nested"],
-        "direction": [32],
-        "variant": [32],
-        "bigLabel": [32]
-    }, undefined, {
-        "meta": ["metaWatcher"],
-        "rel": ["externalWatcher"],
-        "href": ["hrefWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-datalist-item", "stzh-badge", "stzh-button", "stzh-icon", "stzh-status", "stzh-text", "stzh-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-datalist-item":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhDatalistItem);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "stzh-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-status":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-text":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhDatalistItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-02MiVwEL.js.map
-
-//# sourceMappingURL=p-02MiVwEL.js.map

package/dist/components/p-02MiVwEL.js.map

@@ -1 +0,0 @@
-{"file":"p-02MiVwEL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n  --vertical-wrapper-padding: var(\n    --stzh-datalist-item-vertical-wrapper-padding,\n    #{space(\"xsmall\")}\n  );\n  --text-overflow: clip;\n  --white-space: normal;\n  --overflow: visible;\n  --width: initial;\n  --max-width: initial;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n:host(.value-truncate) {\n  --text-overflow: ellipsis;\n  --white-space: nowrap;\n  --overflow: hidden;\n  --max-width: 100%;\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space(\"xsmall\");\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  &__value-text {\n    --color: initial;\n    min-width: 0;\n\n    @include fontCurve(\"p1\");\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve(\"caption\");\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space(\"xsmall\");\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__readspeaker {\n    width: fit-content;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__wrapper {\n    flex-grow: inherit;\n  }\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: var(--vertical-wrapper-padding);\n      padding-bottom: var(--vertical-wrapper-padding);\n    }\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xxsmall\");\n      padding-bottom: space(\"xxsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: calc(#{space(\"xxsmall\")} + 12px);\n  }\n\n  &--direction-horizontal &__readspeaker {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: space(\"xxsmall\");\n    padding-left: space(\"medium\");\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space(\"xsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space(\"xsmall\");\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize(\"nano\");\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize(\"milli\");\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  /** Big label */\n\n  &--table#{&}--big-label &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n    color: $colorGrey80;\n  }\n\n  &--table#{&}--big-label &__leading,\n  &--table#{&}--big-label &__value,\n  &--table#{&}--big-label &__label,\n  &--table#{&}--big-label &__meta,\n  &--table#{&}--big-label &__action-list {\n    &:not(:empty) {\n      padding-top: 0;\n      padding-bottom: 0;\n\n      @include mq($from: small) {\n        padding-top: space(\"xsmall\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &--table#{&}--big-label &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n\n    @include mq($to: small) {\n      padding-left: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistItemClickEvent,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhLocaleComponent,\n  StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value property instead)\n * @slot readspeaker - Slot for readspeaker\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true,\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Whether value should be truncate or not */\n  @Prop() valueTruncate: boolean = false;\n\n  /** Readspeaker label */\n  @Prop() readspeakerLabel: string = \"\";\n\n  /** Readspeaker link */\n  @Prop() readspeakerHref: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether the item has child items (only used internally by stzh-datalist). */\n  @Prop() hasNested: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n  @State() bigLabel: boolean = false;\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  };\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  };\n\n  private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n    this.bigLabel = event.detail.value;\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon\n              class=\"stzh-datalist-item__icon\"\n              name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n            ></stzh-icon>\n          </div>\n        )}\n\n        {isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        )}\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" && (\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href,\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        )}\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={\n            Item !== \"div\"\n              ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n                  this.datalistItemId\n                }-meta`\n              : null\n          }\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n          {this.external && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n          )}\n          {this.download && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n          )}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value ? (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n            ) : (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            )}\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel && (\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          )}\n          {this._meta.length > 0 && (\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) => (\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">|</span>}\n                </Fragment>\n              ))}\n            </span>\n          )}\n        </Item>\n\n        {this.readspeakerHref && this.readspeakerLabel && (\n          <stzh-button\n            class=\"stzh-datalist-item__readspeaker\"\n            variant=\"tertiary-plain\"\n            no-padding-left=\"true\"\n            no-padding-right=\"true\"\n            icon-position=\"right\"\n            icon=\"volume-medium\"\n            size=\"small\"\n            href={this.readspeakerHref}\n            target=\"_blank\"\n          >\n            {this.readspeakerLabel}\n          </stzh-button>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href,\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon && (\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        )}\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n    this.addWordBreakToLinks();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.bigLabel = this.datalist.bigLabel;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\" || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--big-label\": this.bigLabel,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n    };\n\n    let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true,\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    };\n\n    return (\n      <Host role=\"listitem\" class={{ \"value-truncate\": this.valueTruncate }}>\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ? (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n          ) : (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n            </Fragment>\n          )}\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref,\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {hasActionButton &&\n              (this.iconTooltip ? (\n                <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n              ) : (\n                ActionButton()\n              ))}\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n        {this.hasNested && (\n          <div class=\"stzh-datalist-item__nested\">\n            <div class=\"stzh-datalist-item__nested-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}