npm - @oiz/stzh-components - Versions diffs - 4.12.1 → 4.13.0-beta1 - Mend

@oiz/stzh-components 4.12.1 → 4.13.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1081) hide show

package/dist/components/{p-CnS9iJUS.js → p-C5ORTu7L.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 import { a as api } from './p-Cpg2gH_9.js';
 const stzhShowCss = () => `: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{--show-display:contents;--hide-display:none;--current-display:var(--hide-display);display:var(--current-display)}:host([mikro]){--current-display:var(--show-display)}:host([mikro=false]){--current-display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){--current-display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 900px){:host([medium]){--current-display:var(--show-display)}}@media screen and (min-width: 900px){:host([medium=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){--current-display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 1600px){:host([ultra]){--current-display:var(--show-display)}}@media screen and (min-width: 1600px){:host([ultra=false]){--current-display:var(--hide-display)}}`;
@@ -57,9 +57,9 @@ const StzhShow = /*@__PURE__*/ proxyCustomElement(class StzhShow extends H {
     }
     render() {
         const timeNow = Date.now();
-        return (h(Host, { key: '70a4992118264a868bafea6d72a9737e8aecddff', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
+        return (h(Host, { key: '127cc31da361580db8d9ffa32d5f26e9e9ae54d4', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
                 (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||
-                this.closedByCookie }, h("slot", { key: '40a2d597936375f8575a7717eba9c42831a3eeb3' })));
+                this.closedByCookie }, h("slot", { key: '7e3976c80768dfbdea6814f3347e4cdf282bdddc' })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -95,6 +95,6 @@ function defineCustomElement() {
 }
 export { StzhShow as S, defineCustomElement as d };
-//# sourceMappingURL=p-CnS9iJUS.js.map
+//# sourceMappingURL=p-C5ORTu7L.js.map
-//# sourceMappingURL=p-CnS9iJUS.js.map
+//# sourceMappingURL=p-C5ORTu7L.js.map

package/dist/components/{p-CnS9iJUS.js.map → p-C5ORTu7L.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CnS9iJUS~~.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,k3DAAk3D,CAAC;;ACM94D,MAAM,gBAAgB,GAAG,4BAA4B;MAUxC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BE;;;;;AAKG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA2CrB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAsBxC;AA9DC,IAAA,YAAY,CAAC,KAA0F,EAAA;AACrG,QAAA,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;AACtF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAAC,GAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;;;AAM/E,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;QAG/B,IAAI,cAAc,GAAG,KAAK;AAE1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAGA,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,CAAC;YAErE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI;;;AAIzB,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc;;AAItC,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAQjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;IAG7C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAE1B,QACE,CAAC,CAAA,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AAC9D,iBAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAC/D,gBAAA,IAAI,CAAC,cAAc,EAAA,EAGrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n /\n\n:host {\n --show-display: contents;\n --hide-display: none;\n --current-display: var(--hide-display);\n\n display: var(--current-display);\n}\n\n/ Mikro /\n\n:host([mikro]) {\n --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n --current-display: var(--hide-display);\n}\n\n/ Small /\n\n:host([small]) {\n @include mq($from: small) {\n --current-display: var(--show-display);\n }\n}\n\n:host([small=\"false\"]) {\n @include mq($from: small) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Medium /\n\n:host([medium]) {\n @include mq($from: medium) {\n --current-display: var(--show-display);\n }\n}\n\n:host([medium=\"false\"]) {\n @include mq($from: medium) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Large /\n\n:host([large]) {\n @include mq($from: large) {\n --current-display: var(--show-display);\n }\n}\n\n:host([large=\"false\"]) {\n @include mq($from: large) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Ultra /\n\n:host([ultra]) {\n @include mq($from: ultra) {\n --current-display: var(--show-display);\n }\n}\n\n:host([ultra=\"false\"]) {\n @include mq($from: ultra) {\n --current-display: var(--hide-display);\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-show\",\n styleUrl: \"stzh-show.scss\",\n shadow: true,\n})\nexport class StzhShow {\n /* Mikro /\n @Prop({ reflect: true }) mikro: boolean;\n\n /* Small /\n @Prop({ reflect: true }) small: boolean;\n\n /* Medium /\n @Prop({ reflect: true }) medium: boolean;\n\n /* Large /\n @Prop({ reflect: true }) large: boolean;\n\n /* Ultra /\n @Prop({ reflect: true }) ultra: boolean;\n\n /* Show from date /\n @Prop() showFromDate: Date \| string;\n private _showFromDate: Date;\n\n /* Hide from date /\n @Prop() hideFromDate: Date \| string;\n private _hideFromDate: Date;\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-show-close-{name})\n * and if not empty (component inside already closed before) will hide show.\n * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n */\n @Prop() closeKey: string = \"\";\n\n @Listen(\"stzhClose\")\n closeWatcher(event: CustomEvent<StzhBannerCloseEvent \| StzhMessageCloseEvent \| StzhGhettoboxCloseEvent>) {\n if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n if (this.closeKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n }\n\n @Watch(\"showFromDate\")\n showFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._showFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._showFromDate = newValue;\n }\n\n let closedByCookie = false;\n\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n if (timeClosed && (!this._showFromDate \|\| Number(timeClosed) >= this._showFromDate.getTime())) {\n closedByCookie = true;\n }\n }\n\n this.closedByCookie = closedByCookie;\n }\n\n @Watch(\"hideFromDate\")\n hideFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._hideFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._hideFromDate = newValue;\n }\n }\n\n @Element() element: HTMLStzhShowElement;\n\n private closedByCookie: boolean = false;\n\n componentWillLoad() {\n this.showFromDateWatcher(this.showFromDate);\n this.hideFromDateWatcher(this.hideFromDate);\n }\n\n render() {\n const timeNow = Date.now();\n\n return (\n <Host\n hidden={\n (this._showFromDate && timeNow <= this._showFromDate.getTime()) \|\|\n (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) \|\|\n this.closedByCookie\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-C5ORTu7L.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,k3DAAk3D,CAAC;;ACM94D,MAAM,gBAAgB,GAAG,4BAA4B;MAUxC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BE;;;;;AAKG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA2CrB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAsBxC;AA9DC,IAAA,YAAY,CAAC,KAA0F,EAAA;AACrG,QAAA,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;AACtF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAAC,GAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;;;AAM/E,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;QAG/B,IAAI,cAAc,GAAG,KAAK;AAE1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAGA,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,CAAC;YAErE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI;;;AAIzB,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc;;AAItC,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAQjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;IAG7C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAE1B,QACE,CAAC,CAAA,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AAC9D,iBAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAC/D,gBAAA,IAAI,CAAC,cAAc,EAAA,EAGrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n /\n\n:host {\n --show-display: contents;\n --hide-display: none;\n --current-display: var(--hide-display);\n\n display: var(--current-display);\n}\n\n/ Mikro /\n\n:host([mikro]) {\n --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n --current-display: var(--hide-display);\n}\n\n/ Small /\n\n:host([small]) {\n @include mq($from: small) {\n --current-display: var(--show-display);\n }\n}\n\n:host([small=\"false\"]) {\n @include mq($from: small) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Medium /\n\n:host([medium]) {\n @include mq($from: medium) {\n --current-display: var(--show-display);\n }\n}\n\n:host([medium=\"false\"]) {\n @include mq($from: medium) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Large /\n\n:host([large]) {\n @include mq($from: large) {\n --current-display: var(--show-display);\n }\n}\n\n:host([large=\"false\"]) {\n @include mq($from: large) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Ultra /\n\n:host([ultra]) {\n @include mq($from: ultra) {\n --current-display: var(--show-display);\n }\n}\n\n:host([ultra=\"false\"]) {\n @include mq($from: ultra) {\n --current-display: var(--hide-display);\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-show\",\n styleUrl: \"stzh-show.scss\",\n shadow: true,\n})\nexport class StzhShow {\n /* Mikro /\n @Prop({ reflect: true }) mikro: boolean;\n\n /* Small /\n @Prop({ reflect: true }) small: boolean;\n\n /* Medium /\n @Prop({ reflect: true }) medium: boolean;\n\n /* Large /\n @Prop({ reflect: true }) large: boolean;\n\n /* Ultra /\n @Prop({ reflect: true }) ultra: boolean;\n\n /* Show from date /\n @Prop() showFromDate: Date \| string;\n private _showFromDate: Date;\n\n /* Hide from date /\n @Prop() hideFromDate: Date \| string;\n private _hideFromDate: Date;\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-show-close-{name})\n * and if not empty (component inside already closed before) will hide show.\n * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n */\n @Prop() closeKey: string = \"\";\n\n @Listen(\"stzhClose\")\n closeWatcher(event: CustomEvent<StzhBannerCloseEvent \| StzhMessageCloseEvent \| StzhGhettoboxCloseEvent>) {\n if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n if (this.closeKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n }\n\n @Watch(\"showFromDate\")\n showFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._showFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._showFromDate = newValue;\n }\n\n let closedByCookie = false;\n\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n if (timeClosed && (!this._showFromDate \|\| Number(timeClosed) >= this._showFromDate.getTime())) {\n closedByCookie = true;\n }\n }\n\n this.closedByCookie = closedByCookie;\n }\n\n @Watch(\"hideFromDate\")\n hideFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._hideFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._hideFromDate = newValue;\n }\n }\n\n @Element() element: HTMLStzhShowElement;\n\n private closedByCookie: boolean = false;\n\n componentWillLoad() {\n this.showFromDateWatcher(this.showFromDate);\n this.hideFromDateWatcher(this.hideFromDate);\n }\n\n render() {\n const timeNow = Date.now();\n\n return (\n <Host\n hidden={\n (this._showFromDate && timeNow <= this._showFromDate.getTime()) \|\|\n (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) \|\|\n this.closedByCookie\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-D7YAOnX0.js → p-CDOLFG2o.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { d as defineCustomElement$4 } from './p-Yktwo3G-.js';
-import { d as defineCustomElement$3 } from './p-ts8WMMWF.js';
-import { d as defineCustomElement$2 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$1 } from './p-D1qHu5Qi.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { d as defineCustomElement$4 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$3 } from './p-DvCfh0K2.js';
+import { d as defineCustomElement$2 } from './p-mPSUVIkD.js';
+import { d as defineCustomElement$1 } from './p-CxqE2nhG.js';
 const stzhTagCss = () => `.sc-stzh-tag-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-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::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-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:calc(var(--stzh-space-small) - var(--border-width));--padding-right:calc(var(--stzh-space-small) - var(--border-width));--border-width:0px;--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(
     --stzh-tag-hover-background-color,
@@ -107,7 +107,7 @@ const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends H {
             [`stzh-tag--${this.nonInteractive ? "not" : "is"}-interactive`]: true,
         };
         const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: 'e245949084a121262460c8f6300ee82255cd40ec', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'baaac8113b09f16293ccd615cb8b8e5b710255ad', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
+        return (h(Host, { key: '18b13050db1bb0d7bb10a21a84534c1627137c57', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '57a7bb1a02694ea343df1402086a3080dd1f2a9c', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
                 "stzh-tag__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,
@@ -168,6 +168,6 @@ function defineCustomElement() {
 }
 export { StzhTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-D7YAOnX0.js.map
+//# sourceMappingURL=p-CDOLFG2o.js.map
-//# sourceMappingURL=p-D7YAOnX0.js.map
+//# sourceMappingURL=p-CDOLFG2o.js.map

package/dist/components/{p-D7YAOnX0.js.map → p-CDOLFG2o.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-D7YAOnX0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":["/*\n @prop --height: Height of tag\n * @prop --padding-top: Padding top of tag\n * @prop --padding-bottom: Padding bottom of tag\n * @prop --padding-left: Padding left of tag\n * @prop --padding-right: Padding right of tag\n * @prop --border-width: Border width of tag\n * @prop --color: Color of tag\n * @prop --background-color: Background color of tag\n * @prop --hover-color: Hover color of tag\n * @prop --hover-background-color: Hover background color of tag\n /\n\n@mixin tag--forced-colors-default() {\n --border-width: 2px;\n\n --color: CanvasText;\n --border-color: CanvasText;\n --background-color: Canvas;\n\n --hover-color: CanvasText;\n --hover-border-color: CanvasText;\n --hover-background-color: Canvas;\n}\n\n@mixin tag--forced-colors-button() {\n --border-width: 2px;\n\n --color: ButtonText;\n --border-color: ButtonBorder;\n --background-color: ButtonFace;\n\n --hover-color: HighlightText;\n --hover-border-color: Highlight;\n --hover-background-color: Highlight;\n}\n\n@mixin tag--forced-colors-link() {\n --border-width: 2px;\n\n --color: LinkText;\n --border-color: LinkText;\n --background-color: Canvas;\n\n --hover-color: LinkText;\n --hover-border-color: LinkText;\n --hover-background-color: Canvas;\n}\n\n@mixin button--forced-colors-disabled() {\n --border-width: 2px;\n\n --color: GrayText;\n --border-color: GrayText;\n --background-color: Canvas;\n\n --hover-color: GrayText;\n --hover-border-color: GrayText;\n --hover-background-color: Canvas;\n}\n\n:host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: calc(#{space(\"small\")} - var(--border-width));\n --padding-right: calc(#{space(\"small\")} - var(--border-width));\n --border-width: 0px;\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(\n --stzh-tag-hover-background-color,\n var(--background-color)\n );\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-tag-secondary-hover-background-color,\n var(--background-color)\n );\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-tag-disabled-background-color,\n #{$colorGrey20}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize(\"nano\");\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: var(--border-width) solid transparent;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n\n @media (forced-colors: active) {\n transition: none;\n }\n }\n\n &__label {\n text-align: left;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n / Size /\n\n &--size-large &__button {\n @include font(\"heavy\");\n @include fontSize(\"milli\");\n }\n\n / Non-Interactive /\n &--not-interactive {\n @media (forced-colors: active) {\n @include tag--forced-colors-default;\n }\n }\n\n / Interactive & Button /\n &--is-interactive#{&}--no-href {\n @media (forced-colors: active) {\n @include tag--forced-colors-button;\n }\n }\n\n / Interactive & Link /\n &--is-interactive#{&}--has-href {\n @media (forced-colors: active) {\n @include tag--forced-colors-link;\n }\n }\n\n / Disabled /\n &--is-disabled &__button {\n cursor: not-allowed;\n\n @media (forced-colors: active) {\n @include button--forced-colors-disabled;\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true,\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type,\n [`stzh-tag--${this.href ? \"has\" : \"no\"}-href`]: true,\n [`stzh-tag--${this.nonInteractive ? \"not\" : \"is\"}-interactive`]: true,\n };\n\n const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ? (\n <Tag\n ref={el => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n ) : (\n <Tag\n ref={el => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CDOLFG2o.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":["/*\n @prop --height: Height of tag\n * @prop --padding-top: Padding top of tag\n * @prop --padding-bottom: Padding bottom of tag\n * @prop --padding-left: Padding left of tag\n * @prop --padding-right: Padding right of tag\n * @prop --border-width: Border width of tag\n * @prop --color: Color of tag\n * @prop --background-color: Background color of tag\n * @prop --hover-color: Hover color of tag\n * @prop --hover-background-color: Hover background color of tag\n /\n\n@mixin tag--forced-colors-default() {\n --border-width: 2px;\n\n --color: CanvasText;\n --border-color: CanvasText;\n --background-color: Canvas;\n\n --hover-color: CanvasText;\n --hover-border-color: CanvasText;\n --hover-background-color: Canvas;\n}\n\n@mixin tag--forced-colors-button() {\n --border-width: 2px;\n\n --color: ButtonText;\n --border-color: ButtonBorder;\n --background-color: ButtonFace;\n\n --hover-color: HighlightText;\n --hover-border-color: Highlight;\n --hover-background-color: Highlight;\n}\n\n@mixin tag--forced-colors-link() {\n --border-width: 2px;\n\n --color: LinkText;\n --border-color: LinkText;\n --background-color: Canvas;\n\n --hover-color: LinkText;\n --hover-border-color: LinkText;\n --hover-background-color: Canvas;\n}\n\n@mixin button--forced-colors-disabled() {\n --border-width: 2px;\n\n --color: GrayText;\n --border-color: GrayText;\n --background-color: Canvas;\n\n --hover-color: GrayText;\n --hover-border-color: GrayText;\n --hover-background-color: Canvas;\n}\n\n:host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: calc(#{space(\"small\")} - var(--border-width));\n --padding-right: calc(#{space(\"small\")} - var(--border-width));\n --border-width: 0px;\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(\n --stzh-tag-hover-background-color,\n var(--background-color)\n );\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-tag-secondary-hover-background-color,\n var(--background-color)\n );\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-tag-disabled-background-color,\n #{$colorGrey20}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize(\"nano\");\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: var(--border-width) solid transparent;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n\n @media (forced-colors: active) {\n transition: none;\n }\n }\n\n &__label {\n text-align: left;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n / Size /\n\n &--size-large &__button {\n @include font(\"heavy\");\n @include fontSize(\"milli\");\n }\n\n / Non-Interactive /\n &--not-interactive {\n @media (forced-colors: active) {\n @include tag--forced-colors-default;\n }\n }\n\n / Interactive & Button /\n &--is-interactive#{&}--no-href {\n @media (forced-colors: active) {\n @include tag--forced-colors-button;\n }\n }\n\n / Interactive & Link /\n &--is-interactive#{&}--has-href {\n @media (forced-colors: active) {\n @include tag--forced-colors-link;\n }\n }\n\n / Disabled /\n &--is-disabled &__button {\n cursor: not-allowed;\n\n @media (forced-colors: active) {\n @include button--forced-colors-disabled;\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true,\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type,\n [`stzh-tag--${this.href ? \"has\" : \"no\"}-href`]: true,\n [`stzh-tag--${this.nonInteractive ? \"not\" : \"is\"}-interactive`]: true,\n };\n\n const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ? (\n <Tag\n ref={el => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n ) : (\n <Tag\n ref={el => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CqIeGIYq.js → p-CIG3atcV.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 const stzhTextCss = () => `.sc-stzh-text-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-text-h,[stzh-hidden].sc-stzh-text-h{display:none}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(
     --stzh-text-grid-template-areas,
@@ -43,7 +43,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (h(Host, { key: 'd450c2a2df5504dd70142892aad9a1d81bb47729' }, h("div", { key: 'e03fd12f42bd1f632de9775cbd55ed3f3087a52a', class: {
+        return (h(Host, { key: '28e2e7b5a061565551898f4d509ba0b7908f592b' }, h("div", { key: '66cdf412433d270244f654af9d633bcc13a46fb8', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -53,7 +53,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
                 [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
                 [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
                 [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-            } }, h("div", { key: '49cbea83d2e708948392c0e571faec5fe7f6f906', class: "stzh-text__text" }, h("div", { key: 'f9d771ee233fdf095a15b242559e261dea4ed8a3', class: "stzh-text__icon" }, h("slot", { key: '264dfc25a49f2efa1bd3c79f19e2f8af4c08f858', name: "icon" })), h("div", { key: '7e459045623795dfb2a455111ab5bb249be4b814', class: "stzh-text__text-inner" }, h("slot", { key: '4e6d1126d32c519b9d59d83d919a036229e4d69e' }))))));
+            } }, h("div", { key: 'b0f364a885dea731283b76d14023490e34531417', class: "stzh-text__text" }, h("div", { key: '2f6ffe17910f84a2092f51a51151ff12f0e70102', class: "stzh-text__icon" }, h("slot", { key: '9ed2b8653b000a1eac82ae1476e30840057f2757', name: "icon" })), h("div", { key: '43b231aebbf9ce3fd072ffd087e4309b7f050299', class: "stzh-text__text-inner" }, h("slot", { key: 'ab35e6f3f752fe416f3784c066eb7f23233a536d' }))))));
     }
     static get style() { return stzhTextCss(); }
 }, [262, "stzh-text", {
@@ -82,6 +82,6 @@ function defineCustomElement() {
 }
 export { StzhText as S, defineCustomElement as d };
-//# sourceMappingURL=p-CqIeGIYq.js.map
+//# sourceMappingURL=p-CIG3atcV.js.map
-//# sourceMappingURL=p-CqIeGIYq.js.map
+//# sourceMappingURL=p-CIG3atcV.js.map

package/dist/components/{p-CqIeGIYq.js.map → p-CIG3atcV.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CqIeGIYq~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,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,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n\n @media (hover: none) {\n color: inherit;\n }\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font(\"heavy\");\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: initial;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font(\"heavy\");\n @include fontCurve(\"lead\", \"lead\");\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true,\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CIG3atcV.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,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,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n\n @media (hover: none) {\n color: inherit;\n }\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font(\"heavy\");\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: initial;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font(\"heavy\");\n @include fontCurve(\"lead\", \"lead\");\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true,\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BmZW5NzL.js → p-CJgyNq5X.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { h as hasSlot } from './p-CN5apKPb.js';
-import { S as StzhInputDescription } from './p-x2lzAuxg.js';
-import { d as defineCustomElement$3 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$2 } from './p-BNRtW-oE.js';
-import { d as defineCustomElement$1 } from './p-CqIeGIYq.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { a as hasDefaultSlotContent, h as hasSlot } from './p-DBHUqFOB.js';
+import { S as StzhInputDescription } from './p-CbIALTef.js';
+import { d as defineCustomElement$3 } from './p-mPSUVIkD.js';
+import { d as defineCustomElement$2 } from './p-Bi0j3C9E.js';
+import { d as defineCustomElement$1 } from './p-CIG3atcV.js';
 const stzhRadioCss = () => `.sc-stzh-radio-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-radio-h,[stzh-hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::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-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{--label-color:var(--stzh-radio-label-color, var(--stzh-base-color));--label-hover-color:var(--stzh-radio-label-hover-color, var(--stzh-color-primary70));--label-hover-checked-color:var(
     --stzh-radio-label-hover-checked-color,
@@ -38,6 +38,18 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
         this.label = "";
         /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
         this.a11yDescribedby = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.focusedByInput = false;
         this.handleReset = async () => {
             this.checked = this.defaultChecked;
@@ -82,6 +94,19 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-radio"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -111,6 +136,9 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
             this._error = [];
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     async componentWillLoad() {
         this.inputId = `stzh-radio-${radioCounter++}`;
         this.errorWatcher(this.error);
@@ -124,6 +152,8 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
         const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
         const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
         const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-radio": true,
             "stzh-radio--has-description": descriptionUsed,
@@ -133,11 +163,11 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
             "stzh-radio--is-invalid": this.invalid || errorUsed,
             "stzh-radio--is-disabled": this.disabled,
         };
-        return (h(Host, { key: 'f5b4a6a3fc1b36166f2f1244e88a133ef2555dde', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'df81304c66119b4ea99f911b21272c1afbf5f99d', class: classes }, h("label", { key: '24096e4ee57817ba5e4590bca41a0757b9e9962c', class: "stzh-radio__field-wrapper" }, h("input", { key: '32422449fb206c15a837dea57d6a647bdc52ff92', class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: String(this.value), disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'a00abc3aa709f39fd490155f816bd8f8ce6c43df', class: "stzh-radio__mark" }, h("div", { key: '78ed354e2f19bffbeb93244797a5de8f0c7ebaa9', class: "stzh-radio__check" })), h("div", { key: '26b9d086e49288e7e604f6d0a0fb84f839b1053d', class: "stzh-radio__label" }, this.label ? (this.label) : (h("span", { class: "stzh-radio__label-slot" }, h("slot", null))), !this.hideOptional && (h("span", { key: '7e9c841e5c87e6d30b42f69f53eb0964e434dea2', class: "stzh-radio__marker" }, h("span", { key: '243e5ed2b1c03d084c02263aa74c03736af60a6c', class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '6bd9ef10b3300e578fefe4ff653cf978816cf1c4', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'ebea8d7aba9224f046d56555098b282102ec0929', class: classes }, labelWrapperUsed && (h("label", { key: 'cdd4030cff6fd5cff42edf529971e5ef07265db0', class: "stzh-radio__field-wrapper" }, h("input", { key: '6c7d1137b279447f1c6ae8b27460c843c7003af2', class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: String(this.value), disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'c8509edd66148d8ac08321eb7697606d7c463167', class: "stzh-radio__mark" }, h("div", { key: '05ec9e5169f45e097eeac2738f37d971e2c0558a', class: "stzh-radio__check" })), h("div", { key: '1920c1b97402a54aa3d96fde0b90450fdeeccecc', class: "stzh-radio__label" }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: 'ceb36dd822f2270408df3d7febb1f11b18fc46f4', class: "stzh-radio__marker" }, h("span", { key: 'b9488232d4807504c0f17a968777071dcf40d6a6', class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '520155a717966a7353632bcc7b0ee649e9f618a8', class: "stzh-radio__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '2995c8fcfdc07aa29c760b2e3faf9c7332a962f5', class: "stzh-radio__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))), descriptionLongUsed && (h(StzhInputDescription, { key: 'b1bf15462d161875a5a1e18c95f09a03561b86f5', classPrefix: "stzh-radio", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '4caf7c1aa4eeea61c391f4554a26a0fdfdc8669e', classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText))), descriptionLongUsed && (h(StzhInputDescription, { key: 'a6b974712e0875863f2a3815b8c92c9e873ea006', classPrefix: "stzh-radio", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '73568d8f39d6f583916a427c4b25e914a4d38e3a', classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -159,7 +189,9 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends H {
         "descriptionLong": [1, "description-long"],
         "descriptionLongTitle": [1, "description-long-title"],
         "error": [1],
-        "a11yDescribedby": [1, "a11y-describedby"]
+        "a11yDescribedby": [1, "a11y-describedby"],
+        "hasDefaultSlot": [32],
+        "hasResolvedDefaultSlot": [32]
     }, [[4, "reset", "resetListener"]], {
         "error": ["errorWatcher"]
     }]);
@@ -193,6 +225,6 @@ function defineCustomElement() {
 }
 export { StzhRadio as S, defineCustomElement as d };
-//# sourceMappingURL=p-BmZW5NzL.js.map
+//# sourceMappingURL=p-CJgyNq5X.js.map
-//# sourceMappingURL=p-BmZW5NzL.js.map
+//# sourceMappingURL=p-CJgyNq5X.js.map

package/dist/components/p-CJgyNq5X.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CJgyNq5X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx"],"sourcesContent":[":host {\n --label-color: var(--stzh-radio-label-color, #{$baseColor});\n --label-hover-color: var(--stzh-radio-label-hover-color, #{$colorPrimary70});\n --label-hover-checked-color: var(\n --stzh-radio-label-hover-checked-color,\n #{$colorPrimary90}\n );\n --check-color: var(--stzh-radio-check-color, #{$colorPrimary70});\n --invalid-color: var(--stzh-radio-invalid-color, #{$colorError60});\n --disabled-color: var(--stzh-radio-disabled-color, #{$colorGrey50});\n\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-radio {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize(\"milli\");\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n @include radio__mark();\n }\n\n &__check {\n @include radio__check($color: $colorPrimary70);\n }\n\n &__label {\n --stzh-base-color: initial;\n\n display: inline-flex;\n align-items: center;\n gap: space(\"xsmall\");\n color: var(--label-color);\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space(\"small\");\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__label-text {\n min-width: 0;\n }\n\n &__label > &__description-wrapper {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__error,\n &__label &__description-text {\n display: none;\n }\n\n &__label &__description,\n &__label &__description-long {\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__description-long-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n line-height: 1;\n }\n\n &__label stzh-popover &__description-long-icon {\n --size: var(--stzh-icon-size-small);\n display: block;\n line-height: 0;\n color: $colorPrimary70;\n }\n &__label-slot {\n display: block;\n }\n\n &__label-slot stzh-text {\n display: block;\n }\n &__marker {\n @include fontSize(\"micro\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n /* Hover / Focus / Checked */\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: var(--label-hover-checked-color);\n }\n\n &__input:checked:hover ~ &__mark &__check {\n @media (forced-colors: active) {\n color: Highlight;\n }\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: var(--label-hover-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: var(--label-hover-checked-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &__input:checked ~ &__mark &__check {\n opacity: 1;\n }\n\n /* Invalid */\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n @media (forced-colors: none) {\n color: var(--invalid-color);\n }\n }\n\n &--is-invalid &__input ~ &__mark {\n @media (forced-colors: none) {\n border-color: var(--invalid-color);\n }\n }\n\n /* Disabled */\n\n &--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: var(--disabled-color);\n background-color: $colorGrey20;\n\n @media (forced-colors: active) {\n border-color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: var(--disabled-color);\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch, State } from \"@stencil/core\";\n\nimport { StzhRadioBlurEvent, StzhRadioChangeEvent, StzhRadioFocusEvent, StzhRadioValue } from \"../../index\";\n\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-radio\",\n styleUrl: \"stzh-radio.scss\",\n scoped: true,\n})\nexport class StzhRadio {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element. Note that boolean values only work with property binding (not with attribute binding). */\n @Prop({ mutable: true }) value: StzhRadioValue = \"\";\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form to hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Checked status */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /**\n * **Do not use this property. It will be deprecated with the next major release.**\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n /**\n * Whether the component has meaningful default-slot content.\n * Becomes obsolete with the implementation of PDESI-1908.\n */\n @State() hasDefaultSlot: boolean = false;\n\n /**\n * Indicates whether default-slot content detection has run at least once.\n * Used to avoid rendering state-dependent markup before the slot content\n * has been evaluated.\n * Becomes obsolete with the implementation of PDESI-1908.\n */\n @State() hasResolvedDefaultSlot: boolean = false;\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-radio\",\n originalEvent: event,\n value: this.value,\n checked: this.checked,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-radio\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-radio\",\n originalEvent: event,\n });\n };\n\n /**\n * Re-evaluates default-slot content and updates the related render state.\n * Becomes obsolete with implementation of PDESI-1908.\n */\n private updateDefaultSlotState = () => {\n const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-radio\"]);\n if (this.hasDefaultSlot !== hasDefaultSlot) {\n this.hasDefaultSlot = hasDefaultSlot;\n }\n if (!this.hasResolvedDefaultSlot) {\n this.hasResolvedDefaultSlot = true;\n }\n };\n\n componentDidLoad() {\n this.updateDefaultSlotState();\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-radio-${radioCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radio\");\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n const labelUsed = !!this.label || this.hasDefaultSlot;\n const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\n\n const classes = {\n \"stzh-radio\": true,\n \"stzh-radio--has-description\": descriptionUsed,\n \"stzh-radio--has-description-long\": descriptionLongUsed,\n \"stzh-radio--has-error\": errorUsed,\n \"stzh-radio--is-required\": this.required,\n \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n \"stzh-radio--is-disabled\": this.disabled,\n };\n\n return (\n <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {labelWrapperUsed && (\n <label class=\"stzh-radio__field-wrapper\">\n <input\n class=\"stzh-radio__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n id={this.inputId}\n name={this.name}\n value={String(this.value)}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-radio__mark\">\n <div class=\"stzh-radio__check\"></div>\n </div>\n\n <div class=\"stzh-radio__label\">\n {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n {labelUsed && !this.hideOptional && (\n <span class=\"stzh-radio__marker\">\n <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-radio__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-radio\"\n id={`${this.inputId}-description-long`}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={true}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n </label>\n )}\n {(errorUsed || descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-radio\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-RvRbhcRQ.js → p-CSdlcHhO.js} RENAMED Viewed

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { d as defineCustomElement$7 } from './p-Yktwo3G-.js';
-import { d as defineCustomElement$6 } from './p-B7_vqC4s.js';
-import { d as defineCustomElement$5 } from './p-CC0Gv1-E.js';
-import { d as defineCustomElement$4 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$3 } from './p-G6s0H-yQ.js';
-import { d as defineCustomElement$2 } from './p-BNRtW-oE.js';
-import { d as defineCustomElement$1 } from './p-CqIeGIYq.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { d as defineCustomElement$7 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$6 } from './p-CrQrHbCR.js';
+import { d as defineCustomElement$5 } from './p-D-Yirlnl.js';
+import { d as defineCustomElement$4 } from './p-mPSUVIkD.js';
+import { d as defineCustomElement$3 } from './p-DhDUHSh7.js';
+import { d as defineCustomElement$2 } from './p-Bi0j3C9E.js';
+import { d as defineCustomElement$1 } from './p-CIG3atcV.js';
 const stzhPaginationCss = () => `.sc-stzh-pagination-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-pagination-h,[stzh-hidden].sc-stzh-pagination-h{display:none}.sc-stzh-pagination-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h *.sc-stzh-pagination,.sc-stzh-pagination-h *.sc-stzh-pagination::before,.sc-stzh-pagination-h *.sc-stzh-pagination::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-pagination-h .has-focus.sc-stzh-pagination{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination{outline-style:none !important}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination::-moz-focus-inner{border:0 !important}.sc-stzh-pagination-h{--justify-content:inherit;--padding-left:calc(var(--stzh-form-input-height) + var(--stzh-space-medium))}.stzh-pagination.sc-stzh-pagination{position:relative;display:flex;align-items:center;gap:var(--stzh-space-medium);padding-left:var(--padding-left);justify-content:var(--justify-content)}.stzh-pagination__input.sc-stzh-pagination{--text-align:center;--input-width:var(--stzh-form-input-height);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;position:absolute;top:0;left:0}.stzh-pagination__total.sc-stzh-pagination{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-pagination--size-small.sc-stzh-pagination{padding-left:calc(var(--stzh-form-input-small-height) + var(--stzh-space-medium))}.stzh-pagination--size-small.sc-stzh-pagination .stzh-pagination__input.sc-stzh-pagination{--input-width:var(--stzh-form-input-small-height)}`;
@@ -87,7 +87,7 @@ const StzhPagination = /*@__PURE__*/ proxyCustomElement(class StzhPagination ext
             "stzh-pagination": true,
             [`stzh-pagination--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'a6f75265358d0e9528f3fa9e8f40253bd6d8bfaf', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '3cfd1d801e448d12520653767d619c2d9482368d', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: 'e5ef6d8efa713aaa9e68e06fe6a6090eea7ade51' }, h("stzh-button", { key: '6cfd548163f9ef85ba998f3155f12ece9b41b27e', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: '1788d6d7395903032fea2e7556ba29e4c701e425', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
+        return (h(Host, { key: 'c96bb076a8efad512d90319af275ecef18375c62', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'ee505d4f5672e5bf03cdf360dedad66e2b465f19', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: 'ecd3781f378ecf11bfa0a772e0d32922af3bda7b' }, h("stzh-button", { key: '128b04fd667d1a3f52b5a78c0d05849da3bd1fbb', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: 'ee96341a6dda021fba99cc25d6e817db792b54d6', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
     }
     get element() { return this; }
     static get style() { return stzhPaginationCss(); }
@@ -161,6 +161,6 @@ function defineCustomElement() {
 }
 export { StzhPagination as S, defineCustomElement as d };
-//# sourceMappingURL=p-RvRbhcRQ.js.map
+//# sourceMappingURL=p-CSdlcHhO.js.map
-//# sourceMappingURL=p-RvRbhcRQ.js.map
+//# sourceMappingURL=p-CSdlcHhO.js.map

package/dist/components/{p-RvRbhcRQ.js.map → p-CSdlcHhO.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-RvRbhcRQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n --justify-content: inherit;\n --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n position: relative;\n display: flex;\n align-items: center;\n gap: space(\"medium\");\n padding-left: var(--padding-left);\n justify-content: var(--justify-content);\n\n &__input {\n --text-align: center;\n --input-width: #{$formInputHeight};\n --padding-top: 0px;\n --padding-bottom: 0px;\n --padding-left: 0px;\n --padding-right: 0px;\n\n position: absolute;\n top: 0;\n left: 0;\n }\n\n &__total {\n @include fontSize(\"nano\");\n color: $colorGrey70;\n }\n\n &--size-small {\n padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n }\n\n &--size-small &__input {\n --input-width: #{$formInputHeightSmall};\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagination\",\n styleUrl: \"stzh-pagination.scss\",\n scoped: true,\n})\nexport class StzhPagination {\n /** Total pages available. /\n @Prop() total: number = 1;\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Current page. /\n @Prop({ mutable: true }) value: number = 1;\n\n /* Label for dropdown /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the current page is mutable via input /\n @Prop({ reflect: true }) allowManualInput: boolean = true;\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id of the element which describes the input /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Translation strings. /\n @Prop() localization: StzhPaginationLocalizedText;\n\n /* Pagination change event /\n @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n @Element() element: HTMLStzhPaginationElement;\n\n /* Set current page to previous /\n @Method()\n async prev() {\n this.gotoPage(this.value - 1);\n }\n\n /* Set current page to next */\n @Method()\n async next() {\n this.gotoPage(this.value + 1);\n }\n\n private input: HTMLStzhInputElement;\n\n private gotoPage = (newPage: number) => {\n const previous = this.value;\n\n if (newPage >= 1 && newPage <= this.total) {\n this.value = newPage;\n } else if (newPage > this.total) {\n this.value = this.total;\n } else {\n this.value = 1;\n }\n\n if (previous !== this.value) {\n this.stzhChange.emit({\n component: \"stzh-pagination\",\n page: Number(this.value),\n });\n }\n };\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n const newPage = Number(event.detail.value) \|\| 1;\n this.gotoPage(newPage);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-pagination\": true,\n [`stzh-pagination--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.allowManualInput ? (\n <Fragment>\n <stzh-input\n class=\"stzh-pagination__input\"\n type=\"number\"\n min={1}\n max={this.total}\n label={this.label \|\| this.localization.label}\n labelHidden={true}\n ref={el => (this.input = el as HTMLStzhInputElement)}\n onStzhChange={this.onInputChange}\n value={this.value?.toString() \|\| \"\"}\n required={this.required}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n a11yDescribedby={this.a11yDescribedby}\n name={this.name}\n size={this.size}\n invalid={this.invalid}\n hideOptional={true}\n noAutocomplete={true}\n ></stzh-input>\n <div class=\"stzh-pagination__total\">\n {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n </Fragment>\n ) : (\n <div class=\"stzh-pagination__total\">\n {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n )}\n <stzh-buttongroup>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-left\"\n icon-only\n size={this.size}\n a11yDisabled={this.value <= 1}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.prevLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.prev()}\n ></stzh-button>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-right\"\n icon-only\n size={this.size}\n a11yDisabled={this.value >= this.total}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.nextLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.next()}\n ></stzh-button>\n </stzh-buttongroup>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CSdlcHhO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n --justify-content: inherit;\n --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n position: relative;\n display: flex;\n align-items: center;\n gap: space(\"medium\");\n padding-left: var(--padding-left);\n justify-content: var(--justify-content);\n\n &__input {\n --text-align: center;\n --input-width: #{$formInputHeight};\n --padding-top: 0px;\n --padding-bottom: 0px;\n --padding-left: 0px;\n --padding-right: 0px;\n\n position: absolute;\n top: 0;\n left: 0;\n }\n\n &__total {\n @include fontSize(\"nano\");\n color: $colorGrey70;\n }\n\n &--size-small {\n padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n }\n\n &--size-small &__input {\n --input-width: #{$formInputHeightSmall};\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagination\",\n styleUrl: \"stzh-pagination.scss\",\n scoped: true,\n})\nexport class StzhPagination {\n /** Total pages available. /\n @Prop() total: number = 1;\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Current page. /\n @Prop({ mutable: true }) value: number = 1;\n\n /* Label for dropdown /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the current page is mutable via input /\n @Prop({ reflect: true }) allowManualInput: boolean = true;\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id of the element which describes the input /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Translation strings. /\n @Prop() localization: StzhPaginationLocalizedText;\n\n /* Pagination change event /\n @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n @Element() element: HTMLStzhPaginationElement;\n\n /* Set current page to previous /\n @Method()\n async prev() {\n this.gotoPage(this.value - 1);\n }\n\n /* Set current page to next */\n @Method()\n async next() {\n this.gotoPage(this.value + 1);\n }\n\n private input: HTMLStzhInputElement;\n\n private gotoPage = (newPage: number) => {\n const previous = this.value;\n\n if (newPage >= 1 && newPage <= this.total) {\n this.value = newPage;\n } else if (newPage > this.total) {\n this.value = this.total;\n } else {\n this.value = 1;\n }\n\n if (previous !== this.value) {\n this.stzhChange.emit({\n component: \"stzh-pagination\",\n page: Number(this.value),\n });\n }\n };\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n const newPage = Number(event.detail.value) \|\| 1;\n this.gotoPage(newPage);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-pagination\": true,\n [`stzh-pagination--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.allowManualInput ? (\n <Fragment>\n <stzh-input\n class=\"stzh-pagination__input\"\n type=\"number\"\n min={1}\n max={this.total}\n label={this.label \|\| this.localization.label}\n labelHidden={true}\n ref={el => (this.input = el as HTMLStzhInputElement)}\n onStzhChange={this.onInputChange}\n value={this.value?.toString() \|\| \"\"}\n required={this.required}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n a11yDescribedby={this.a11yDescribedby}\n name={this.name}\n size={this.size}\n invalid={this.invalid}\n hideOptional={true}\n noAutocomplete={true}\n ></stzh-input>\n <div class=\"stzh-pagination__total\">\n {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n </Fragment>\n ) : (\n <div class=\"stzh-pagination__total\">\n {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n )}\n <stzh-buttongroup>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-left\"\n icon-only\n size={this.size}\n a11yDisabled={this.value <= 1}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.prevLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.prev()}\n ></stzh-button>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-right\"\n icon-only\n size={this.size}\n a11yDisabled={this.value >= this.total}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.nextLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.next()}\n ></stzh-button>\n </stzh-buttongroup>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}