@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/collection/components/CMS/stzh-pi-teaser/stzh-pi-teaser.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * Colors
  */
@@ -168,267 +167,89 @@
 :host {
   --image-background-color: var(
     --stzh-pi-teaser-image-background-color,
-    var(--stzh-color-coolgrey10)
+    var(--stzh-color-primary30)
   );
   display: flex;
-  inline-size: 100%;
-  block-size: 100%;
-  container-type: size;
-}
-:host[image-position=top] {
-  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-}
-@media screen and (max-width: 899px) {
-  :host[image-position=top] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-grid-template-areas,
-      "image image image image " "text text text text "
-    );
-  }
+  flex-direction: column;
 }
-@media screen and (min-width: 900px) {
-  :host[image-position=top] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-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) {
-  :host[image-position=top] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-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"
-    );
-  }
-}
-:host[image-position=right] {
-  --grid-template-no-rows: 1fr;
+
+.stzh-pi-teaser {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--stzh-color-white);
+  /* Has image */
+  /* Title ratio styling (no image) */
 }
-@media screen and (max-width: 899px) {
-  :host[image-position=right] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-grid-template-areas,
-      "text text image image"
-    );
-  }
+.stzh-pi-teaser__wrapper {
+  display: flex;
+  flex-grow: 1;
+  padding-right: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-medium);
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
+  flex-direction: column;
+  align-items: flex-start;
 }
 @media screen and (min-width: 900px) {
-  :host[image-position=right] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-grid-template-areas,
-      "text text text text text image image image"
-    );
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host[image-position=right] {
-    --grid-template-areas: var(
-      --stzh-pi-teaser-grid-template-areas,
-      "text text text text text text image image image image image image"
-    );
-  }
-}
-:host:not([has-image]) {
-  --grid-template-no-rows: 1fr;
-}
-@media screen and (max-width: 899px) {
-  :host:not([has-image]) {
-    --grid-template-areas-no-image: "text text text text";
+  .stzh-pi-teaser__wrapper {
+    padding-right: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 900px) {
-  :host:not([has-image]) {
-    --grid-template-areas-no-image: "text text text text text text text text";
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host:not([has-image]) {
-    --grid-template-areas-no-image: "text text text text text text text text text text text text";
-  }
-}
-:host:not([has-lead]) .stzh-pi-teaser__lead {
-  display: none;
-}
-:host[content-size=XL] .stzh-pi-teaser__title {
-  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);
-}
-:host[content-size=L] .stzh-pi-teaser__title {
-  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);
-}
-:host[content-size=M] .stzh-pi-teaser__title {
-  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);
-}
-:host[content-size=S] .stzh-pi-teaser__title {
-  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);
-}
-:host[content-size=XS] .stzh-pi-teaser__title {
-  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);
-}
-:host[content-size=S]:not([has-image]) .stzh-pi-teaser__title {
-  -webkit-line-clamp: 2;
-}
-@container (max-height: 235px) {
-  :host[image-position=top] .stzh-pi-teaser {
-    --grid-template-rows: 40cqh 60cqh;
-  }
-  :host[image-position=top] .stzh-pi-teaser__lead {
-    --lead-lines: 1;
-  }
-  :host:not([has-image]) .stzh-pi-teaser__lead {
-    --lead-lines: 1;
-  }
-}
-@container (min-height: 236px) and (max-height:349px) {
-  :host[image-position=top] .stzh-pi-teaser {
-    --grid-template-rows: 47cqh 53cqh;
-  }
-  :host[image-position=top] .stzh-pi-teaser__lead {
-    --lead-lines: 2;
-  }
-  :host:not([has-image]) .stzh-pi-teaser__lead {
-    --lead-lines: 2;
-  }
-}
-@container (min-height: 350px) and (max-height:599px) {
-  :host[image-position=top] .stzh-pi-teaser {
-    --grid-template-rows: 55cqh 45cqh;
-  }
-  :host[image-position=top] .stzh-pi-teaser__lead {
-    --lead-lines: 3;
-  }
-}
-@container (min-height: 600px) and (max-height: 799px) {
-  :host[image-position=top] .stzh-pi-teaser {
-    --grid-template-rows: 55cqh 45cqh;
-  }
-}
-@container (min-height: 800px) {
-  :host[image-position=top] .stzh-pi-teaser {
-    --grid-template-rows: 40cqh 60cqh;
-  }
-}
-
-.stzh-pi-teaser {
-  column-gap: var(--stzh-grid-gutter);
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  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);
-}
-@media screen and (min-width: 600px) {
-  .stzh-pi-teaser {
-    column-gap: var(--stzh-grid-gutter-small);
+  .stzh-pi-teaser__wrapper {
+    padding-left: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 900px) {
-  .stzh-pi-teaser {
-    column-gap: var(--stzh-grid-gutter-medium);
+  .stzh-pi-teaser__wrapper {
+    padding-top: var(--stzh-space-large);
   }
 }
-@media screen and (min-width: 1260px) {
-  .stzh-pi-teaser {
-    column-gap: var(--stzh-grid-gutter-large);
-  }
-}
-@media screen and (min-width: 1600px) {
-  .stzh-pi-teaser {
-    column-gap: var(--stzh-grid-gutter-ultra);
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser__wrapper {
+    padding-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 900px) {
-  .stzh-pi-teaser {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+  .stzh-pi-teaser__wrapper {
+    padding-bottom: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-pi-teaser {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
+  .stzh-pi-teaser__wrapper {
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
-.stzh-pi-teaser__text {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
-  height: 100%;
-  min-height: 0;
-  align-content: start;
-}
-.stzh-pi-teaser__wrapper {
-  grid-area: text;
-  overflow: hidden;
-  padding: var(--stzh-space-medium);
-  height: 100%;
-  min-height: 0;
-}
 .stzh-pi-teaser__image {
-  overflow: hidden;
-  grid-area: image;
-}
-.stzh-pi-teaser__image > img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  display: none;
 }
 .stzh-pi-teaser__dateline {
   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);
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   color: var(--stzh-color-coolgrey70);
-  margin: 0;
-  align-self: start;
-}
-.stzh-pi-teaser__title-wrapper {
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xxsmall);
-}
-@media screen and (min-width: 600px) {
-  .stzh-pi-teaser__title-wrapper {
-    padding-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-pi-teaser__title-wrapper {
-    padding-top: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-pi-teaser__title-wrapper {
-    padding-top: var(--stzh-space-xlarge);
-  }
+  margin: 0 0 var(--stzh-space-small);
 }
 @media screen and (min-width: 900px) {
-  .stzh-pi-teaser__title-wrapper {
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-pi-teaser__title-wrapper {
-    padding-bottom: var(--stzh-space-small);
+  .stzh-pi-teaser__dateline {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
 .stzh-pi-teaser__title {
   font-family: var(--stzh-font-family-title);
   font-weight: var(--stzh-font-weight-title);
   font-style: var(--stzh-font-style-title);
+  font-size: var(--stzh-font-curve-teaser-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-teaser-default-text-line-height, var(--stzh-font-centi-text-line-height));
+  letter-spacing: var(--stzh-font-curve-teaser-default-text-letter-spacing);
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -436,17 +257,22 @@
   color: var(--stzh-color-black);
   margin: 0;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  /* Limit the text to 3 lines */
+  -webkit-line-clamp: 3; /* Limit the text to 3 lines */
   -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  /* Adds "..." at the end if truncated */
-  align-self: start;
+  text-overflow: ellipsis; /* Adds "..." at the end if truncated */
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser__title {
+    font-size: var(--stzh-font-curve-teaser-large-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-teaser-large-text-line-height, var(--stzh-font-deci-text-line-height));
+    letter-spacing: var(--stzh-font-curve-teaser-large-text-letter-spacing);
+  }
 }
 .stzh-pi-teaser__title-link {
   display: block;
   font-family: inherit;
+  padding: 0;
   appearance: none;
   background-color: transparent;
   border: none;
@@ -457,53 +283,93 @@
   border-radius: var(--stzh-button-border-radius);
   cursor: pointer;
 }
-.stzh-pi-teaser__lead-wrapper {
-  padding-bottom: var(--stzh-space-xsmall);
+.stzh-pi-teaser__title-link::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stzh-pi-teaser__title-link::after {
+  z-index: 1;
+}
+.stzh-pi-teaser__lead {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  margin-top: 0;
+  margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 600px) {
-  .stzh-pi-teaser__lead-wrapper {
-    padding-bottom: var(--stzh-space-small);
+  .stzh-pi-teaser__lead {
+    margin-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 900px) {
-  .stzh-pi-teaser__lead-wrapper {
-    padding-bottom: var(--stzh-space-medium);
+  .stzh-pi-teaser__lead {
+    margin-bottom: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-pi-teaser__lead-wrapper {
-    padding-bottom: var(--stzh-space-xlarge);
+  .stzh-pi-teaser__lead {
+    margin-bottom: var(--stzh-space-xlarge);
   }
 }
-.stzh-pi-teaser__lead {
-  margin-top: 0;
+.stzh-pi-teaser__date {
   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;
-  /* don’t use text-overflow with multi-line clamp */
-  align-self: start;
+  margin: 0;
+  text-align: right;
+  width: 100%;
 }
-@media screen and (max-width: 899px) {
-  .stzh-pi-teaser__lead {
-    font-size: var(--stzh-font-milli-font-size);
-    line-height: var(--stzh-font-milli-text-line-height);
-    letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+.stzh-pi-teaser--has-image .stzh-pi-teaser__image {
+  display: block;
+}
+.stzh-pi-teaser--has-image .stzh-pi-teaser__lead {
+  margin-top: var(--stzh-space-xxsmall);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser--has-image .stzh-pi-teaser__lead {
+    margin-top: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser--has-image .stzh-pi-teaser__lead {
+    margin-top: var(--stzh-space-small);
   }
 }
+.stzh-pi-teaser__title-ratio {
+  --background-color: var(--image-background-color);
+}
+.stzh-pi-teaser__title-ratio .stzh-pi-teaser__title-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-medium);
+}
 @media screen and (min-width: 900px) {
-  .stzh-pi-teaser__lead {
-    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__title-ratio .stzh-pi-teaser__title-wrapper {
+    padding-top: var(--stzh-space-large);
   }
 }
-.stzh-pi-teaser__date {
-  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;
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser__title-ratio .stzh-pi-teaser__title-wrapper {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser__title-ratio .stzh-pi-teaser__title-wrapper {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser__title-ratio .stzh-pi-teaser__title-wrapper {
+    padding-left: var(--stzh-space-large);
+  }
+}
+.stzh-pi-teaser__title-ratio .stzh-pi-teaser__dateline {
+  margin-bottom: var(--stzh-space-xxsmall);
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../../utils/utils";
 /**
  * @slot heading - Heading text (alternative for heading property)
  * @slot lead - Lead text (alternative for lead property)
@@ -18,26 +19,10 @@ export class StzhPiTeaser {
         this.analyticsId = undefined;
         this.dateline = "";
         this.heading = "";
-        this.imageSrc = undefined;
         this.headingLevel = "3";
         this.lead = "";
         this.date = "";
-        this.contentSize = "M";
-        this.imagePosition = undefined;
-        this.isHero = undefined;
     }
-    // private truncateLead(text: string, max: number): string {
-    //   console.log(max);
-    //   if (!text) return "";
-    //   if (text.length <= max) return text;
-    //   let cut = text.slice(0, max);
-    //   const backtracked = cut.replace(/\s+\S*$/, "");
-    //   if (backtracked.length >= Math.floor(max * 0.6)) {
-    //     cut = backtracked;
-    //   }
-    //   cut = cut.replace(/[\s.,;:!?\-–—]+$/, "");
-    //   return cut + "…";
-    // }
     componentDidRender() {
         requestAnimationFrame(() => {
             var _a, _b;
@@ -50,20 +35,18 @@ export class StzhPiTeaser {
     renderHeading() {
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? "a" : "button";
-        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
+        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, this.dateline && h("p", { class: "stzh-pi-teaser__dateline" }, this.dateline), h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))));
     }
     render() {
-        const hasLead = !!this.lead;
-        const hasImage = !!this.imageSrc && !!this.imagePosition;
-        const displayLead = this.lead;
-        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
-        // : "";
+        const hasLead = !!this.lead || hasSlot(this.element, "lead");
+        const hasImageSlot = hasSlot(this.element, "image");
+        const shouldRenderTitleRatio = !hasImageSlot;
         const classes = {
             "stzh-pi-teaser": true,
             "stzh-pi-teaser--has-lead": hasLead,
-            "stzh-pi-teaser--has-image": hasImage,
+            "stzh-pi-teaser--has-image": hasImageSlot,
         };
-        return (h(Host, { key: 'd9c3d58e879188890dd07823bb996f2de93651a2', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '47791c89f8cbe92744e387bf4cb8eba93c067ed4', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: 'aa88aa3f4552a95cac98acdc505faf510d4fdde6', class: "stzh-pi-teaser__image" }, h("img", { key: '786a92cef49dcb7a37f472be30ea4d55710f204e', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '0c49e95677fd68a72be31554fb4998a9b86ba08a', class: "stzh-pi-teaser__wrapper" }, h("div", { key: '324a03003b28d579fb46c7e047433b99e5ee453e', class: "stzh-pi-teaser__text" }, this.dateline && h("p", { key: 'e49a94c945e5d3e1e5a3d9efac84ef8550f8d310', class: "stzh-pi-teaser__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '0623aadddea2c2e163abeb7b4495f475cf12f331', class: "stzh-pi-teaser__lead-wrapper" }, h("div", { key: 'a7ab6f1d9a5a785f758815a7599ba7f1534dd2d3', class: "stzh-pi-teaser__lead" }, displayLead)), this.date && h("div", { key: '79f7849f4585f3f60c918e9379c28efbcc5d026a', class: "stzh-pi-teaser__date" }, this.date))))));
+        return (h(Host, { key: 'a70c8996daeb2c0083462ca59fe804c4e85b9b38', "has-lead": hasLead }, h("article", { key: '609aaef998f024efe25cb4a8a927edfdfd849903', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '561364097a5782bcfcb787879ad2e9f3f8008228', class: "stzh-pi-teaser__image" }, h("stzh-ratio", { key: '1a26623c55eac86f1614ecdd2d3fc9fb5251522c', ratio: "2:1" }, h("slot", { key: '41749baf95c3683971cf74d69f769136b222e3dd', name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { key: '6edba9e3e9a365f3b7ef439b6f38138321e167aa', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { key: '113133924dac251e51c3962fe35562cdb2303a6f', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { key: '7ea6d341b3c5f68f6c51e0d0d7f1c7a3831133aa', class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })), this.date && h("div", { key: 'e0508125c1ed1e8eb34494976e725645b5d1a269', class: "stzh-pi-teaser__date" }, this.date)))));
     }
     static get is() { return "stzh-pi-teaser"; }
     static get encapsulation() { return "scoped"; }
@@ -166,23 +149,6 @@ export class StzhPiTeaser {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "imageSrc": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Image source link"
-                },
-                "attribute": "image-src",
-                "reflect": false
-            },
             "headingLevel": {
                 "type": "string",
                 "mutable": false,
@@ -236,58 +202,6 @@ export class StzhPiTeaser {
                 "attribute": "date",
                 "reflect": false,
                 "defaultValue": "\"\""
-            },
-            "contentSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"",
-                    "resolved": "\"L\" | \"M\" | \"S\" | \"XL\" | \"XS\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Which size of teaser it is"
-                },
-                "attribute": "content-size",
-                "reflect": false,
-                "defaultValue": "\"M\""
-            },
-            "imagePosition": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"top\" | \"right\" | null",
-                    "resolved": "\"right\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether image is on top or on the right"
-                },
-                "attribute": "image-position",
-                "reflect": false
-            },
-            "isHero": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "is-hero",
-                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-pi-teaser.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIvF;;;;GAIG;AAMH,MAAM,OAAO,YAAY;;QAgDf,oBAAe,GAAG,CAAC,aAAyB,EAAE,EAAE;YACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,CAAC;;;;wBAvCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;;IAuBxD,4DAA4D;IAC5D,sBAAsB;IACtB,0BAA0B;IAC1B,yCAAyC;IAEzC,kCAAkC;IAClC,oDAAoD;IACpD,uDAAuD;IACvD,yBAAyB;IACzB,MAAM;IACN,+CAA+C;IAC/C,sBAAsB;IACtB,IAAI;IACJ,kBAAkB;QAChB,qBAAqB,CAAC,GAAG,EAAE;;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC7C,OAAO,CACL,WAAK,KAAK,EAAC,+BAA+B;YACxC,EAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB;gBACpC,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe;oBAE7B,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAAG,IAAI,CAAC,OAAO,CAAO,CAC5E,CACJ,CACN,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,kGAAkG;QAClG,QAAQ;QAER,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,OAAO;YACnC,2BAA2B,EAAE,QAAQ;SACtC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,iEAAW,OAAO,eAAa,QAAQ,oBAAkB,IAAI,CAAC,aAAa,kBAAgB,IAAI,CAAC,WAAW;YAC9G,gEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;gBAC/D,QAAQ,IAAI,CACX,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP;gBAED,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,4DAAK,KAAK,EAAE,sBAAsB;wBAC/B,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK;wBACxE,IAAI,CAAC,aAAa,EAAE;wBACrB,4DAAK,KAAK,EAAC,8BAA8B;4BACvC,4DAAK,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAO,CACjD;wBACL,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACF,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } 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\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** 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  @Prop() isHero: boolean;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  // private truncateLead(text: string, max: number): string {\n  //   console.log(max);\n  //   if (!text) return \"\";\n  //   if (text.length <= max) return text;\n\n  //   let cut = text.slice(0, max);\n  //   const backtracked = cut.replace(/\\s+\\S*$/, \"\");\n  //   if (backtracked.length >= Math.floor(max * 0.6)) {\n  //     cut = backtracked;\n  //   }\n  //   cut = cut.replace(/[\\s.,;:!?\\-–—]+$/, \"\");\n  //   return cut + \"…\";\n  // }\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\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\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--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__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser__wrapper\">\n            <div class={\"stzh-pi-teaser__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser__lead-wrapper\">\n                <div class=\"stzh-pi-teaser__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-pi-teaser.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\nimport { hasSlot } from \"../../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}