@oiz/stzh-components 4.6.0-beta1 → 4.6.0-beta2

package/dist/components/p-ef454347.js

@@ -1,90 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-
-const stzhPiTeaserLayoutItemCss = "@charset \"UTF-8\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-layout-item-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::before, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    var(--stzh-color-coolgrey10));\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-layout-item-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image\"\n        \"text text text text text text text text\"\n      );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n        \"text text text text text text text text text text text text\"\n      );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-layout-item-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text image image\"\n      );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text\";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text\";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser-layout-item__title-link.sc-stzh-pi-teaser-layout-item {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser-layout-item__date.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}";
-const StzhPiTeaserLayoutItemStyle0 = stzhPiTeaserLayoutItemCss;
-
-const StzhPiTeaserLayoutItem = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaserLayoutItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.stzhClick = createEvent(this, "stzhClick", 7);
-        this.handleCardClick = (originalEvent) => {
-            this.stzhClick.emit({
-                component: "stzh-pi-teaser-layout-item",
-                originalEvent,
-                href: this.href,
-            });
-        };
-        this.href = undefined;
-        this.target = undefined;
-        this.analyticsId = undefined;
-        this.dateline = "";
-        this.heading = "";
-        this.imageSrc = undefined;
-        this.headingLevel = "3";
-        this.lead = "";
-        this.date = "";
-        this.contentSize = "M";
-        this.imagePosition = undefined;
-    }
-    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-layout-item__title-wrapper" }, h(Heading, { class: "stzh-pi-teaser-layout-item__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser-layout-item__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
-    }
-    render() {
-        const hasLead = !!this.lead;
-        console.log("imageSrc: ", this.imageSrc, " & imagePosition: ", this.imagePosition);
-        const hasImage = !!this.imageSrc && !!this.imagePosition;
-        console.log("hasImage: ", hasImage);
-        const displayLead = this.lead;
-        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
-        // : "";
-        const classes = {
-            "stzh-pi-teaser-layout-item": true,
-            "stzh-pi-teaser-layout-item--has-lead": hasLead,
-            "stzh-pi-teaser-layout-item--has-image": hasImage,
-        };
-        return (h(Host, { key: '6800fb97b1ec726ec3f09452a33100366d78ffac', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '85b38929fec3ee38994782bc7321e78684e779fd', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '1923478de5ada40e71286e3eaa49d8cdf7017a92', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: 'c9b796b46a9eb43706924619910c4efafe16d355', src: this.imageSrc, alt: "Example image" }))), h("div", { key: 'eeaaf7e1adf48da141173b7ce7a63dc2ea3763a9', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: '6058d6be2b5124da300dd97733057d0c22e24d9f', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: '68bae848e3e1cf377b075c7d05fce9aad811ac76', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '4e9705883f6f05ff52904322af547c85996da6df', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: '3ced9f74e039e1cc456d4ef37074d8442844b857', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: '92cd55abb157637e1e0db08edb85463be3e622bb', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
-    }
-    get element() { return this; }
-    static get style() { return StzhPiTeaserLayoutItemStyle0; }
-}, [2, "stzh-pi-teaser-layout-item", {
-        "href": [513],
-        "target": [1],
-        "analyticsId": [1, "analytics-id"],
-        "dateline": [1],
-        "heading": [1],
-        "imageSrc": [1, "image-src"],
-        "headingLevel": [1, "heading-level"],
-        "lead": [1],
-        "date": [1],
-        "contentSize": [1, "content-size"],
-        "imagePosition": [1, "image-position"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-pi-teaser-layout-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-pi-teaser-layout-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, StzhPiTeaserLayoutItem);
-            }
-            break;
-    } });
-}
-
-export { StzhPiTeaserLayoutItem as S, defineCustomElement as d };
-
-//# sourceMappingURL=p-ef454347.js.map

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

@@ -1 +0,0 @@
-{"file":"p-ef454347.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10});\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image \" \"text text text text \"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image image image image image\"\n          \"text text text text text text text text\"\n        );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n        );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text image image\"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text text text text image image image\"\n        );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text text text text text image image image image image image\"\n        );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image,\n      var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    &>img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\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-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\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-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\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  /** Image source link */\n  @Prop() imageSrc: string | null;\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  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\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-layout-item\",\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-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/stzh-components/p-286c9d1c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,F as s,a as c,g as i}from"./p-ef5985a3.js";import{h as e}from"./p-87c329f2.js";import"./p-dae15605.js";const n='.sc-stzh-contact-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-contact-h,[stzh-hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::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-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n    --stzh-contact-grid-template-areas,\n    "heading heading heading heading" "image image image image"\n      "responsibility responsibility responsibility responsibility"\n      "contactForm contactForm contactForm contactForm" "info info info info"\n      "availability availability availability availability"\n      "additional additional additional additional"\n  );--grid-template-columns:var(\n    --stzh-contact-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      "heading heading heading heading heading heading heading heading"\n        "image image image image . . . ."\n        "responsibility responsibility responsibility responsibility responsibility responsibility . ."\n        "contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm"\n        "info info info info availability availability availability availability"\n        "additional additional additional additional additional additional additional additional"\n    );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h.sc-stzh-contact-s>[slot=image],.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}@media screen and (min-width: 900px){[has-availability=false].sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      "heading heading heading heading heading heading heading heading"\n        "image image image image . . . ."\n        "responsibility responsibility responsibility responsibility responsibility responsibility . ."\n        "contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm"\n        "info info info info info info info info"\n        "additional additional additional additional additional additional additional additional"\n    )}}.stzh-contact.sc-stzh-contact{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);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{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)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-contact__main-heading-type.sc-stzh-contact:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-contact__main-heading-type.sc-stzh-contact:not(:empty){padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){.stzh-contact__main-heading-type.sc-stzh-contact:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading-type.sc-stzh-contact:not(:empty){padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small)}}.stzh-contact__main-heading-section.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-contact__main-heading-section.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-large);padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){.stzh-contact__main-heading-section.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xlarge);padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading-section.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxlarge);padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-small)}}.stzh-contact__main-heading-text.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__role.sc-stzh-contact{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);font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__responsibility.sc-stzh-contact{grid-area:responsibility}.stzh-contact__responsibility.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1260px){.stzh-contact__responsibility.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-contact__responsibility-text.sc-stzh-contact:not(:empty){padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-contact__responsibility-text.sc-stzh-contact:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-contact__responsibility-text.sc-stzh-contact:not(:empty){padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__responsibility-text.sc-stzh-contact:not(:empty){padding-bottom:var(--stzh-space-small)}}.stzh-contact__contact-form.sc-stzh-contact{grid-area:contactForm;gap:var(--stzh-space-medium);display:grid}@media screen and (min-width: 600px){.stzh-contact__contact-form.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__contact-form.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__contact-form.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__contact-form.sc-stzh-contact-s>*,.stzh-contact__contact-form .sc-stzh-contact-s>*{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1260px){.stzh-contact__contact-form.sc-stzh-contact-s>*,.stzh-contact__contact-form .sc-stzh-contact-s>*{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact{grid-area:additional;gap:var(--stzh-space-medium);display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact-s>*,.stzh-contact__additional .sc-stzh-contact-s>*{margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact-s>*,.stzh-contact__additional .sc-stzh-contact-s>*{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__numbers.sc-stzh-contact{white-space:nowrap}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__role.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__role.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge);gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-contact__availability.sc-stzh-contact{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__availability.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall);display:grid}@media screen and (min-width: 600px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{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-contact__availability-hours.sc-stzh-contact{display:flex;flex-direction:column}@media screen and (min-width: 600px){.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:var(--stzh-space-xsmall)}}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}.stzh-contact__image-wrapper.sc-stzh-contact{background-color:transparent}';const o=n;function h(t){return t.replace(/\s/g,"")}const d=class{constructor(a){t(this,a);this._street=[];this._streetInfo=[];this._numbers=[];this._emails=[];this._availability=[];this.type="Organization";this.mainHeading=undefined;this.mainHeadingLevel="2";this.heading=undefined;this.responsibilityTitle=undefined;this.responsibility=undefined;this.headingLevel="3";this.name=undefined;this.personRole=undefined;this.address=undefined;this.street=undefined;this.streetInfo=undefined;this.postalCode=undefined;this.location=undefined;this.numbers=[];this.emails=[];this.pobox=undefined;this.poboxHeading=undefined;this.poboxTitle=undefined;this.poboxPostalCode=undefined;this.poboxLocation=undefined;this.availabilityTitle=undefined;this.contactTitle=undefined;this.availabilityTitleLevel="3";this.availability=undefined;this.additionalInformation=undefined}availabilityWatcher(t){if(typeof t==="string"){this._availability=JSON.parse(t)}else{this._availability=t}}numbersWatcher(t){if(typeof t==="string"){try{this._numbers=JSON.parse(t)}catch(t){}}else{this._numbers=t}}emailsWatcher(t){if(typeof t==="string"){try{this._emails=JSON.parse(t)}catch(t){}}else{this._emails=t}}streetWatcher(t){if(typeof t==="string"){try{this._street=JSON.parse(t)}catch(a){this._street=[t]}}else if(t){this._street=t}}streetInfoWatcher(t){if(typeof t==="string"){try{this._streetInfo=JSON.parse(t)}catch(a){this._streetInfo=[t]}}else if(t){this._streetInfo=t}}async componentWillLoad(){this.numbersWatcher(this.numbers);this.emailsWatcher(this.emails);this.availabilityWatcher(this.availability);this.streetWatcher(this.street);this.streetInfoWatcher(this.streetInfo)}render(){const t=e(this.element,"image");const i=!!this.address||e(this.element,"address");const n=e(this.element,"addons");const o=e(this.element,"links");const d={"stzh-contact":true,"stzh-contact--has-image":t,"stzh-contact--has-address":i,"stzh-contact--has-addons":n,"stzh-contact--has-links":o};const r=`h${this.headingLevel}`;const l=`h${this.availabilityTitleLevel}`;const m=this.type==="Person";const z=this.type==="Organization";return a(c,{key:"6b270cf37b149ed00d09c0b33e66cb3a50d785cd","has-availability":!!this.availability?"true":"false"},a("div",{key:"892234b6375d8d2a7cb64ee2e8b45bf9e54c1266",class:d,itemscope:true,itemtype:`http://schema.org/${this.type}`},a("div",{key:"bec08e6f8570f3d7b6ca937e0b3ae9125c8211a8",class:"stzh-contact__main-heading",itemprop:z&&!this.heading||m&&!this.name?"name":null},a("div",{key:"32eff74edfcd275ef5d1f594a4ad0116ae26eab3",class:"stzh-contact__main-heading-section"},this.mainHeading?a("stzh-heading",{level:this.mainHeadingLevel,htmlContent:this.mainHeading}):a("slot",{name:"main-heading"})),a("div",{key:"af0b2e0e6fe1a6b7ba5200a3a7dd9dc4dd735050",class:m&&"stzh-contact__main-heading-text"},this.personRole&&m&&a("stzh-heading",{key:"030ce9f2b913952b326ad79a1a39e7324ca1ea64",curve:"h3",level:"3"},a("span",{key:"3e2469a262ca6a4717cf98060e15ef408670bede",class:"stzh-contact__role"},this.personRole)),(m&&this.name||z&&this.heading)&&a("div",{key:"3c84b65b7c393d7959c18aad22c7a8687e2dff90",class:"stzh-contact__main-heading-type"},this.name&&m&&a("stzh-heading",{key:"421aa72124724f9eaae2bb03c9a631b6ad6fb156",level:"3",curve:"h3",htmlContent:this.name}),this.heading&&z&&a("stzh-heading",{key:"f45c4245d3f5ed97ba81aebfd48f4a1f8a348cad",level:this.headingLevel,htmlContent:this.heading}))),m&&a("div",{key:"da47547c6f2f89b00a086908ec79e816c115e728",class:"stzh-contact__image-wrapper"},a("div",{key:"4a05f34b24dab0045296af3831de1e1fe207a222",class:"stzh-contact__image"},a("slot",{key:"16066ab3cf4be5f0b8e949653e26dc9debab0918",name:"image"})))),a("div",{key:"5de7988d36b15558e25f56c9f49825864b515ae1",class:"stzh-contact__responsibility"},this.responsibilityTitle&&a(r,{key:"a4ee5fd063ea7c870e7b8bd6389b891bd5366211",class:"stzh-contact__heading",itemprop:this.responsibilityTitle,innerHTML:this.responsibilityTitle}),this.responsibility&&a("stzh-text",{key:"d19d8b25742cd04954919a0292f227bb0852fcc6",class:"stzh-contact__responsibility-text"},this.responsibility)),a("div",{key:"05cc8154a6ea2270e5c14bcfe869c56cee5b4d55",class:"stzh-contact__contact-form"},a("slot",{key:"d2efa1ee73082baec6208cb28860cd3a7ae0c1fa",name:"contact-form"})),a("div",{key:"e8a1bf9091234595f1d6b19485da78c1027bbc6a",class:"stzh-contact__additional"},a("slot",{key:"99af6e87ac9a8f6b42a7636a2af58b1bbce3f0cf"})),a("div",{key:"b9cfb7032b47e2b672634d2ca9b62976937df1fd",class:"stzh-contact__info"},this.contactTitle&&a(l,{key:"ba18558739793384e1170c212fe99612aae985a8",class:"stzh-contact__availability-title"},this.contactTitle),a("div",{key:"6e0bfa2aef1bf8936e7be82861fad1b4c1ad1798",class:"stzh-contact__address",itemprop:"address",itemscope:true,itemtype:"http://schema.org/PostalAddress",innerHTML:this.address},!this.address&&a(s,{key:"f793cb7bf299c3aa58409132618185b39450360b"},this._street.length>0&&a("div",{key:"3da7414abc86e30ee3edddfa4be1ebf318fb5c76",class:"stzh-contact__street",itemprop:"streetAddress"},this._street.map((t=>a(s,null,t,a("br",null)))),this._streetInfo.length>0&&a(s,{key:"50fc6ebac7d8dc0224a9f866017293e1ce7690bd"},a("br",{key:"8793ce6d88712a914984ac670baa9eba7da0bcdc"})," ",this._streetInfo.map((t=>a(s,null,t,a("br",null)))))),this.postalCode&&a("span",{key:"3ed11133300085e8862337813a7fb5a3ee28b6ce",class:"stzh-contact__postal-code",itemprop:"postalCode"},this.postalCode," "),this.location&&a("span",{key:"d9e3a1406984e18c498487555bc5f76395efa91d",class:"stzh-contact__locality",itemprop:"addressLocality"},this.location),a("slot",{key:"c233ecc561baae858d07d1962e07c36826908bdc",name:"address"}))),this._numbers.length>0&&a("div",{key:"8cde75a245d6a076caa92e5fa2dae5bfd34a5884",class:"stzh-contact__numbers"},this._numbers.map((t=>a("div",{class:"stzh-contact__number"},a("span",null,t.label," "),a("stzh-link",{size:"inherit",height:"auto",class:"stzh-contact__number-link",href:`${t.type}:${h(t.number)}`,analyticsId:t.analyticsId||`${t.label} ${t.number}`,itemprop:t.type==="fax"?"faxNumber":"telephone"},t.number))))),this._emails.length>0&&a("div",{key:"f7031235ce1c8babef36f965b63e8243e5e5ba18",class:"stzh-contact__emails"},this._emails.map((t=>a("div",{class:"stzh-contact__email"},a("span",null,t.label," "),t.href?a("stzh-link",{size:"inherit",height:"auto",class:"stzh-container__email-link",href:`mailto:${t.href}`,analyticsId:t.analyticsId||`${t.label} ${t.text}`,itemprop:"email"},t.text):a("span",{class:"stzh-container__email-link",itemprop:"email"},t.text))))),a("div",{key:"24f553f19d2eacab69fd9a607acfe413dd19fa91",class:"stzh-contact__pobox",innerHTML:this.pobox},!this.pobox&&a(s,{key:"9c74eda47d7a7dc93e4f874c8978b13a832a3964"},this.poboxHeading&&a("div",{key:"f98ef6776f271adc37eba8595d573e93d40bad91",class:"stzh-contact__pobox-heading"},this.poboxHeading),this.poboxTitle&&a("div",{key:"dbaab541dc88c0b91518e56a9c423324b6247cb4",class:"stzh-contact__pobox-title"},this.poboxTitle),this.poboxPostalCode&&a("span",{key:"a479f1069f01c23c52ffa4eb2a009589590b3d64",class:"stzh-contact__pobox-postal-code"},this.poboxPostalCode," "),this.poboxLocation&&a("span",{key:"0fefb1c0c3e4b8a8ec1af740188089b873e12287",class:"stzh-contact__pobox-locality"},this.poboxLocation),a("slot",{key:"d715c43bf639a5641cad5c791375343ade9ff03c",name:"pobox"}))),a("div",{key:"ba17d3f71d7b22012d939097c190c8bd972d48d6",class:"stzh-contact__additional-information",innerHTML:this.additionalInformation})),this.availability&&a("div",{key:"83b05e23a140c775d8dd15497d945a6826ad4c8c",class:"stzh-contact__availability"},this.availabilityTitle&&a(l,{key:"560b991894ca111680bcdfcc88d50d929babf007",class:"stzh-contact__availability-title"},this.availabilityTitle),this._availability.length>0&&a("ul",{key:"6475aa21d798c36e3cf1c03c4f8df5f29f41bb4c",class:"stzh-contact__availability-list"},this._availability.map((t=>a("li",{class:"stzh-contact__availability-list-item"},a("div",{class:"stzh-contact__availability-weekday"},t.weekday),t.hours.length>0&&a("div",{class:"stzh-contact__availability-hours"},t.hours.map(((c,i)=>a(s,null,a("div",{class:"stzh-contact__availability-hour"},c),i<t.hours.length-1&&a("div",{class:"stzh-contact__availability-hours-separator"}))))))))))))}get element(){return i(this)}static get watchers(){return{availability:["availabilityWatcher"],numbers:["numbersWatcher"],emails:["emailsWatcher"],street:["streetWatcher"],streetInfo:["streetInfoWatcher"]}}};d.style=o;export{d as stzh_contact};
-//# sourceMappingURL=p-286c9d1c.entry.js.map

package/dist/stzh-components/p-286c9d1c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhContactCss","StzhContactStyle0","formatTel","tel","replace","StzhContact","this","_street","_streetInfo","_numbers","_emails","_availability","availabilityWatcher","newValue","JSON","parse","numbersWatcher","jsonParseException","emailsWatcher","streetWatcher","noArrayException","streetInfoWatcher","componentWillLoad","numbers","emails","availability","street","streetInfo","render","hasImage","hasSlot","element","hasAddress","address","hasAddons","hasLinks","classes","HeadingLevel","headingLevel","AvailabilityTitleElement","availabilityTitleLevel","isPerson","type","isOrganization","h","Host","key","class","itemscope","itemtype","itemprop","heading","name","mainHeading","level","mainHeadingLevel","htmlContent","personRole","curve","responsibilityTitle","innerHTML","responsibility","contactTitle","Fragment","length","map","postalCode","location","number","label","size","height","href","analyticsId","email","text","pobox","poboxHeading","poboxTitle","poboxPostalCode","poboxLocation","additionalInformation","availabilityTitle","item","weekday","hours","hour","index"],"sources":["src/components/CMS/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/CMS/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\" \"image image image image\"\n      \"responsibility responsibility responsibility responsibility\"\n      \"contactForm contactForm contactForm contactForm\" \"info info info info\"\n      \"availability availability availability availability\"\n      \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-contact-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n        \"image image image image . . . .\"\n        \"responsibility responsibility responsibility responsibility responsibility responsibility . .\"\n        \"contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm\"\n        \"info info info info availability availability availability availability\"\n        \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[has-availability=\"false\"] {\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\"\n          \"image image image image . . . .\"\n          \"responsibility responsibility responsibility responsibility responsibility responsibility . .\"\n          \"contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm\"\n          \"info info info info info info info info\"\n          \"additional additional additional additional additional additional additional additional\"\n      );\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve(\"p1\");\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__main-heading {\n    grid-area: heading;\n\n    &:not(:empty) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n  &__main-heading-type {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"xxsmall\");\n\n      @include mq($from: small) {\n        padding-top: space(\"small\");\n        padding-bottom: space(\"xxsmall\");\n      }\n\n      @include mq($from: medium) {\n        padding-top: space(\"xsmall\");\n        padding-bottom: space(\"xsmall\");\n      }\n\n      @include mq($from: large) {\n        padding-top: space(\"small\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__main-heading-section {\n    &:not(:empty) {\n      margin-bottom: space(\"medium\");\n      padding-top: space(\"medium\");\n      padding-bottom: space(\"xxsmall\");\n\n      @include mq($from: small) {\n        margin-bottom: space(\"large\");\n        padding-top: space(\"large\");\n        padding-bottom: space(\"xxsmall\");\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space(\"xlarge\");\n        padding-top: space(\"xlarge\");\n        padding-bottom: space(\"xsmall\");\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n        padding-top: space(\"xxlarge\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__main-heading-text {\n    &:not(:empty) {\n      margin-bottom: space(\"xsmall\");\n    }\n  }\n\n  &__image-wrapper {\n    grid-area: image;\n    background-color: $colorSecondary20;\n  }\n\n  &__role {\n    @include fontSize(\"milli\");\n    @include font(\"medium\");\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__info {\n    grid-area: info;\n  }\n\n  &__responsibility {\n    grid-area: responsibility;\n\n    &:not(:empty) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__responsibility-text {\n    &:not(:empty) {\n      padding-bottom: space(\"xsmall\");\n\n      @include mq($from: small) {\n        padding-bottom: space(\"small\");\n      }\n      @include mq($from: medium) {\n        padding-bottom: space(\"medium\");\n      }\n      @include mq($from: large) {\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__contact-form {\n    grid-area: contactForm;\n\n    @include spaceCurve(\"gap\", \"regular\");\n    display: grid;\n\n    ::slotted(*) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__additional {\n    grid-area: additional;\n\n    @include spaceCurve(\"gap\", \"regular\");\n    display: grid;\n\n    ::slotted(*) {\n      margin-top: space(\"xlarge\");\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-top: space(\"xxlarge\");\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__heading,\n  &__name,\n  &__emails,\n  &__pobox,\n  &__availability-title {\n    &:not(:empty):not(:last-child) {\n      margin-bottom: space(\"xsmall\");\n    }\n  }\n\n  &__numbers {\n    white-space: nowrap;\n  }\n\n  &__number,\n  &__email {\n    display: flex;\n    align-items: center;\n    gap: space(\"xxsmall\");\n  }\n\n  &__heading,\n  &__name,\n  &__role,\n  &__availability-title {\n    @include fontCurve(\"p1\");\n    margin: 0px;\n  }\n\n  &__heading,\n  &__name.is-heading,\n  &__availability-title {\n    @include font(\"heavy\");\n  }\n\n  &__availability {\n    grid-area: availability;\n    margin-top: space(\"xlarge\");\n    @include spaceCurve(\"gap\", \"small\");\n\n    @include mq($from: medium) {\n      margin-top: 0px;\n    }\n  }\n\n  &__availability-list,\n  &__availability-hour-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__availability-list {\n    @include spaceCurve(\"gap\", \"small\");\n    display: grid;\n  }\n\n  &__availability-weekday {\n    @include fontCurve(\"p1\");\n  }\n\n  &__availability-hours {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: small) {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      column-gap: space(\"xsmall\");\n    }\n  }\n\n  &__availability-hours-separator {\n    width: 1px;\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  &--has-image &__image {\n    width: 64px;\n    height: 64px;\n\n    @include mq($from: small) {\n      width: 80px;\n      height: 80px;\n    }\n\n    @include mq($from: medium) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @include mq($from: large) {\n      width: 120px;\n      height: 120px;\n    }\n\n    @include mq($from: ultra) {\n      width: 140px;\n      height: 140px;\n    }\n  }\n\n  &__image-wrapper {\n    background-color: transparent;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../../index\";\n\nimport { hasSlot } from \"../../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot contact-form - slot for contact form\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true,\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Resposibility title */\n  @Prop() responsibilityTitle: string;\n\n  /** Resposibility title */\n  @Prop() responsibility: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Person role */\n  @Prop() personRole: string;\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _streetInfo: string[] = [];\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Contact title */\n  @Prop() contactTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  /** Additional freetext */\n  @Prop() additionalInformation: string;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._numbers = JSON.parse(newValue);\n      } catch (jsonParseException) {\n        // Nothing to do here, just catching to prevent component from dying.\n      }\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._emails = JSON.parse(newValue);\n      } catch (jsonParseException) {\n        // Nothing to do here, just catching to prevent component from dying.\n      }\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n    const isPerson = this.type === \"Person\";\n    const isOrganization = this.type === \"Organization\";\n\n    return (\n      <Host has-availability={!!this.availability ? \"true\" : \"false\"}>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={(isOrganization && !this.heading) || (isPerson && !this.name) ? \"name\" : null}\n          >\n            <div class=\"stzh-contact__main-heading-section\">\n              {this.mainHeading ? (\n                <stzh-heading level={this.mainHeadingLevel} htmlContent={this.mainHeading} />\n              ) : (\n                <slot name=\"main-heading\"></slot>\n              )}\n            </div>\n            <div class={isPerson && \"stzh-contact__main-heading-text\"}>\n              {this.personRole && isPerson && (\n                <stzh-heading curve=\"h3\" level=\"3\">\n                  <span class=\"stzh-contact__role\">{this.personRole}</span>\n                </stzh-heading>\n              )}\n              {((isPerson && this.name) || (isOrganization && this.heading)) && (\n                <div class=\"stzh-contact__main-heading-type\">\n                  {this.name && isPerson && <stzh-heading level=\"3\" curve=\"h3\" htmlContent={this.name} />}\n                  {this.heading && isOrganization && (\n                    <stzh-heading level={this.headingLevel} htmlContent={this.heading} />\n                  )}\n                </div>\n              )}\n            </div>\n            {isPerson && (\n              <div class=\"stzh-contact__image-wrapper\">\n                <div class=\"stzh-contact__image\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__responsibility\">\n            {this.responsibilityTitle && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.responsibilityTitle}\n                innerHTML={this.responsibilityTitle}\n              />\n            )}\n            {this.responsibility && (\n              <stzh-text class=\"stzh-contact__responsibility-text\">{this.responsibility}</stzh-text>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__contact-form\">\n            <slot name=\"contact-form\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.contactTitle && (\n              <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                {this.contactTitle}\n              </AvailabilityTitleElement>\n            )}\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address && (\n                <Fragment>\n                  {this._street.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\n                        </Fragment>\n                      )}\n                    </div>\n                  )}\n\n                  {this.postalCode && (\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  )}\n\n                  {this.location && (\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  )}\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            {this._numbers.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            <div class=\"stzh-contact__additional-information\" innerHTML={this.additionalInformation}></div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 && (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-568ae693.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,a,g as n}from"./p-ef5985a3.js";const s='@charset "UTF-8";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-layout-item-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::before, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    var(--stzh-color-coolgrey10));\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-layout-item-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "image image image image " "text text text text "\n      );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "image image image image image image image image"\n        "text text text text text text text text"\n      );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "image image image image image image image image image image image image"\n        "text text text text text text text text text text text text"\n      );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-layout-item-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "text text image image"\n      );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "text text text text text image image image"\n      );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "text text text text text text image image image image image image"\n      );\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text text text text text";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text text text text text text text text text";\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser-layout-item__title-link.sc-stzh-pi-teaser-layout-item {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser-layout-item__date.sc-stzh-pi-teaser-layout-item {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}';const r=s;const o=class{constructor(i){t(this,i);this.stzhClick=e(this,"stzhClick",7);this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-pi-teaser-layout-item",originalEvent:t,href:this.href})};this.href=undefined;this.target=undefined;this.analyticsId=undefined;this.dateline="";this.heading="";this.imageSrc=undefined;this.headingLevel="3";this.lead="";this.date="";this.contentSize="M";this.imagePosition=undefined}componentDidRender(){requestAnimationFrame((()=>{var t,e;const i=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(i){(e=this.titleLinkElement)===null||e===void 0?void 0:e.setAttribute("s-object-id",i)}}))}renderHeading(){const t=`h${this.headingLevel}`;const e=this.href?"a":"button";return i("div",{class:"stzh-pi-teaser-layout-item__title-wrapper"},i(t,{class:"stzh-pi-teaser-layout-item__title"},i(e,{ref:t=>this.titleLinkElement=t,class:"stzh-pi-teaser-layout-item__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},i("div",{ref:t=>this.headingTextElement=t},this.heading))))}render(){const t=!!this.lead;console.log("imageSrc: ",this.imageSrc," & imagePosition: ",this.imagePosition);const e=!!this.imageSrc&&!!this.imagePosition;console.log("hasImage: ",e);const n=this.lead;const s={"stzh-pi-teaser-layout-item":true,"stzh-pi-teaser-layout-item--has-lead":t,"stzh-pi-teaser-layout-item--has-image":e};return i(a,{key:"6800fb97b1ec726ec3f09452a33100366d78ffac","has-lead":t,"has-image":e,"image-position":this.imagePosition,"content-size":this.contentSize},i("article",{key:"85b38929fec3ee38994782bc7321e78684e779fd",class:s,"aria-label":this.heading,role:"listitem"},e&&i("div",{key:"1923478de5ada40e71286e3eaa49d8cdf7017a92",class:"stzh-pi-teaser-layout-item__image"},i("img",{key:"c9b796b46a9eb43706924619910c4efafe16d355",src:this.imageSrc,alt:"Example image"})),i("div",{key:"eeaaf7e1adf48da141173b7ce7a63dc2ea3763a9",class:"stzh-pi-teaser-layout-item__wrapper"},i("div",{key:"6058d6be2b5124da300dd97733057d0c22e24d9f",class:"stzh-pi-teaser-layout-item__text"},this.dateline&&i("p",{key:"68bae848e3e1cf377b075c7d05fce9aad811ac76",class:"stzh-pi-teaser-layout-item__dateline"},this.dateline),this.renderHeading(),i("div",{key:"4e9705883f6f05ff52904322af547c85996da6df",class:"stzh-pi-teaser-layout-item__lead-wrapper"},i("div",{key:"3ced9f74e039e1cc456d4ef37074d8442844b857",class:"stzh-pi-teaser-layout-item__lead"},n)),this.date&&i("div",{key:"92cd55abb157637e1e0db08edb85463be3e622bb",class:"stzh-pi-teaser-layout-item__date"},this.date)))))}get element(){return n(this)}};o.style=r;export{o as stzh_pi_teaser_layout_item};
-//# sourceMappingURL=p-568ae693.entry.js.map

package/dist/stzh-components/p-568ae693.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPiTeaserLayoutItemCss","StzhPiTeaserLayoutItemStyle0","StzhPiTeaserLayoutItem","this","handleCardClick","originalEvent","stzhClick","emit","component","href","componentDidRender","requestAnimationFrame","objectId","analyticsId","_a","headingTextElement","innerText","_b","titleLinkElement","setAttribute","renderHeading","Heading","headingLevel","TitleLink","h","class","ref","el","target","onClick","heading","render","hasLead","lead","console","log","imageSrc","imagePosition","hasImage","displayLead","classes","Host","key","contentSize","role","src","alt","dateline","date"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10});\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image \" \"text text text text \"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image image image image image\"\n          \"text text text text text text text text\"\n        );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n        );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text image image\"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text text text text image image image\"\n        );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text text text text text image image image image image image\"\n        );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image,\n      var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    &>img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\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-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\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-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\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  /** Image source link */\n  @Prop() imageSrc: string | null;\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  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\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-layout-item\",\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-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAA4B,8nbAClC,MAAAC,EAAeD,E,MCaFE,EAAsB,M,8DA8CzBC,KAAAC,gBAAmBC,IACzBF,KAAKG,UAAUC,KAAK,CAClBC,UAAW,6BACXH,gBACAI,KAAMN,KAAKM,MACX,E,mFApCuB,G,aAGD,G,0CAMoB,I,UAGvB,G,UAGA,G,iBAG8B,I,6BAqBrD,kBAAAC,GACEC,uBAAsB,K,QACpB,MAAMC,EAAWT,KAAKU,eAAeC,EAAAX,KAAKY,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,WAE9D,GAAIJ,EAAU,EACZK,EAAAd,KAAKe,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAeP,E,KAKzD,aAAAQ,GACE,MAAMC,EAAU,IAAIlB,KAAKmB,eACzB,MAAMC,EAAYpB,KAAKM,KAAO,IAAM,SACpC,OACEe,EAAA,OAAKC,MAAM,6CACTD,EAACH,EAAO,CAACI,MAAM,qCACbD,EAACD,EAAS,CACRG,IAAKC,GAAOxB,KAAKe,iBAAmBS,EACpCF,MAAM,yCACNhB,KAAMN,KAAKM,KACXmB,OAAQzB,KAAKyB,OACbC,QAAS1B,KAAKC,iBAEdoB,EAAA,OAAKE,IAAKC,GAAOxB,KAAKY,mBAAqBY,GAAwBxB,KAAK2B,W,CAOlF,MAAAC,GACE,MAAMC,IAAY7B,KAAK8B,KACvBC,QAAQC,IAAI,aAAchC,KAAKiC,SAAU,qBAAsBjC,KAAKkC,eACpE,MAAMC,IAAanC,KAAKiC,YAAcjC,KAAKkC,cAC3CH,QAAQC,IAAI,aAAcG,GAC1B,MAAMC,EAAcpC,KAAK8B,KAIzB,MAAMO,EAAU,CACd,6BAA8B,KAC9B,uCAAwCR,EACxC,wCAAyCM,GAG3C,OACEd,EAACiB,EAAI,CAAAC,IAAA,sDAAWV,EAAO,YAAaM,EAAQ,iBAAkBnC,KAAKkC,cAAa,eAAgBlC,KAAKwC,aACnGnB,EAAA,WAAAkB,IAAA,2CAASjB,MAAOe,EAAO,aAAcrC,KAAK2B,QAASc,KAAK,YACrDN,GACCd,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,qCACTD,EAAA,OAAAkB,IAAA,2CAAKG,IAAK1C,KAAKiC,SAAUU,IAAI,mBAIjCtB,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,uCACTD,EAAA,OAAAkB,IAAA,2CAAKjB,MAAO,oCACTtB,KAAK4C,UAAYvB,EAAA,KAAAkB,IAAA,2CAAGjB,MAAM,wCAAwCtB,KAAK4C,UACvE5C,KAAKiB,gBACNI,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,4CACTD,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,oCAAoCc,IAEhDpC,KAAK6C,MAAQxB,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,oCAAoCtB,KAAK6C,S"}

package/dist/stzh-components/p-adc9fb2b.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as i,h as e,a,g as o}from"./p-ef5985a3.js";const t=".sc-stzh-imagecomparison-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-imagecomparison-h,[stzh-hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}@media print{.sc-stzh-imagecomparison-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-imagecomparison-h.sc-stzh-imagecomparison-s>*,.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sc-stzh-imagecomparison-h.sc-stzh-imagecomparison-s>[slot=image-after],.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{clip-path:polygon(calc(var(--exposure) + var(--divider-width) / 2) 0, 100% 0, 100% 100%, calc(var(--exposure) + var(--divider-width) / 2) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";const r=t;const n=class{constructor(e){s(this,e);this.stzhChange=i(this,"stzhChange",7);this.handleInput=s=>{let i=this.inputElement.value;this.value=Number(i);this.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:s,value:this.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.value=50;this.label=undefined;this.a11yDescribedby=""}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")}}render(){const s={"stzh-imagecomparison":true};return e(a,{key:"8fb01c2b3205504ec3618ebe2827c910e26673f6","aria-roledescription":this.localization.label,style:{"--exposure":`${this.value.toString()}%`}},e("div",{key:"087dbca7ba2c928be58ab16103acf356d5733fd6",class:s},e("div",{key:"11d3bd46be8d3c004e178cc008f8d9d65a3b6fa8",class:"stzh-imagecomparison__element"},e("slot",{key:"81ec7b34f39e7136e252494ce3028fba2dc268b2",name:"image-before"}),e("slot",{key:"8ee4dae7e23bae9f393052deae2111dd946bb9b5",name:"image-after"}),e("label",{key:"90e07ac71607075db9805d9fab3a2f54f8c66856",class:"stzh-imagecomparison__label","aria-label":this.label||this.localization.label,"aria-describedby":this.a11yDescribedby||null},e("div",{key:"ae11ac3cfad066a765918cf2a6df153cb98f80b2",class:"stzh-imagecomparison__slider-icon-wrapper"},e("stzh-icon",{key:"bdf91cddd0328eeac357b177eeadf9186224f25d",class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),e("stzh-icon",{key:"db1d2ef2ba4f9c10872aa4e43a8064e0d6960652",class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),e("div",{key:"2aa22770a38203e1501aef70569cf4a9081c371d",class:"stzh-imagecomparison__slider-line"}),e("input",{key:"d27fa842febee03709311b90123afcf1208d8a30",type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:s=>this.inputElement=s,onInput:this.handleInput})),e("div",{key:"495532d4297937afd2fd13b3abe739e036b5645d",class:"stzh-imagecomparison__hint-wrapper"},e("span",{key:"accd3d11ea0101b1f90ee9bdde6248814cb121b0",class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:e("slot",{name:"hint-left"})),e("span",{key:"5c671703aa0f3741280a068ead4c59a6eb0351a1",class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:e("slot",{name:"hint-right"}))))))}get element(){return o(this)}};n.style=r;export{n as stzh_imagecomparison};
-//# sourceMappingURL=p-adc9fb2b.entry.js.map

package/dist/stzh-components/p-d37d10b5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as r,g as s}from"./p-ef5985a3.js";import{m as i,a}from"./p-f4adb3cd.js";import{h}from"./p-87c329f2.js";import"./p-dae15605.js";const o='.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 n=o;var u;(function(t){t["xxxsmall"]="one";t["xxsmall"]="two";t["xsmall"]="three";t["small"]="four";t["medium"]="five";t["large"]="six"})(u||(u={}));const l=t=>{switch(t){case 1:return u.xxxsmall;case 2:return u.xxsmall;case 3:return u.xsmall;case 4:return u.small;case 5:return u.medium;case 6:return u.large;default:return null}};const p=class{constructor(e){t(this,e);this.mediaChangeHandler=()=>{this.isSmall=i("small").matches;this.isMedium=i("medium").matches;this.isLarge=i("large").matches;this.isUltra=i("ultra").matches};this.variant="hero";this.hasSide=false;this.heading="";this.headingLevel="3";this.contentList=[];this.isSmall=undefined;this.isMedium=undefined;this.isLarge=undefined;this.isUltra=undefined}componentDidLoad(){this.mediaChangeHandler();this.contentList=this.contentList.slice(0,6);if(this.variant=="rubrick"&&this.contentList.length<4){if((this.isLarge||this.isUltra)&&!this.hasSide){const t=Math.max(0,4-this.contentList.length);this.contentList=[...this.contentList,...Array(t).fill({type:"empty-teaser"})]}}}connectedCallback(){a(this.mediaChangeHandler)}render(){const t=this.variant=="rubrick";const s=l(this.contentList.length);const i=`h${this.headingLevel}`;const a={"stzh-pi-teaser-layout":true,"stzh-pi-teaser-layout--rubrick":t,"stzh-pi-teaser-layout--has-side":this.hasSide};const o=!!this.heading;const n=h(this.element,"bottom");const p=e=>{const r=this.isUltra||this.isLarge;const i=this.hasSide?"M":"L";if(t){switch(e){case 1:case 2:return r?"L":this.isMedium?i:this.isSmall?"L":"M";case 3:if(s==u.small){return r?"L":this.isMedium?i:this.isSmall?"S":"XS"}if(s==u.medium){return r?"L":this.isMedium?i:this.isSmall?"L":"M"}if(s==u.large){return r?"M":this.isMedium?i:this.isSmall?"S":"XS"}case 4:if(s==u.small){return r?"L":this.isMedium?i:this.isSmall?"S":"XS"}if(s==u.medium){return r?"M":this.isMedium?i:this.isSmall?"S":"XS"}if(s==u.large){return r?"M":this.isMedium?i:this.isSmall?"S":"XS"}case 5:if(s==u.medium){return r?"M":this.isMedium?"M":this.isSmall?"S":"XS"}if(s==u.large){return r?"M":this.isMedium?"M":this.isSmall?"S":"XS"}case 6:if(s==u.large){return r?"M":this.isMedium?"M":this.isSmall?"S":"XS"}}}else{switch(e){case 1:case 2:return r?"XL":this.isMedium?"L":this.isSmall?"L":"M";case 3:case 4:return r?"L":this.isMedium?"M":this.isSmall?"S":"XS";case 5:case 6:return r?"M":this.isMedium?"M":this.isSmall?"S":"XS"}}};const m=(e,r,i)=>{const a=this.isUltra||this.isLarge;const h=i==null||i==undefined;if(t){switch(r){case 1:case 2:return e;case 3:if(h){return a?e:this.isMedium?e:this.isSmall?e:null}if(s==u.large){return this.isUltra?null:this.isLarge?null:this.isMedium?e:null}return a?e:this.isMedium?e:null;case 4:if(h){return a?e:this.isMedium?e:this.isSmall?e:null}if(s==u.medium){return this.isUltra?null:this.isLarge?null:this.isMedium?e:null}if(s==u.large){return this.isUltra?null:this.isLarge?null:this.isMedium?e:null}return a?e:this.isMedium?e:null;case 5:if(h){return a?e:this.isMedium?e:null}return null;case 6:if(h){return a?e:this.isMedium?e:null}return null}}else{switch(r){case 1:case 2:return e;case 3:case 4:if(h){return e}if(this.hasSide){return a?e:this.isMedium?e:null}return a?e:this.isMedium?null:null;case 5:case 6:return a?e:this.isMedium?e:null}}return e};const c=(e,r)=>{const i=this.isUltra||this.isLarge;const a=e==null||e==undefined;if(a){return null}if(t){switch(r){case 1:case 2:return"top";case 3:if(s==u.medium){if(this.hasSide){return i?"top":this.isMedium?"top":this.isSmall?"right":"top"}}case 4:if(s==u.medium){if(this.hasSide){return i?"right":this.isMedium?"top":this.isSmall?"right":"top"}}if(s==u.large){if(this.hasSide){return i?"right":this.isMedium?"top":this.isSmall?"right":"top"}}return i?"top":this.isMedium?"top":this.isSmall?"right":"top";case 5:if(s==u.medium){if(this.hasSide){return i?"right":this.isMedium?"right":null}return i?"top":this.isMedium?"right":null}case 6:if(s==u.large){if(this.hasSide){return i?"right":this.isMedium?"right":null}return i?"top":this.isMedium?"right":null}}}else{switch(r){case 1:case 2:return"top";case 3:case 4:if(this.hasSide){return i?"top":this.isMedium?"right":this.isSmall?"right":"top"}return i?"top":this.isMedium?"top":this.isSmall?null:null;case 5:case 6:return i?null:this.isMedium?null:this.isSmall?null:null}}};if(!t&&this.contentList.length<6){return e("div",null,"At least add 6 elements for hero")}const f=t=>({"stzh-pi-teaser-layout-teaser":true,[`stzh-pi-teaser-layout-teaser--${t+1}`]:true,[`stzh-pi-teaser-layout-teaser--${t+1}--${this.hasSide?"side":"no-side"}`]:true,[`stzh-pi-teaser-layout-teaser--${t+1}--${s}`]:true,[`stzh-pi-teaser-layout-teaser--${t+1}--${s}--${this.hasSide?"side":"no-side"}`]:true});return e(r,{"is-rubrick":t?"true":"false",amount:s,"has-side":this.hasSide?"true":"false"},o&&e("div",{class:"stzh-pi-teaser-layout__header-holder"},e(i,{class:"stzh-pi-teaser-layout__header",level:this.headingLevel},this.heading)),e("div",{class:a},...this.contentList.map(((t,r)=>t.type=="empty-teaser"?e("div",{class:f(r)}):e("stzh-pi-teaser-layout-item",{key:r,href:t.href,dateline:t.dateline,heading:t.heading,date:t.date,imageSrc:t.imageSrc,contentSize:p(r+1),lead:m(t.lead,r+1,t.imageSrc),imagePosition:c(t.imageSrc,r+1),class:f(r)})))),n&&e("div",{class:"stzh-pi-teaser-layout__bottom-slot"},e("slot",{name:"bottom"})))}get element(){return s(this)}};p.style=n;export{p as stzh_pi_teaser_layout};
-//# sourceMappingURL=p-d37d10b5.entry.js.map

package/dist/stzh-components/p-d37d10b5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPiTeaserLayoutCss","StzhPiTeaserLayoutStyle0","RubrickSize","getRubrickSize","length","xxxsmall","xxsmall","xsmall","small","medium","large","StzhPiTeaserLayout","this","mediaChangeHandler","isSmall","media","matches","isMedium","isLarge","isUltra","componentDidLoad","contentList","slice","variant","hasSide","paddingNeeded","Math","max","Array","fill","type","connectedCallback","addMediaChangeListener","render","isRubrick","rubrickSize","Heading","headingLevel","classes","hasHeading","heading","bottomSlotUsed","hasSlot","element","contentSizeBehavior","index","big","sideSize","leadBehavior","lead","imageSrc","noImage","undefined","imageBehavior","h","teaserClasses","Host","amount","class","level","map","teaser","key","href","dateline","date","contentSize","imagePosition","name"],"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"],"mappings":"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"}