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

package/dist/components/p-CJbcBzTU.js

@@ -0,0 +1,526 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+
+const stzhPiTeaserLayoutItemCss = () => `@charset "UTF-8";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.sc-stzh-pi-teaser-layout-item-h {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+[hidden].sc-stzh-pi-teaser-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {
+  display: none;
+}
+.sc-stzh-pi-teaser-layout-item-h::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+.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 {
+  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-item-h {
+  
+}
+.sc-stzh-pi-teaser-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {
+  outline-style: none !important;
+}
+.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {
+  border: 0 !important;
+}
+
+
+.sc-stzh-pi-teaser-layout-item-h {
+  --image-background-color: var(
+    --stzh-pi-teaser-layout-item-image-background-color,
+    var(--stzh-color-coolgrey10)
+  );
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  container-type: size;
+}
+[image-position=top].sc-stzh-pi-teaser-layout-item-h {
+  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+}
+@media screen and (max-width: 899px) {
+  [image-position=top].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "image image image image " "text text text text "
+    );
+  }
+}
+@media screen and (min-width: 900px) {
+  [image-position=top].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "image image image image image image image image"
+        "text text text text text text text text"
+    );
+  }
+}
+@media screen and (min-width: 1260px) {
+  [image-position=top].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "image image image image image image image image image image image image"
+        "text text text text text text text text text text text text"
+    );
+  }
+}
+[image-position=right].sc-stzh-pi-teaser-layout-item-h {
+  --grid-template-no-rows: 1fr;
+}
+@media screen and (max-width: 899px) {
+  [image-position=right].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "text text image image"
+    );
+  }
+}
+@media screen and (min-width: 900px) {
+  [image-position=right].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "text text text text text image image image"
+    );
+  }
+}
+@media screen and (min-width: 1260px) {
+  [image-position=right].sc-stzh-pi-teaser-layout-item-h {
+    --grid-template-areas: var(
+      --stzh-pi-teaser-layout-item-grid-template-areas,
+      "text text text text text text image image image image image image"
+    );
+  }
+}
+.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {
+  --grid-template-no-rows: 1fr;
+}
+@media screen and (max-width: 899px) {
+  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text";
+  }
+}
+@media screen and (min-width: 900px) {
+  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text text text text text";
+  }
+}
+@media screen and (min-width: 1260px) {
+  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text text text text text text text text text";
+  }
+}
+.sc-stzh-pi-teaser-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {
+  display: none;
+}
+[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-mega-font-size);
+  line-height: var(--stzh-font-mega-text-line-height);
+  letter-spacing: var(--stzh-font-mega-text-letter-spacing);
+}
+[content-size=L].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-hecto-font-size);
+  line-height: var(--stzh-font-hecto-text-line-height);
+  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);
+}
+[content-size=M].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-deca-font-size);
+  line-height: var(--stzh-font-deca-text-line-height);
+  letter-spacing: var(--stzh-font-deca-text-letter-spacing);
+}
+[content-size=S].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-deci-font-size);
+  line-height: var(--stzh-font-deci-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+[content-size=XS].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-centi-font-size);
+  line-height: var(--stzh-font-centi-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+[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 {
+  -webkit-line-clamp: 2;
+}
+@container (max-height: 235px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 40cqh 60cqh;
+  }
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 1;
+  }
+  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 1;
+  }
+}
+@container (min-height: 236px) and (max-height:349px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 47cqh 53cqh;
+  }
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 2;
+  }
+  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 2;
+  }
+}
+@container (min-height: 350px) and (max-height:549px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 55cqh 45cqh;
+  }
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 3;
+  }
+}
+@container (min-height: 550px) and (max-height: 639px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 50cqh 50cqh;
+  }
+}
+@container (min-height: 640px) and (max-height: 799px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 55cqh 45cqh;
+  }
+}
+@container (min-height: 800px) {
+  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 40cqh 60cqh;
+  }
+}
+
+.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+  column-gap: var(--stzh-grid-gutter);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));
+  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));
+  background-color: var(--stzh-color-grey10);
+}
+.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  height: 100%;
+  min-height: 0;
+  align-content: start;
+}
+.stzh-pi-teaser-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {
+  grid-area: text;
+  overflow: hidden;
+  padding: var(--stzh-space-medium);
+  height: 100%;
+  min-height: 0;
+}
+.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item {
+  overflow: hidden;
+  grid-area: image;
+}
+.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {
+  font-family: var(--stzh-font-family-title);
+  font-weight: var(--stzh-font-weight-title);
+  font-style: var(--stzh-font-style-title);
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  color: var(--stzh-color-coolgrey70);
+  margin: 0;
+  align-self: start;
+}
+.stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+  padding-top: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+.stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+  padding-bottom: var(--stzh-space-xxsmall);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-bottom: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {
+  font-family: var(--stzh-font-family-title);
+  font-weight: var(--stzh-font-weight-title);
+  font-style: var(--stzh-font-style-title);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  color: var(--stzh-color-black);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  
+  align-self: start;
+}
+.stzh-pi-teaser-layout-item__title-link.sc-stzh-pi-teaser-layout-item {
+  display: block;
+  font-family: inherit;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  color: var(--stzh-color-black);
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+  cursor: pointer;
+}
+.stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {
+  padding-bottom: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (max-width: 899px) {
+  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {
+    font-size: var(--stzh-font-milli-font-size);
+    line-height: var(--stzh-font-milli-text-line-height);
+    letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {
+    font-size: var(--stzh-font-centi-font-size);
+    line-height: var(--stzh-font-centi-text-line-height);
+    letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  }
+}
+.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {
+  margin-top: 0;
+  color: var(--stzh-color-coolgrey70);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lead-lines, 3);
+  line-clamp: var(--lead-lines, 3);
+  overflow: hidden;
+  
+  align-self: start;
+}
+.stzh-pi-teaser-layout-item__date.sc-stzh-pi-teaser-layout-item {
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  color: var(--stzh-color-coolgrey70);
+  margin: 0;
+  align-self: end;
+}`;
+
+const StzhPiTeaserLayoutItem = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaserLayoutItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhClick = createEvent(this, "stzhClick");
+        /** Dateline */
+        this.dateline = "";
+        /** Heading (alternative for heading slot) */
+        this.heading = "";
+        /** Heading level */
+        this.headingLevel = "3";
+        /** Lead text (alternative for lead slot) */
+        this.lead = "";
+        /** Date */
+        this.date = "";
+        /**Which size of teaser it is */
+        this.contentSize = "M";
+        this.handleCardClick = (originalEvent) => {
+            this.stzhClick.emit({
+                component: "stzh-pi-teaser-layout-item",
+                originalEvent,
+                href: this.href,
+            });
+        };
+    }
+    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: '33425e2b5a377a546b68579108b91bd336e6378b', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '6ac01b5627d46557bd088567353ea2cd5391187a', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '8b9af4c11d08750d39cda328c44dd8ddb705b684', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '123534d841c0e898ccd6bac11b926dda192e1c58', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '68216e5754cd62ef2cce7183acb33ba11576ba66', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: '9409985543bd5ce73c30294a33b7ed68a983f3d7', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: 'c35c4a08a78e22b15cc1d49cea364d092edb02ba', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '1e29cd179c9e591ae6c6ac2e1666cd40813f3a8c', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: 'b20e070a63f7a655851485f9e792aa9042177758', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: '5136c44fa509948eb3a49ab983493aaaa55cbb0d', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
+    }
+    get element() { return this; }
+    static get style() { return stzhPiTeaserLayoutItemCss(); }
+}, [258, "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(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhPiTeaserLayoutItem);
+            }
+            break;
+    } });
+}
+
+export { StzhPiTeaserLayoutItem as S, defineCustomElement as d };
+//# sourceMappingURL=p-CJbcBzTU.js.map
+
+//# sourceMappingURL=p-CJbcBzTU.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CJbcBzTU.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MCnaW,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;AALnC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAoBU,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAMpB,QAAA,IAAY,CAAA,YAAA,GAA0B,GAAG;;AAGzC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAW,CAAA,WAAA,GAAkC,GAAG;AAahD,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,aAAyB,KAAI;AACtD,Y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","names":["__stencil_proxyCustomElement","HTMLElement"],"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(\n    --stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10}\n  );\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(\n        --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(\n        --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(\n        --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(\n        --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(\n        --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(\n        --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:549px) {\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: 550px) and (max-height: 639px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 50cqh 50cqh;\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: 640px) 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(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\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}\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}