@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/stzh-pi-teaser-layout-item.js

@@ -0,0 +1,8 @@
+import { S as StzhPiTeaserLayoutItem$1, d as defineCustomElement$1 } from './p-ef454347.js';
+
+const StzhPiTeaserLayoutItem = StzhPiTeaserLayoutItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhPiTeaserLayoutItem, defineCustomElement };
+
+//# sourceMappingURL=stzh-pi-teaser-layout-item.js.map

package/dist/components/stzh-pi-teaser-layout-item.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pi-teaser-layout-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/stzh-pi-teaser-layout.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { m as media, a as addMediaChangeListener } from './p-f4adb3cd.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-c22c1bb9.js';
+import { d as defineCustomElement$2 } from './p-ef454347.js';
 
 const stzhPiTeaserLayoutCss = ".sc-stzh-pi-teaser-layout-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-pi-teaser-layout-h,[stzh-hidden].sc-stzh-pi-teaser-layout-h{display:none}.sc-stzh-pi-teaser-layout-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::before,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::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-pi-teaser-layout-h .has-focus.sc-stzh-pi-teaser-layout{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout{outline-style:none !important}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-columns:repeat(12, 1fr);--min-height:112.5rem;--max-height:118.75rem;--gap:1rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}@media screen and (min-width: 600px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:118.75rem;--max-height:118.75rem;--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}}@media screen and (min-width: 900px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:96.875rem;--max-height:103.125rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.6fr 0.4fr 0.25fr 0.25fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:146.875rem;--max-height:146.875rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n      \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n      \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr}}@media screen and (min-width: 1260px){.sc-stzh-pi-teaser-layout-h{--gap:1.5rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}@media screen and (min-width: 1600px){.sc-stzh-pi-teaser-layout-h{--gap:2rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser.sc-stzh-pi-teaser-layout{background-color:white}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--1.sc-stzh-pi-teaser-layout{grid-area:t1}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--2.sc-stzh-pi-teaser-layout{grid-area:t2}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--3.sc-stzh-pi-teaser-layout{grid-area:t3}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--4.sc-stzh-pi-teaser-layout{grid-area:t4}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5.sc-stzh-pi-teaser-layout{grid-area:t5}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6.sc-stzh-pi-teaser-layout{grid-area:t6}[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";--grid-pi-teaser-layout-rows:1fr;--min-height:34.375rem;--max-height:37.5rem}[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:68.75rem;--max-height:75rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.6fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.55fr 0.55fr;--min-height:103.125rem;--max-height:103.125rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.55fr 0.55fr;--min-height:103.125rem;--max-height:103.125rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.55fr 0.55fr 0.3fr;--min-height:112.5rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;--min-height:137.5rem;--max-height:143.75rem}@media screen and (min-width: 600px){[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.42fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.42fr 0.42fr;--min-height:100rem;--max-height:106.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr 0.42fr 0.42fr 0.26fr;--min-height:112.5rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;--min-height:125rem;--max-height:131.25rem}}@media screen and (min-width: 900px){[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h,[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr;--min-height:37.5rem;--max-height:40.625rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr;--min-height:87.5rem;--max-height:93.75rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.35fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr 0.35fr;--min-height:103.125rem;--max-height:106.25rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.4fr 0.4fr;--min-height:112.5rem;--max-height:112.5rem}}@media screen and (min-width: 1260px){[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 0.5fr 0.5fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 0.45fr 0.45fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n      \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n      \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 0.4fr 0.4fr;--min-height:75rem;--max-height:78.125rem}}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5--four.sc-stzh-pi-teaser-layout{display:none}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--four.sc-stzh-pi-teaser-layout,[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--five.sc-stzh-pi-teaser-layout{display:none}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);width:100%;display:grid;gap:var(--gap);min-height:var(--min-height);max-height:var(--max-height);grid-template-columns:var(--grid-pi-teaser-layout-columns);grid-template-areas:var(--grid-pi-teaser-layout-template);grid-template-rows:var(--grid-pi-teaser-layout-rows)}@media screen and (min-width: 900px){.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout>*.sc-stzh-pi-teaser-layout{min-height:0;overflow:hidden}.stzh-pi-teaser-layout__header-holder.sc-stzh-pi-teaser-layout{margin-bottom:var(--stzh-space-medium)}.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing);font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-small)}}.stzh-pi-teaser-layout__bottom-slot.sc-stzh-pi-teaser-layout{margin-top:var(--stzh-space-medium);display:grid;justify-content:end}";
 const StzhPiTeaserLayoutStyle0 = stzhPiTeaserLayoutCss;
@@ -57,7 +57,7 @@ const StzhPiTeaserLayout$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaser
         this.mediaChangeHandler();
         /**
           The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.
-          The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
+          The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
         **/
         this.contentList = this.contentList.slice(0, 6);
         if (this.variant == "rubrick" && this.contentList.length < 4) {
@@ -270,7 +270,7 @@ const StzhPiTeaserLayout$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaser
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? "side" : "no-side"}`]: true,
         });
-        return (h(Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (h("div", { class: "stzh-pi-teaser-layout__header-holder" }, h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), h("div", { class: classes }, ...this.contentList.map((teaser, index) => teaser.type == "empty-teaser" ? (h("div", { class: teaserClasses(index) })) : (h("stzh-pi-teaser", { key: index, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index + 1), lead: leadBehavior(teaser.lead, index + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index + 1), isHero: !isRubrick, class: teaserClasses(index) })))), bottomSlotUsed && (h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, h("slot", { name: "bottom" })))));
+        return (h(Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (h("div", { class: "stzh-pi-teaser-layout__header-holder" }, h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), h("div", { class: classes }, ...this.contentList.map((teaser, index) => teaser.type == "empty-teaser" ? (h("div", { class: teaserClasses(index) })) : (h("stzh-pi-teaser-layout-item", { key: index, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index + 1), lead: leadBehavior(teaser.lead, index + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index + 1), class: teaserClasses(index) })))), bottomSlotUsed && (h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, h("slot", { name: "bottom" })))));
     }
     get element() { return this; }
     static get style() { return StzhPiTeaserLayoutStyle0; }
@@ -289,14 +289,14 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["stzh-pi-teaser-layout", "stzh-pi-teaser"];
+    const components = ["stzh-pi-teaser-layout", "stzh-pi-teaser-layout-item"];
     components.forEach(tagName => { switch (tagName) {
         case "stzh-pi-teaser-layout":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, StzhPiTeaserLayout$1);
             }
             break;
-        case "stzh-pi-teaser":
+        case "stzh-pi-teaser-layout-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/stzh-pi-teaser-layout.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser-layout.js","mappings":"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","names":["StzhPiTeaserLayout"],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                isHero={!isRubrick}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser-layout.js","mappings":"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","names":["StzhPiTeaserLayout"],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n/**\n * @slot bottom - Slot for bottom content - like buttons to load more data\n */\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser-layout-item\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-pi-teaser.js

@@ -1,4 +1,86 @@
-import { S as StzhPiTeaser$1, d as defineCustomElement$1 } from './p-c22c1bb9.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
+import { h as hasSlot } from './p-289f5de2.js';
+import { d as defineCustomElement$2 } from './p-36fb6c94.js';
+
+const stzhPiTeaserCss = ".sc-stzh-pi-teaser-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-pi-teaser-h,[stzh-hidden].sc-stzh-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-primary30)\n  );display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-teaser-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-teaser-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-teaser-default-text-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;color:var(--stzh-color-black);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1260px){.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-teaser-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-teaser-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-teaser-large-text-letter-spacing)}}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{display:block;font-family:inherit;padding:0;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:0;margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xlarge)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}";
+const StzhPiTeaserStyle0 = stzhPiTeaserCss;
+
+const StzhPiTeaser$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaser extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.stzhClick = createEvent(this, "stzhClick", 7);
+        this.handleCardClick = (originalEvent) => {
+            this.stzhClick.emit({
+                component: "stzh-pi-teaser",
+                originalEvent,
+                href: this.href,
+            });
+        };
+        this.href = undefined;
+        this.target = undefined;
+        this.analyticsId = undefined;
+        this.dateline = "";
+        this.heading = "";
+        this.headingLevel = "3";
+        this.lead = "";
+        this.date = "";
+    }
+    componentDidRender() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+            if (objectId) {
+                (_b = this.titleLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+            }
+        });
+    }
+    renderHeading() {
+        const Heading = `h${this.headingLevel}`;
+        const TitleLink = this.href ? "a" : "button";
+        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, this.dateline && h("p", { class: "stzh-pi-teaser__dateline" }, this.dateline), h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))));
+    }
+    render() {
+        const hasLead = !!this.lead || hasSlot(this.element, "lead");
+        const hasImageSlot = hasSlot(this.element, "image");
+        const shouldRenderTitleRatio = !hasImageSlot;
+        const classes = {
+            "stzh-pi-teaser": true,
+            "stzh-pi-teaser--has-lead": hasLead,
+            "stzh-pi-teaser--has-image": hasImageSlot,
+        };
+        return (h(Host, { key: 'aadddeb1b286ccdcaad715fb158836c64172859a', "has-lead": hasLead }, h("article", { key: 'f7732f31c853c62786b4f802e77a386aa7300f6b', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '0600c3ba6eaffcfbc2adf7cd6bba047a10f603e2', class: "stzh-pi-teaser__image" }, h("stzh-ratio", { key: '47fedc1ec5622cfb4ef9c2f48ef326f3eeec46b9', ratio: "2:1" }, h("slot", { key: '109a0ef33b7a592e73189db1c822bf41e21c690b', name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { key: 'a635121bff26dd5e8a8f941651be7a02279c9c69', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { key: '97a87ef704edf0808d6e825a9915ce2a7d78037e', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { key: '83568e5e3bf19338ce8b733632a41c92f74adf34', class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })), this.date && h("div", { key: '4940a979321c9896c976ae1fe3901810b15e1c00', class: "stzh-pi-teaser__date" }, this.date)))));
+    }
+    get element() { return this; }
+    static get style() { return StzhPiTeaserStyle0; }
+}, [6, "stzh-pi-teaser", {
+        "href": [513],
+        "target": [1],
+        "analyticsId": [1, "analytics-id"],
+        "dateline": [1],
+        "heading": [1],
+        "headingLevel": [1, "heading-level"],
+        "lead": [1],
+        "date": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-pi-teaser", "stzh-ratio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-pi-teaser":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, StzhPiTeaser$1);
+            }
+            break;
+        case "stzh-ratio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const StzhPiTeaser = StzhPiTeaser$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-pi-teaser.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"stzh-pi-teaser.js","mappings":"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","names":["StzhPiTeaser"],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorPrimary30}\n  );\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-teaser {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--stzh-color-white);\n\n  &__wrapper {\n    display: flex;\n    flex-grow: 1;\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0 0 var(--stzh-space-small);\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include fontCurve(\"teaser\");\n    @include wordWrap;\n\n    color: var(--stzh-color-black);\n    margin: 0;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3; /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis; /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontSize(\"milli\");\n    margin-top: 0;\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  &__date {\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    text-align: right;\n    width: 100%;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  &--has-image &__lead {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  /* Title ratio styling (no image) */\n  &__title-ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__title-ratio &__title-wrapper {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n  }\n\n  &__title-ratio &__dateline {\n    margin-bottom: var(--stzh-space-xxsmall);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\nimport { hasSlot } from \"../../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-pkzh-qr.js

@@ -1,23 +1,23 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$k } from './p-75352a6a.js';
-import { d as defineCustomElement$j } from './p-17efbc57.js';
-import { d as defineCustomElement$i } from './p-e42121d1.js';
-import { d as defineCustomElement$h } from './p-46d253ca.js';
-import { d as defineCustomElement$g } from './p-044c234a.js';
-import { d as defineCustomElement$f } from './p-55b58017.js';
-import { d as defineCustomElement$e } from './p-7f251b60.js';
-import { d as defineCustomElement$d } from './p-7889ebb0.js';
-import { d as defineCustomElement$c } from './p-b0a7ed3c.js';
-import { d as defineCustomElement$b } from './p-59b494a3.js';
-import { d as defineCustomElement$a } from './p-5a8587ab.js';
-import { d as defineCustomElement$9 } from './p-faae4632.js';
-import { d as defineCustomElement$8 } from './p-1d88f941.js';
-import { d as defineCustomElement$7 } from './p-6268e18b.js';
-import { d as defineCustomElement$6 } from './p-7b016fd0.js';
-import { d as defineCustomElement$5 } from './p-87e69533.js';
-import { d as defineCustomElement$4 } from './p-f70f31d6.js';
-import { d as defineCustomElement$3 } from './p-9a31aa56.js';
-import { d as defineCustomElement$2 } from './p-1449a24c.js';
+import { d as defineCustomElement$k } from './p-97868e7a.js';
+import { d as defineCustomElement$j } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$i } from './p-4a78990f.js';
+import { d as defineCustomElement$h } from './p-a0023430.js';
+import { d as defineCustomElement$g } from './p-109076c9.js';
+import { d as defineCustomElement$f } from './p-151a98a9.js';
+import { d as defineCustomElement$e } from './p-506a00fc.js';
+import { d as defineCustomElement$d } from './p-fdc914f5.js';
+import { d as defineCustomElement$c } from './p-69e0c8d2.js';
+import { d as defineCustomElement$b } from './p-18196788.js';
+import { d as defineCustomElement$a } from './p-7c4e756c.js';
+import { d as defineCustomElement$9 } from './p-da83a0ad.js';
+import { d as defineCustomElement$8 } from './p-ea3c0ed4.js';
+import { d as defineCustomElement$7 } from './p-963d59bf.js';
+import { d as defineCustomElement$6 } from './p-387454b3.js';
+import { d as defineCustomElement$5 } from './p-c4fccd89.js';
+import { d as defineCustomElement$4 } from './p-72101ea0.js';
+import { d as defineCustomElement$3 } from './p-63c4d8c4.js';
+import { d as defineCustomElement$2 } from './p-613937f1.js';
 
 const stzhPkzhQrCss = ":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 .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}.stzh-pkzh-qr-results{margin-top:var(--stzh-space-xxlarge);--stzh-datalist-nested-margin-left:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pkzh-qr-results{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pkzh-qr-results{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pkzh-qr-results{margin-top:var(--stzh-space-xbig)}}";
 const StzhPkzhQrStyle0 = stzhPkzhQrCss;

package/dist/components/stzh-poicard.js

@@ -1,4 +1,4 @@
-import { S as StzhPoicard$1, d as defineCustomElement$1 } from './p-3b563957.js';
+import { S as StzhPoicard$1, d as defineCustomElement$1 } from './p-a2828d2e.js';
 
 const StzhPoicard = StzhPoicard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-poilist.js

@@ -1,22 +1,22 @@
 import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { a as axios } from './p-30d100f4.js';
-import { d as defineCustomElement$i } from './p-17efbc57.js';
-import { d as defineCustomElement$h } from './p-e42121d1.js';
-import { d as defineCustomElement$g } from './p-2f38d899.js';
-import { d as defineCustomElement$f } from './p-8436ccb7.js';
-import { d as defineCustomElement$e } from './p-b9a50363.js';
-import { d as defineCustomElement$d } from './p-683460a5.js';
-import { d as defineCustomElement$c } from './p-8254224a.js';
-import { d as defineCustomElement$b } from './p-59b494a3.js';
-import { d as defineCustomElement$a } from './p-5a8587ab.js';
-import { d as defineCustomElement$9 } from './p-0ac64574.js';
-import { d as defineCustomElement$8 } from './p-ce0311f9.js';
-import { d as defineCustomElement$7 } from './p-1d88f941.js';
-import { d as defineCustomElement$6 } from './p-503bdd56.js';
-import { d as defineCustomElement$5 } from './p-3b563957.js';
-import { d as defineCustomElement$4 } from './p-6268e18b.js';
-import { d as defineCustomElement$3 } from './p-e87822db.js';
-import { d as defineCustomElement$2 } from './p-9a31aa56.js';
+import { d as defineCustomElement$i } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$h } from './p-4a78990f.js';
+import { d as defineCustomElement$g } from './p-ab25d4da.js';
+import { d as defineCustomElement$f } from './p-570cd361.js';
+import { d as defineCustomElement$e } from './p-c5a240bd.js';
+import { d as defineCustomElement$d } from './p-479db6c6.js';
+import { d as defineCustomElement$c } from './p-3f3349b1.js';
+import { d as defineCustomElement$b } from './p-18196788.js';
+import { d as defineCustomElement$a } from './p-7c4e756c.js';
+import { d as defineCustomElement$9 } from './p-111f7e01.js';
+import { d as defineCustomElement$8 } from './p-2502ff26.js';
+import { d as defineCustomElement$7 } from './p-ea3c0ed4.js';
+import { d as defineCustomElement$6 } from './p-34267046.js';
+import { d as defineCustomElement$5 } from './p-a2828d2e.js';
+import { d as defineCustomElement$4 } from './p-963d59bf.js';
+import { d as defineCustomElement$3 } from './p-8d606617.js';
+import { d as defineCustomElement$2 } from './p-63c4d8c4.js';
 
 const stzhPoilistCss = ".sc-stzh-poilist-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-poilist-h,[stzh-hidden].sc-stzh-poilist-h{display:none}.sc-stzh-poilist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h *.sc-stzh-poilist,.sc-stzh-poilist-h *.sc-stzh-poilist::before,.sc-stzh-poilist-h *.sc-stzh-poilist::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-poilist-h .has-focus.sc-stzh-poilist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist{outline-style:none !important}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist::-moz-focus-inner{border:0 !important}.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-xsmall);display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 600px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-xlarge)}}.stzh-poilist__header.sc-stzh-poilist stzh-text.sc-stzh-poilist{--color:var(--stzh-color-grey80);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-large);display:grid}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{justify-content:center}}.stzh-poilist.sc-stzh-poilist stzh-dropdown.sc-stzh-poilist{--color:var(--stzh-color-primary90);--icon-color:var(--stzh-color-primary90);--icon-angle-color:var(--stzh-color-primary90)}";
 const StzhPoilistStyle0 = stzhPoilistCss;
@@ -121,7 +121,7 @@ const StzhPoilist$1 = /*@__PURE__*/ proxyCustomElement(class StzhPoilist extends
         const classes = {
             "stzh-poilist": true,
         };
-        return (h(Host, { key: '7d648ed46e8481ca8aaec8d2b37d44954b1a4de1' }, h("div", { key: '80559e594a82d6d7671165d3cf2add6f1d6ea8ac', class: classes }, h("stzh-overlay", { key: '2ee98f49b657df61a1e3e8dd890cb60ee465a9c9', open: this.isLoading }, h("stzh-loader", { key: '2af6824f0565b9a6c3a5585abf549cd3361b2637', label: this.loadingText })), this.geopositionError && h("stzh-message", { key: 'db6a3140e58c0e3d5f18194f81154f217130eb22', type: "error", label: this.geopositionError }), (this.items.length > 0 || this.meta) && (h(Fragment, { key: 'b1c3ee7415f8c7bb7ef505c574a061d7f9ffb4da' }, h("div", { key: 'eba2dd1034a949af1b1421a2144834415179f0ac', class: "stzh-poilist__header" }, h("stzh-text", { key: 'ad8881c73de849cd8d4351c1969ab461d3948a7b', size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), h("stzh-dropdown", { key: '453c84cd239904f33cc469dd5b20ade08a4592e4', label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting) ? this.activeSorting : [this.activeSorting], options: this.dropdownOptions })), h("stzh-cardlist", { key: 'bfcc59f45401faab89a930b37888f5a01c829390', layout: "teasers" }, this.items.map(item => (h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (h("div", { key: '54d2983e728c727933dde485bdf5ba5fa1dae2f6', class: "stzh-poilist__show-more" }, h("stzh-button", { key: '51d5a36230815c9982b182bfaec5e23ae9da9d56', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
+        return (h(Host, { key: '2cca93ed29e1c2b29cbdbd44da0162d8f4bf509c' }, h("div", { key: '704cc8ddc1704c60e9afdfbd8221ad591a855df9', class: classes }, h("stzh-overlay", { key: 'b40ddc942f967621d3e4ed9ac3ae6950419e05c1', open: this.isLoading }, h("stzh-loader", { key: '6f3449f95dfbd43a5b2b070c52055346ae61ccf7', label: this.loadingText })), this.geopositionError && h("stzh-message", { key: '7efaf270fb12bbe0471669abde2306dfc651267d', type: "error", label: this.geopositionError }), (this.items.length > 0 || this.meta) && (h(Fragment, { key: '05f2569d167029874bf7bcd75439692c18dd713a' }, h("div", { key: '0a48f839d41d4127630dae30de32e42b7fbe1738', class: "stzh-poilist__header" }, h("stzh-text", { key: '420a3cbee618f842a868102b8187c1c0d6d4a803', size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), h("stzh-dropdown", { key: '87d7f9b923682699fab487529a9c8cc3f8d93167', label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting) ? this.activeSorting : [this.activeSorting], options: this.dropdownOptions })), h("stzh-cardlist", { key: '99f70ed406799852713b9406559ba80a27c5f475', layout: "teasers" }, this.items.map(item => (h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (h("div", { key: 'f78b1be1bc0aded858987e3854a6b4efe964b79c', class: "stzh-poilist__show-more" }, h("stzh-button", { key: '2bbd8362bc26ccc73433e6173fcfee59fb9a8882', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/stzh-popover.js

@@ -1,4 +1,4 @@
-import { S as StzhPopover$1, d as defineCustomElement$1 } from './p-6268e18b.js';
+import { S as StzhPopover$1, d as defineCustomElement$1 } from './p-963d59bf.js';
 
 const StzhPopover = StzhPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-print.js

@@ -1,4 +1,4 @@
-import { S as StzhPrint$1, d as defineCustomElement$1 } from './p-c418c5d3.js';
+import { S as StzhPrint$1, d as defineCustomElement$1 } from './p-15ee297d.js';
 
 const StzhPrint = StzhPrint$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-quote.js

@@ -14,7 +14,7 @@ const StzhQuote$1 = /*@__PURE__*/ proxyCustomElement(class StzhQuote extends H {
         const classes = {
             "stzh-quote": true,
         };
-        return (h(Host, { key: '80f0191a46b9ef842720848f3e03e7aca9ec8732' }, h("div", { key: 'd0b7d3cd84ca330bf7f98ff4d2a17c6de4fbeb44', class: classes }, h("blockquote", { key: '0ff3585baeb20e3a25dcb5c3d4fa5edf408bd823', class: "stzh-quote__content" }, h("p", { key: '7377dccf033ad4e2bdbe9fb129a302bc8fc1b7ce', class: "stzh-quote__text" }, this.text), this.author && h("cite", { key: 'a4dcf2298cbc53916d6945c15a6e0677c24818a0', class: "stzh-quote__author" }, this.author)))));
+        return (h(Host, { key: 'e4d7e752f297cbad3bc3b2c1dcdfea9e4eefca7f' }, h("div", { key: '3a9aa76d2e97768a11532de9208f7f1604ef37d3', class: classes }, h("blockquote", { key: '6868330665a403b87843b2890613a3c56e46e693', class: "stzh-quote__content" }, h("p", { key: '44814da107f2d7a3363d51c9217f9bfb3c0c6938', class: "stzh-quote__text" }, this.text), this.author && h("cite", { key: '975ad30782d4af5a497e13da5864849f4f63d4ba', class: "stzh-quote__author" }, this.author)))));
     }
     get element() { return this; }
     static get style() { return StzhQuoteStyle0; }

package/dist/components/stzh-radio.js

@@ -1,4 +1,4 @@
-import { S as StzhRadio$1, d as defineCustomElement$1 } from './p-375d74b5.js';
+import { S as StzhRadio$1, d as defineCustomElement$1 } from './p-9aff1354.js';
 
 const StzhRadio = StzhRadio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-radiogroup.js

@@ -1,4 +1,4 @@
-import { S as StzhRadiogroup$1, d as defineCustomElement$1 } from './p-f6b75419.js';
+import { S as StzhRadiogroup$1, d as defineCustomElement$1 } from './p-d48fd359.js';
 
 const StzhRadiogroup = StzhRadiogroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-ratio.js

@@ -1,4 +1,4 @@
-import { S as StzhRatio$1, d as defineCustomElement$1 } from './p-527121ef.js';
+import { S as StzhRatio$1, d as defineCustomElement$1 } from './p-36fb6c94.js';
 
 const StzhRatio = StzhRatio$1;
 const defineCustomElement = defineCustomElement$1;