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

package/dist/components/p-DCVNNXGS.js

@@ -1,526 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.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-DCVNNXGS.js.map
-
-//# sourceMappingURL=p-DCVNNXGS.js.map

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

@@ -1 +0,0 @@
-{"file":"p-DCVNNXGS.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}