npm - @oiz/stzh-components - Versions diffs - 4.12.1 → 4.13.0-beta1 - Mend

@oiz/stzh-components 4.12.1 → 4.13.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1081) hide show

package/dist/esm/stzh-pagebottom.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 const stzhPagebottomCss = () => `.sc-stzh-pagebottom-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-pagebottom-h,[stzh-hidden].sc-stzh-pagebottom-h{display:none}.sc-stzh-pagebottom-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::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-pagebottom-h .has-focus.sc-stzh-pagebottom{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom{outline-style:none !important}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom::-moz-focus-inner{border:0 !important}@media print{.sc-stzh-pagebottom-h{display:none}}.stzh-pagebottom__wrapper.sc-stzh-pagebottom{display:grid}.stzh-pagebottom__left.sc-stzh-pagebottom{display:flex;flex-direction:column;flex-wrap:wrap;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagebottom__left.sc-stzh-pagebottom{flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{margin-bottom:var(--stzh-space-small)}.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-left:auto;margin-top:var(--stzh-space-medium);--stzh-button-white-space:nowrap}@media screen and (min-width: 600px){.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-top:0}}.stzh-pagebottom__print.sc-stzh-pagebottom,.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{flex-shrink:0}.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:-0.625rem}@media screen and (min-width: 900px){.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:0}}@media screen and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xbig)}}.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:auto}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:minmax(0, 1fr) calc(9.625rem + var(--stzh-space-small) + var(--stzh-space-medium))}}`;
@@ -22,7 +22,7 @@ const StzhPagebottom = class {
             "stzh-pagebottom": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: 'fb410b028d088e1c978f4dfa4baab3307db2a348' }, h("div", { key: '5e30158587388ec65991009e42ce89d3db88e497', class: classes }, h("div", { key: '77bb93f7f48ab842984c7b5cd5f3f571b1491f61', class: "stzh-pagebottom__wrapper" }, h("div", { key: 'e8d165ff441a7d7bdadea24fd80911451c3fdf28', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: 'b9e99241900d9e65c9aa32f7aaa4b6e4776f053e', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '033e9421bf139317acba6abb2f40a901bf8ca2d3' }, h("stzh-button", { key: 'b187f969c40f4c63484511911e4b9aee9a7621f9', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: 'a206c22ff38fabace4aca2bd8da138fe02f3db0d', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: '0d63e03c3491cc644d7c008749ed771de2d4e604', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: 'b7a0c81938c1fac1d68a3ac90dfeaf825959d3e0', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '2f243f8ca26f3de042345d95f3e8e3ae55777b21', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: 'a867836d0745607b6a0fc5d64e9cf3e246092725', name: "sticky-actions" }))))));
+        return (h(Host, { key: '3686e31e9e2db54e53ab55ad3d20197332731c90' }, h("div", { key: '3bc596bf0d7b4b258c7c4f71a1aaa53641e3a36d', class: classes }, h("div", { key: 'af6f34ffe582a590364059f6567c58f03348b4e6', class: "stzh-pagebottom__wrapper" }, h("div", { key: '32c06b21b773753feed8ca41981ee8d5d49214c5', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: 'f1e7b8cc1c799a3e914863fd5a2bff892b50aee7', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '896034193e4774907a4732cbd06773da472772af' }, h("stzh-button", { key: '194e6b813e6e36964c75ad77c7e3ee245af12047', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '260d3383c6e728059cd92d1abc0cffd93da89aa4', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: '1c23a46d3c0d05af5e594bbe5df3cbbe54bf5c43', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: '05d55f418c7d6fccfb80da67098f8f3ee3247889', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '3db15ef8e81932cfff067c001972ea5c2c2443ee', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: '7145c3291f9b2bbb9eb1811b7e2b63e207c5cdf1', name: "sticky-actions" }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagecontent.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhPagecontentCss = () => `.sc-stzh-pagecontent-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-pagecontent-h,[stzh-hidden].sc-stzh-pagecontent-h{display:none}.sc-stzh-pagecontent-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagecontent-h *.sc-stzh-pagecontent,.sc-stzh-pagecontent-h *.sc-stzh-pagecontent::before,.sc-stzh-pagecontent-h *.sc-stzh-pagecontent::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-pagecontent-h .has-focus.sc-stzh-pagecontent{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagecontent-h .stzh-fylingfocus-focused.sc-stzh-pagecontent{outline-style:none !important}.sc-stzh-pagecontent-h .stzh-fylingfocus-focused.sc-stzh-pagecontent::-moz-focus-inner{border:0 !important}.stzh-pagecontent.sc-stzh-pagecontent{column-gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-pagecontent.sc-stzh-pagecontent{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagecontent.sc-stzh-pagecontent{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagecontent.sc-stzh-pagecontent{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagecontent.sc-stzh-pagecontent{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-pagecontent.sc-stzh-pagecontent{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 900px){.stzh-pagecontent.sc-stzh-pagecontent{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagecontent.sc-stzh-pagecontent{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagecontent.sc-stzh-pagecontent{grid-template-areas:"aside-left aside-left aside-left aside-left" "content content content content"}@media screen and (min-width: 900px){.stzh-pagecontent.sc-stzh-pagecontent{grid-template-areas:"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left" "content content content content content content content content"}}@media screen and (min-width: 1260px){.stzh-pagecontent.sc-stzh-pagecontent{grid-template-areas:"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left" "content content content content content content content content content content content content"}}.stzh-pagecontent__aside-left.sc-stzh-pagecontent{grid-area:aside-left}.stzh-pagecontent__content.sc-stzh-pagecontent{grid-area:content}@media screen and (max-width: 1259px){.stzh-pagecontent__anchornav.sc-stzh-pagecontent{position:relative;top:0px;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}}@media screen and (min-width: 1260px){.stzh-pagecontent__anchornav.sc-stzh-pagecontent{position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-pagecontent__anchornav.sc-stzh-pagecontent{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1260px){.stzh-pagecontent--has-aside-left.sc-stzh-pagecontent{--stzh-content-grid-template-areas:"content content content content content content content content content content content content";grid-template-areas:"aside-left aside-left aside-left aside-left content content content content content content content content"}}.stzh-pagecontent--has-aside-left.sc-stzh-pagecontent .stzh-pagecontent__aside-left.sc-stzh-pagecontent{margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagecontent--has-aside-left.sc-stzh-pagecontent .stzh-pagecontent__aside-left.sc-stzh-pagecontent{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pagecontent--has-aside-left.sc-stzh-pagecontent .stzh-pagecontent__aside-left.sc-stzh-pagecontent{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagecontent--has-aside-left.sc-stzh-pagecontent .stzh-pagecontent__aside-left.sc-stzh-pagecontent{margin-bottom:var(--stzh-space-xxxlarge)}}`;
@@ -16,7 +16,7 @@ const StzhPagecontent = class {
             "stzh-pagecontent--has-aside-left": hasAsideLeft || hasAnchornav,
             "stzh-pagecontent--has-no-aside-left": !hasAsideLeft && !hasAnchornav,
         };
-        return (h(Host, { key: 'ef21a102b23b2806c429804c20fd8ee0c4a8ca32' }, h("div", { key: '4b2ecc617c4ca5812be4d8b147b86abbfde7e4c5', class: classes }, h("aside", { key: 'd6dbbbc4dcafc7d514eac248f24e0ebd25a96e45', class: "stzh-pagecontent__aside-left" }, h("div", { key: 'ddc3bdcc9ddda593755c8368b5eabba3962d3492', class: "stzh-pagecontent__anchornav" }, h("slot", { key: '8a5f65b0eeee2983a9708d0b0071e52a384250e6', name: "anchornav" })), h("slot", { key: '7fd8ca81b507aaef2348e29f5da4602e99d95b75', name: "aside-left" })), h("div", { key: '838d7e0acef4e4fe48a8a3d13885e30d684b3ae4', class: "stzh-pagecontent__content" }, h("slot", { key: 'a8b4157148712320c9548187ca87c98b6e6dc3dc' })))));
+        return (h(Host, { key: 'f1e932f5091fb04d5ad49b2be7b8b1c9cdf46333' }, h("div", { key: 'addfe2e3805e8a1530348d053947c8e03aa7bc1a', class: classes }, h("aside", { key: '42d52801fda3ddd06f1d7570e526610ba5857a05', class: "stzh-pagecontent__aside-left" }, h("div", { key: '05272f5690f6bf1a6564ef9d3c143f42697c1e2d', class: "stzh-pagecontent__anchornav" }, h("slot", { key: 'e8b79cf1cf7cc058e77f8776bb8c725d8d20b193', name: "anchornav" })), h("slot", { key: 'd46a54d6898f2259d8f17a769e616d2123855382', name: "aside-left" })), h("div", { key: '4bdb322ab1ac0707027a61148897f75a6c6ceee8', class: "stzh-pagecontent__content" }, h("slot", { key: 'fcaf75cf11bd56c91a096c9aadc1dbff39c533f6' })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-hero.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils-CUGRmgip.js';
 import './string-utils-BubviQku.js';
@@ -93,7 +93,7 @@ const StzhPagetitleHero = class {
             "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
             "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
         };
-        return (h(Host, { key: 'a6e59de03065ac0caded2b839d347410566c819d' }, h("div", { key: '37a42432e06c29bf610a86de0bd3160fb01db353', class: classes }, h("div", { key: '6cf8c7011d2ab2d0fedd68bb8905c61e65333035', class: "stzh-pagetitle-hero__header" }, h("div", { key: '6af890acbc034d7bbeb69b218c88c82eb0f44e35', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: '0b67ae8fb67294187e4f078a5916ed25289b6452', name: "back-link" })), h("div", { key: '3b1d96f08ff5f74b0479c1092e30340374e3eb3f', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: '3e744913ebc82a0525986f3eedd9a031cda7031b', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '307340d6d173c2ad66667b89c70e96debe34e5a9', name: "image" })), h("div", { key: 'f4337ce806bb0f862bca6d21ffced420bd92f611', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '9eb98633b1b15e3ffbec516631f067ab15420740', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '4f5982c2480f45f42e01ce3b359bc46526399959', name: "tag" })), h("div", { key: '89fb2ce4210687601231a687d85934dbf36d9e6d', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: '07993e408c13aef15188a7f3b0b7cf4148ce15fe', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: '6938db20dd18d7dc16135ce9217d29b0a19e1fe4', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: 'f59aabe5f4d5c81ab71851abdead479d943b3390', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '47f189acebd0ec3ae0a14d62af470611e44dbf97', name: "lead" }), h("div", { key: '7a7c397e8251ad91a4577318c62eaa259e06559e', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+        return (h(Host, { key: '08f30d59053c716eefad2b81cdf196b98900fc29' }, h("div", { key: '0ed82aacdfdc0514eb1bb5e85f6b5db99674e623', class: classes }, h("div", { key: '0369349af430205ee70ff554e3096dc06aca4414', class: "stzh-pagetitle-hero__header" }, h("div", { key: 'd66efddddf34b1143666452b1426d740156a0740', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: '2dae5ea1efadce20515625ad33895e64b5588e5c', name: "back-link" })), h("div", { key: 'f4d060574693a5a8d35d0f3799b0894fbe8809ee', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: 'e378fc1253b8b16701790aec7a923f89a23fa8a1', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '1725468fd5f484033978494b9f45c397a282fa3e', name: "image" })), h("div", { key: '17272d01d88603ea956cc37ecd31eab96f7b8d23', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: 'b53a4318be9454016eb264f48ebe5105f3643b24', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '43aa94f018df15978fd55abb80bd69f54db410f4', name: "tag" })), h("div", { key: '8a945236d237a7df1a6f21d2df1cca85c5597608', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: 'aff2b1a31f1748f77f010e208b1af5201f9dda04', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: 'bd05d266017e8a005e05e40dd69712f934bb4554', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '52213f8329afeb0e54d96b88bc6e1b5d0868a308', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '4762c61f5560a390d6392f2bc837f4b0ef20e092', name: "lead" }), h("div", { key: '08d534ab271d27f98e442f01199625b773bad07d', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-home.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { g as getTheme, s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { g as getTheme, s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-CUGRmgip.js';
 import './string-utils-BubviQku.js';
@@ -92,10 +92,10 @@ const StzhPagetitleHome = class {
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (h(Host, { key: 'faf2c10cdef0d4706c16aede1d3967ce0a2bffad', "has-image": imageSlotUsed }, h("div", { key: 'b64d06efd5cfa4fa72e7a52b3f0d73b841741208', class: classes }, h("div", { key: 'caedafc6fc12cc0d152d6579d6285a5d3bdf7e43', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '4d2310af65e887677a4bd14dc319d6d38b0afef5', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '6e55258ce4ef9bdb93a86afefc7a4e858b1cc68c', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'b48643edb74b2f4fa32c343c46ad5f24a3dfe0ea', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '2a3fa090dadfdfba007e2a0a2453df036eaf28ff', name: "image" }))), h("div", { key: '8e0d137679c29a6dc083aa82a9581bef616cab43', class: "stzh-pagetitle-home__container" }, h("div", { key: '497107f523d35b186186e7dd1f000e4544d0461c', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '3b729d550d0cd9919a26c06ba4ce791747ab56aa', class: "stzh-pagetitle-home__text" }, h("div", { key: '1ea39450590c629753bf5cd7cf65c3fff833af5c', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'cb9aa7f608fb4fe7a4156a8e3d537c6fb68f0c9e', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'adf7725e4083f514ebc09ae1ecb9917ea77b4ef5', name: "readspeaker" }))), h("div", { key: '87ba9eab48af52ef5bd7309c7fa3daa0af454bda', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '81dab6b26464fe1430894cf9033fffcd3a3793c5', name: "heading" })), h("div", { key: 'cf03e3aba1e666dec21a4bfc2b8a0172f5e589d6', class: {
+        return (h(Host, { key: '615db35b2dd582755517dbb5d3a142255cff49c1', "has-image": imageSlotUsed }, h("div", { key: '2cb35db472a7ecbf6351777ad6e549f712a051cf', class: classes }, h("div", { key: 'ed2419a60bbd3389c0a94a50fe1353ca841af4ee', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: 'f2c9dbfc22c731469827af30ff9b0771d078f5c1', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: 'd11779b1e262b98b9a6b5fb1f0165cd9ad4f42aa', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'da6d7bf142725d4030248c2a9a522cbb7780c0cd', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: 'acde0367c098de0829477f264f510309f41236aa', name: "image" }))), h("div", { key: 'ce9c314b3ef27e60a426bb080a95169729dbf520', class: "stzh-pagetitle-home__container" }, h("div", { key: '53e1543eb32c431786b86166ee6062a28125f4c9', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: 'ae4ab30d8249ec9e0cc96551710225756912ed6d', class: "stzh-pagetitle-home__text" }, h("div", { key: '909b0ad724c40bac2d963f6a8eb3e4da74ee8b9a', class: "stzh-pagetitle-home__meta" }, h("div", { key: '7e723a8ecfc8d49b9ec752ea47d8ae512cfb527c', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'e4f836543f4a31533b9fd41f9e58364943cd6240', name: "readspeaker" }))), h("div", { key: '1206bac13642b50cf7accc070a57475c00278eb8', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '02e05f9e49a16aa9a6a44ba322f4492b2ba62692', name: "heading" })), h("div", { key: 'df5c299a574102a9632d018c16b3cd117daa0107', class: {
                 "stzh-pagetitle-home__subheading": true,
                 "stzh-pagetitle-home__subheading--hidden": this.displaySubheading && imageSlotUsed,
-            } }, h("slot", { key: 'ec27213fb6bd067e0f2953422d3ffd419111a438', name: "subheading" }))))))));
+            } }, h("slot", { key: 'aa818fe5edf8bb72c5d57bc2dc6aea8c3d9f320d', name: "subheading" }))))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import { m as media } from './media-utils-CUGRmgip.js';
 import './string-utils-BubviQku.js';
@@ -138,7 +138,7 @@ const StzhPagetitle = class {
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (h(Host, { key: 'e2bdde916dbe418342a870e9aa98201f0a2feb52' }, h("div", { key: 'eae3efe2e64191d5a1760f3a4fee70f05ffb8388', class: classes }, h("div", { key: '7ebdc64f665e74d55034cc7654a6aa715a5df9da', class: "stzh-pagetitle__container" }, h("div", { key: 'abcefa1f095731dac7e4928809d4c8421d1198eb', class: "stzh-pagetitle__wrapper" }, h("div", { key: '2b7416b94624386e13909e92b6eb660981cb9a90', class: "stzh-pagetitle__text" }, h("div", { key: '7a9eaa3fc65de9271bc3d8e601e1e405117b60e9', class: "stzh-pagetitle__meta" }, h("div", { key: 'a734515d00b0901fe48a16b0598ab6891d4e165c', class: "stzh-pagetitle__tag" }, h("slot", { key: '1a6b3c85b8afe616a8ec7729b1572269c871589b', name: "tag" })), h("div", { key: 'bee6295d45d77b6a771726f5b1a1c027c3f01e1f', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: 'b1479fc116bebe1b6e30b0ec30b7b47ca2acf2b3', name: "readspeaker" }))), this.dateline && h("div", { key: '8813421a85d36c3bac8d0f2d6db4f75a0e92de06', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '79a34dac8f8f7eb8aa3ee5a3c4c3a8dff169510d', class: "stzh-pagetitle__heading" }, h("slot", { key: '030d91e53e1f740755a3fc0d9088058becead8d5', name: "heading" })), h("div", { key: 'ed55f77df59654bb35cedaf06251fb86dfd6a77d', class: "stzh-pagetitle__lead" }, h("slot", { key: '0f8fa0b8a1f50e2752eb12cfae2fdf2cbb505578', name: "lead" }))), h("div", { key: '96b405dd149682108248f2f0173c29389f24124d', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '27e32482c3c07f2f09f1528a0b63da509dbf4934', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: 'e2ac0825e684e3667305ce88aaeacb747fbdf6a4', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '14bc27bd443576f9d40f7b25c9ba86ba229baf28', name: "image" }))), h("div", { key: '7936922bda0fb96f0b4a6b21a715c26736084fbc', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: 'c84542c8cfdb07db8ab59e24786a2a7461e86232', name: "disturber" })))))));
+        return (h(Host, { key: '3454ae1f590963e62a7c6dc7eb799817536636af' }, h("div", { key: 'be7ef709f41f4661ad973a3b6dc97df2fea6b48e', class: classes }, h("div", { key: '4dc09e72307dcfc85219c81d9204e7605d86c76b', class: "stzh-pagetitle__container" }, h("div", { key: 'f4b2af20620f1b672604fe69f8bfdc2af390a1a7', class: "stzh-pagetitle__wrapper" }, h("div", { key: '609904049170e67c165f7f15c479c96328f5e741', class: "stzh-pagetitle__text" }, h("div", { key: '6c3071a488ac4a7b64fba9265bf162501af2949f', class: "stzh-pagetitle__meta" }, h("div", { key: 'd2e3c9d6d171bb22559f0a31c647eacf31f6ed3b', class: "stzh-pagetitle__tag" }, h("slot", { key: 'd8c11843761be62950405c18fc5b1f55e63ec3a1', name: "tag" })), h("div", { key: '87f452777d8436dd4a3d6b79e9572f4c3077aa46', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: 'bde7da4614e59138d2bba047e2d6bf931ec4c757', name: "readspeaker" }))), this.dateline && h("div", { key: '2c0c7981eae2a73155d8fdb78c0f1c6bf78e260c', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '7042c83804be94804a6e6a48a03446a60022fb53', class: "stzh-pagetitle__heading" }, h("slot", { key: 'bc864c63e2641ac96425c84f3172564f25b9c11e', name: "heading" })), h("div", { key: 'd3b7343952b85604b9554e30c31eaba16a97a7d0', class: "stzh-pagetitle__lead" }, h("slot", { key: 'fff14f063ee9fed40cb10ee54140f69b908c64e3', name: "lead" }))), h("div", { key: '712a883a138f6ac17685d590850ca20fda5e1ff5', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '126ea8707ce30ce341d0242eb65933026fd704d6', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '361f1a144036b8a88747ad7ff1f3bb7a4de36187', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '425cd21b5c381f4133c0ae34351029bdd0edc6cc', name: "image" }))), h("div", { key: '45b03ba7543e0b82f07eafa5bbb167ac92dd4f2d', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: 'bdc31554690bdbe27036cc59464adc462071d9c6', name: "disturber" })))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-panorama.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 // Pannellum 2.5.7, https://github.com/mpetroff/pannellum
 window.libpannellum=function(E,g,p){function Ba(K){function ja(a,d){return 1==a.level&&1!=d.level?-1:1==d.level&&1!=a.level?1:d.timestamp-a.timestamp}function Q(a,d){return a.level!=d.level?a.level-d.level:a.diff-d.diff}function ka(a,d,c,g,k,h){this.vertices=a;this.side=d;this.level=c;this.x=g;this.y=k;this.path=h.replace("%s",d).replace("%l",c).replace("%x",g).replace("%y",k);}function Ja(a,d,g,p,k){var h;var e=d.vertices;h=la(a,e.slice(0,3));var u=la(a,e.slice(3,6)),x=la(a,e.slice(6,9)),e=la(a,e.slice(9,
@@ -444,9 +444,9 @@ const StzhPanorama = class {
             text: imageTitle,
         }));
         const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-        return (h(Host, { key: 'e2e17f1a5e0314174c820d8551edf1fbb452bbb0' }, h("div", { key: '816f51b66f11337a27ac7881100e451f21d927d1', class: classes }, h("stzh-figure", { key: '6b390f5f9092d7a7726e41cf4e0a7e6852fa5658', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '9c888f468827cf86b7d8fdbdccc978982c191b64' }, h("div", { key: '3f1b367eab34307a515793bb04c21a4f428b2df6', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'e86b824b7fbded76e8a3c1040f5215c871323dc9', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '64188c4f27d7b5645001293e15a127ce2b302ac6', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: '5dd8c6aa6265c51662fa5f41a162c3f7701aa933', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: 'a8d65e0c01b01466025a2190dbd948b6b89ff715', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: 'd983af0ef37487e6ba1776a5a3a8bde7cadde0bc' }, h("stzh-button", { key: '63a496c7595618ba5563697a95d919bec1f17a77', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: 'f4d2124fbb7dcabcf3629aaf0a2073594e30edba', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '28c5fb49bf771dd41ae826a2107a6295d4b76b0b', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: '2e452d171515cbdee667a8edf250f2e6ecd54c04', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '7ce2e270dd5039f860fce36aead3cc38feae01cb', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: 'd9a2465fc035fb19b2bc49006125733861ac298b', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: 'bbc3001ba0d7db4c8a96a0872717b53f1ee9fb2e', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        return (h(Host, { key: 'b655766a1672228c550870ac9c31d3a1e8e41e22' }, h("div", { key: 'af1ea689328cf6086abd4d77d47181d242698217', class: classes }, h("stzh-figure", { key: 'fa43dc03602d65d2aca0bbdb13bed50e208abf7e', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '392f882d38d78e70f9ef0de965789e1dfd5c8a70' }, h("div", { key: '115d0c41fa86c8747aca52e240ca970f05635a48', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'e67d548071fb82b0f53d8260a1e9329ec6fc08b5', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '7957bd4d735c866387da3995cb4ba93d7183001e', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: 'b8fd89547c99c42d83f331da9abadfb317430c15', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: '4091737aeefd0b98b73025de8eb5f49c9307bcb4', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: '9a9dc27f4c8f32416bf7f0742980afe21241e780' }, h("stzh-button", { key: 'fe2aeddfaa86920668ae99b8980cc15468655ff0', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: '538ee2ac1943e2f0baac9ebf71aa049839e6a2e2', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '38a04ab80ca4362a726562165d6a6aa6b7444341', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: 'b8b492dd85322df74c345c4aafc9eb74c9f505b7', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '0a42a7bc499234b46603eab850d46899c0f6656c', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: 'ea58a4a8f7909ead4a98a493e21aa851a628c706', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: '56aa87820ea94a34055c017cc4b1ec3b05aaa9b2', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
                 ? this.localization.stopOrientation
-                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '228c83e4c03c14f197b87d2eb068d6a98d8ed862', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '558609476a69539b4ec3733de501d5d0c1400bcd', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
                 ? this.localization.disableFullscreenLabel
                 : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
     }

package/dist/esm/stzh-pi-content-navigation.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhPiContentNavigationCss = () => `.sc-stzh-pi-content-navigation-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-content-navigation-h,[stzh-hidden].sc-stzh-pi-content-navigation-h{display:none}.sc-stzh-pi-content-navigation-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation,.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation::before,.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation::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-content-navigation-h .has-focus.sc-stzh-pi-content-navigation{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-content-navigation-h .stzh-fylingfocus-focused.sc-stzh-pi-content-navigation{outline-style:none !important}.sc-stzh-pi-content-navigation-h .stzh-fylingfocus-focused.sc-stzh-pi-content-navigation::-moz-focus-inner{border:0 !important}.sc-stzh-pi-content-navigation-h{--arrow-background-color:var(
@@ -53,7 +53,7 @@ const StzhPiContentNavigation = class {
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (h(Host, { key: '399314241e8e2f08f57ebcd9442c5353f1d818f1', "has-lead": hasLead }, h("article", { key: 'da0fd8bf88501d00b507b98f2ba9f1ce143baf49', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: '2bdfe7c9f9eccc2c9f9998427458cca4df3a83f9', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: '710112ac3ed0d7ee51423d7af37140dafe7816fc', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: '9b8b005db9ad12f0dd76e021fa3d3fc6beb7f200', ratio: "2:1" }, h("slot", { key: '42eaf7af99f21ccb88a1e8cf11dad5b3429e308c', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '87bf2afb7914ee21a8993aa3c3bdbf6ffdc52c82', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: '24cd8522948426a092f1126e851b8174cb54baf6', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '0f8c0ad83fe65a0f4fa3d2b13e1496a8372b26d0', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: '1c8db1e5078892575c7676694095c0f70f6f4da5', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '1e2676d7ce5bc54d545c65047d5ea2592be97e4c', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (h(Host, { key: '1fcdf6772f6dfc253e6df83effcb61223238e712', "has-lead": hasLead }, h("article", { key: 'b0bfb722b0f3d0bee9522769fa1edd6a56109ef4', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: 'ce1405ed4f7a74eb373cc2069fde662af7e5cfda', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: 'c99e39a32446e6b150b6a9b4f3089acbaa24ed5a', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: 'd6a037b474b29d15dfe54f0357616a31fbdfe2b4', ratio: "2:1" }, h("slot", { key: '14127d387d0fd8635bdc8fb2f867af3bd53b53c6', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '1654ab8463e716c491e669d0a7ccde56197dfe54', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: '3d4afac6fb942549e64efaa3017b3df955dc5d6f', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '3f7e0862b1e1fc59c8a9532b7aa6d8ad9c2d3cc5', class: "stzh-pi-content-navigation__lead" }, this.lead ? h("p", null, this.lead) : h("slot", { name: "lead" })))), h("div", { key: 'a9b420773192d691851b9709b26a5c493a79c26a', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: 'd4e57b3f7366425ee5a242d9f5db209a5b0a046d', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-content-navigation.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-pi-content-navigation.entry.js","sources":["src/components/CMS/stzh-pi-content-navigation/stzh-pi-content-navigation.scss?tag=stzh-pi-content-navigation&encapsulation=scoped","src/components/CMS/stzh-pi-content-navigation/stzh-pi-content-navigation.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-content-navigation-arrow-background-color: Background color of the arrow\n /\n\n:host {\n --arrow-background-color: var(\n --stzh-pi-content-navigation-arrow-background-color,\n #{$colorSecondary30}\n );\n\n display: flex;\n flex-direction: column;\n}\n\n.stzh-pi-content-navigation {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: space(\"small\");\n background-color: var(--stzh-color-coolgrey20);\n\n @media (forced-colors: active) {\n border: 2px solid;\n }\n\n &:hover &__arrow-icon {\n transform: translateX(4px);\n }\n\n &__wrapper {\n // @include spaceCurve('padding-left', 'intermediary');\n display: flex;\n // align-items: center;\n flex-grow: 1;\n @include spaceCurve(\"padding-right\", \"intermediary\");\n @include spaceCurve(\"padding-left\", \"intermediary\");\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__image {\n width: 100%;\n display: none;\n }\n\n &__title {\n @include font(\"heavy\");\n @include fontSize(\"deci\", \"heading\");\n @include wordWrap;\n color: var(--stzh-color-black);\n margin: 0;\n\n @include mq($from: medium) {\n @include fontSize(\"deca\", \"heading\");\n }\n\n &:has(+ .stzh-pi-content-navigation__lead) {\n @include spaceCurve(\"padding-bottom\", \"small\");\n }\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n color: var(--stzh-color-black);\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n flex-grow: 1;\n padding-bottom: 40px; // safe space for arrow minus a optical correction\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__lead {\n @include fontCurve(\"p2\");\n }\n\n &__arrow {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 44px;\n height: 44px;\n position: absolute;\n right: 0;\n bottom: 0;\n color: var(--stzh-color-black);\n background-color: var(--arrow-background-color);\n }\n\n &__arrow-icon {\n transition: transform 150ms ease;\n --size: #{iconSize(\"large\")};\n }\n\n / Level 3 and 4 /\n\n &:not(&--is-navigation-level-1-or-2) &__wrapper {\n @include spaceCurve(\"padding-right\", \"small\");\n @include spaceCurve(\"padding-left\", \"small\");\n }\n\n &:not(&--is-navigation-level-1-or-2) &__title-ratio &__title {\n @include spaceCurve(\"padding-right\", \"small\");\n @include spaceCurve(\"padding-left\", \"small\");\n }\n\n / Has image /\n &--has-image &__image {\n display: block;\n }\n\n / Title ratio styling (when navigation level 1 and 2 and no image) /\n &__title-ratio {\n background-color: var(--stzh-color-coolgrey30);\n aspect-ratio: 2/1;\n display: flex;\n align-items: center;\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-right\", \"intermediary\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n @include spaceCurve(\"padding-left\", \"intermediary\");\n }\n\n &__title-ratio &__title {\n // display: flex;\n // align-items: center;\n height: fit-content;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiCardNavigationClickEvent } 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-content-navigation\",\n styleUrl: \"stzh-pi-content-navigation.scss\",\n scoped: true,\n})\nexport class StzhPiContentNavigation {\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 /* Content navigation level /\n @Prop({ reflect: true }) navigationLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"1\";\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 @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhPiCardNavigationClickEvent>;\n\n private cardLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-pi-content-navigation\",\n originalEvent,\n href: this.href,\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.heading \|\| this.headingTextElement?.innerText;\n if (objectId) {\n this.cardLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n renderHeading(): DocumentFragment {\n const Heading = `h${this.headingLevel}`;\n return (\n <Heading class=\"stzh-pi-content-navigation__title\" ref={el => (this.headingTextElement = el)}>\n {this.heading \|\| <slot name=\"heading\"></slot>}\n </Heading>\n );\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, \"lead\");\n const hasImageSlot = hasSlot(this.element, \"image\");\n const isNavigationLevel1or2 = this.navigationLevel === \"1\" \|\| this.navigationLevel === \"2\";\n const hasImage = hasImageSlot && isNavigationLevel1or2;\n const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;\n\n const classes = {\n \"stzh-pi-content-navigation\": true,\n \"stzh-pi-content-navigation--has-lead\": hasLead,\n \"stzh-pi-content-navigation--has-image\": hasImage,\n \"stzh-pi-content-navigation--is-navigation-level-1-or-2\": isNavigationLevel1or2,\n };\n\n const CardLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <CardLink\n ref={el => (this.cardLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-pi-content-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div class=\"stzh-pi-content-navigation__image\">\n <stzh-ratio ratio=\"2:1\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n {shouldRenderTitleRatio && (\n <div class=\"stzh-pi-content-navigation__title-ratio\">{this.renderHeading()}</div>\n )}\n <div class=\"stzh-pi-content-navigation__wrapper\">\n {!shouldRenderTitleRatio && this.renderHeading()}\n {hasLead && (\n <div class=\"stzh-pi-content-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n )}\n </div>\n\n <div class=\"stzh-pi-content-navigation__arrow\">\n <stzh-icon class=\"stzh-pi-content-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </CardLink>\n </article>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"stzh-pi-content-navigation.entry.js","sources":["src/components/CMS/stzh-pi-content-navigation/stzh-pi-content-navigation.scss?tag=stzh-pi-content-navigation&encapsulation=scoped","src/components/CMS/stzh-pi-content-navigation/stzh-pi-content-navigation.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-content-navigation-arrow-background-color: Background color of the arrow\n /\n\n:host {\n --arrow-background-color: var(\n --stzh-pi-content-navigation-arrow-background-color,\n #{$colorSecondary30}\n );\n\n display: flex;\n flex-direction: column;\n}\n\n.stzh-pi-content-navigation {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: space(\"small\");\n background-color: var(--stzh-color-coolgrey20);\n\n @media (forced-colors: active) {\n border: 2px solid;\n }\n\n &:hover &__arrow-icon {\n transform: translateX(4px);\n }\n\n &__wrapper {\n // @include spaceCurve('padding-left', 'intermediary');\n display: flex;\n // align-items: center;\n flex-grow: 1;\n @include spaceCurve(\"padding-right\", \"intermediary\");\n @include spaceCurve(\"padding-left\", \"intermediary\");\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__image {\n width: 100%;\n display: none;\n }\n\n &__title {\n @include font(\"heavy\");\n @include fontSize(\"deci\", \"heading\");\n @include wordWrap;\n color: var(--stzh-color-black);\n margin: 0;\n\n @include mq($from: medium) {\n @include fontSize(\"deca\", \"heading\");\n }\n\n &:has(+ .stzh-pi-content-navigation__lead) {\n @include spaceCurve(\"padding-bottom\", \"small\");\n }\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n color: var(--stzh-color-black);\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n flex-grow: 1;\n padding-bottom: 40px; // safe space for arrow minus a optical correction\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__lead {\n @include fontCurve(\"p2\");\n }\n\n &__arrow {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 44px;\n height: 44px;\n position: absolute;\n right: 0;\n bottom: 0;\n color: var(--stzh-color-black);\n background-color: var(--arrow-background-color);\n }\n\n &__arrow-icon {\n transition: transform 150ms ease;\n --size: #{iconSize(\"large\")};\n }\n\n / Level 3 and 4 /\n\n &:not(&--is-navigation-level-1-or-2) &__wrapper {\n @include spaceCurve(\"padding-right\", \"small\");\n @include spaceCurve(\"padding-left\", \"small\");\n }\n\n &:not(&--is-navigation-level-1-or-2) &__title-ratio &__title {\n @include spaceCurve(\"padding-right\", \"small\");\n @include spaceCurve(\"padding-left\", \"small\");\n }\n\n / Has image /\n &--has-image &__image {\n display: block;\n }\n\n / Title ratio styling (when navigation level 1 and 2 and no image) /\n &__title-ratio {\n background-color: var(--stzh-color-coolgrey30);\n aspect-ratio: 2/1;\n display: flex;\n align-items: center;\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-right\", \"intermediary\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n @include spaceCurve(\"padding-left\", \"intermediary\");\n }\n\n &__title-ratio &__title {\n // display: flex;\n // align-items: center;\n height: fit-content;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiCardNavigationClickEvent } 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-content-navigation\",\n styleUrl: \"stzh-pi-content-navigation.scss\",\n scoped: true,\n})\nexport class StzhPiContentNavigation {\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 /* Content navigation level /\n @Prop({ reflect: true }) navigationLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"1\";\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 @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhPiCardNavigationClickEvent>;\n\n private cardLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-pi-content-navigation\",\n originalEvent,\n href: this.href,\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.heading \|\| this.headingTextElement?.innerText;\n if (objectId) {\n this.cardLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n renderHeading(): DocumentFragment {\n const Heading = `h${this.headingLevel}`;\n return (\n <Heading class=\"stzh-pi-content-navigation__title\" ref={el => (this.headingTextElement = el)}>\n {this.heading \|\| <slot name=\"heading\"></slot>}\n </Heading>\n );\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, \"lead\");\n const hasImageSlot = hasSlot(this.element, \"image\");\n const isNavigationLevel1or2 = this.navigationLevel === \"1\" \|\| this.navigationLevel === \"2\";\n const hasImage = hasImageSlot && isNavigationLevel1or2;\n const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;\n\n const classes = {\n \"stzh-pi-content-navigation\": true,\n \"stzh-pi-content-navigation--has-lead\": hasLead,\n \"stzh-pi-content-navigation--has-image\": hasImage,\n \"stzh-pi-content-navigation--is-navigation-level-1-or-2\": isNavigationLevel1or2,\n };\n\n const CardLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <CardLink\n ref={el => (this.cardLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-pi-content-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div class=\"stzh-pi-content-navigation__image\">\n <stzh-ratio ratio=\"2:1\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n {shouldRenderTitleRatio && (\n <div class=\"stzh-pi-content-navigation__title-ratio\">{this.renderHeading()}</div>\n )}\n <div class=\"stzh-pi-content-navigation__wrapper\">\n {!shouldRenderTitleRatio && this.renderHeading()}\n {hasLead && (\n <div class=\"stzh-pi-content-navigation__lead\">\n {this.lead ? <p>{this.lead}</p> : <slot name=\"lead\"></slot>}\n </div>\n )}\n </div>\n\n <div class=\"stzh-pi-content-navigation__arrow\">\n <stzh-icon class=\"stzh-pi-content-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </CardLink>\n </article>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/stzh-pi-menu.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-BOO84wnP.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-CUGRmgip.js';
@@ -258,7 +258,7 @@ const StzhPiMenu = class {
         // Screens medium, large and ultra
         const wideScreens = `${this.entangledMenuSize}px`;
         const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;
-        return (h(Host, { key: '36015ffafb4adfba9ab41d9b081be708f3f071e8', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '08a861ee169b9081052d26b9754d1c9d338d1832', class: "stzh-pi-menu-positioner" }, h("div", { key: 'a5ba39c2581d951d9737a96dd8a2838bdff0d17c', class: classes, style: { width: menuWidth } }, h("div", { key: 'a3b18bc27e04d54c7d84677d217de0f57ef0acc9', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: 'c0debf902c417ed701766dce5a8aa178acb426d7', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: '7e9f51c1ffe00b9e33ed0aa512fb08d030877428', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: 'ad5b9db7571f1de1733ade202b58f59e1db3dabf', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: '8eb0e48a97056f1378d38a916cc44666e3471832', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: '928d39fc8e68fa0cb3d1915f4bcfba0a8ececa45', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'b98f8c01f61c73498e73f3ac1be25e6dad53a60c', class: "stzh-pi-menu__content-inner" }, h("nav", { key: 'fa52a4d2e49c8ef0c42582550e2a099a1062b17d', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: 'd900480dc83c64f5608e753680e1a4e86680db75', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: 'cbcf40c5f8adb102ce64917464402fb1a440b0cb', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: 'ed0a0f4aa3c54ae85d947c6498c8a3ef8f919c66', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: '949b0d4c2ef0e3f00eb6ec3018d1b5eff4093c43', class: "stzh-pi-menu__button-text" }, h("span", { key: '0a9695584bc2088bc22a004616ef7716549300e6', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: '07761cd5b334ac2621f38342c69e450bbbef35b2', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (h(Host, { key: 'f59980c8aa292bf78da6bf77085799a509de100f', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'f2000909d1cf15db086db5c830ff1b4a6561731d', class: "stzh-pi-menu-positioner" }, h("div", { key: '7ebd56f4f27c8e639b790e963b2a6da512d2a5cd', class: classes, style: { width: menuWidth } }, h("div", { key: 'f708129df2dce5d1eeff48457a7ba68cb0b5b467', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '4d14eccd1eacd6b2c45f98f4393d0ea073ec5d82', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: '6695c0b957b84b8f3aceeb2c2d723be9b17f688d', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '09969a05944aeb17ad6121aad2fc0c4b64eefb85', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: '750f36b3ff5126b80cf81bd945e24e0e5db5023d', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: '871d2ac9b1a26ac539c9b13d00d6896d77b313fd', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'e85f0ed1d76615ab3b3d3f69dd075aa1f301948a', class: "stzh-pi-menu__content-inner" }, h("nav", { key: 'c258cb4102b4dcd60328b6002ba78380cd514226', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: '6f50b9a55b3274d3348f3e5ae6c5d3bbcb622f80', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '46b2241d14386be10b289561ceb49ab86b054cd0', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: '080220e14ea2ce396ba89388f724424b755d8cb5', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: 'de6a5934addbf0f7d1b0a41c5c17c32636863ffa', class: "stzh-pi-menu__button-text" }, h("span", { key: '6ac6bf59013993a226825d6a0fdf3f1cdd5568ec', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: 'bcf4b44e733f44b458b0b3264401e5348a228803', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-pi-pagetitle.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhPiPagetitleCss = () => `.sc-stzh-pi-pagetitle-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-pagetitle-h,[stzh-hidden].sc-stzh-pi-pagetitle-h{display:none}.sc-stzh-pi-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::before,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::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-pagetitle-h .has-focus.sc-stzh-pi-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle{outline-style:none !important}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pi-pagetitle-h{--hero-background-color:var(
@@ -85,7 +85,7 @@ const StzhPiPagetitle = class {
             "stzh-pi-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
         };
-        return (h(Host, { key: 'be801802140467c0c1fde3ae8380852f4c45e6dc', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: '42cb3a210fd0b3884d5169ab701e954dabc5e6f2', class: classes }, h("div", { key: '194cbd31797b027038a067470e1d5b0a70712246', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: '916aa381caa9451b6a176f2cbcba3da5d441412b', class: "stzh-pi-pagetitle__hero" }, h("div", { key: '0542cfcaa836152c9a29e459eae6dbf3b2095e38', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: '2f861dd126aa8ae736ff5cbe7171acccbd4c4e66', name: "breadcrumb" })), h("div", { key: 'f83ee185ce58a32d055dee70f1ecf07c808ad8f6', class: "stzh-pi-pagetitle__meta" }, h("div", { key: 'ac00669bebba7e6fa6e0da5c98705116426f8f37', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: '08784f7aea95a2b916dab2420ba4a4b722c82df2', name: "readspeaker" }))), h("div", { key: '09d98ba4b13bcaae28807cda91aba56e2a46f362', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: 'b791558a9cdb9bccc642c36d7da7dc4c0f6373db', name: "dateline" })), h("div", { key: '8b840870ed81b6d37c13b52e46987cb668678f6b', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: 'c78614e3ea59598728f5e2b2ac617c17ca7ec233', name: "heading" })))), h("div", { key: '71592494b79a2da0bab6650f4411fc5fdcd1717b', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: 'fd7f085ae465e70b3df95876d805a44a78700ba3', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: '75c454873d81bc373c017eb63d5e50aa3057ebb0', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: '96432fc2cbeeab0a44fe148c7802a04a02129c7c', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: 'c2a0660b417bfe0404f58aae94181b4354e71080', name: "menu" })))), hasImageSlot && (h("div", { key: '4629ab0d0bc952066b505126cfe0cf9d162bdf64', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: '78be746459f675752b071dc22b10e09965ab489d', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '875a2a4c1b982ca0b57bd609b2966d1947b72c23', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: 'ee0a242fd2d380fc257cb01b0bd0e82cfb78c319', name: "image" })))))), menuSlotUsed && (h("div", { key: 'e5db467395276bb81658f04794ccd7a0324ca797', class: "stzh-pi-pagetitle__lead" }, h("div", { key: '90812fe611657dce381669cb5f6174c3090fa11f', class: "stzh-pi-pagetitle__lead-inner" }, h("slot", { key: '11bd0877dd89366df102deead732a07be6206238', name: "lead" })))))), !menuSlotUsed && (h("div", { key: '0bd135dcc2e2fa917201e4f3160456086bc09b08', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: '535b69e09f973f8a76543e1bdf905e61b59656e8', class: "stzh-pi-pagetitle__lead" }, h("div", { key: '5c73c2b92c14f18765f5b6cb31d13e509f59472c', class: "stzh-pi-pagetitle__lead-inner" }, h("slot", { key: '50c21a029ee6fff9029f705dc1b47b242f67bd24', name: "lead" }))))), h("div", { key: 'ca769ba00a8b44ff1a6594c8c986151c6d9c72e5', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: 'e576515aca31ccc7a1c28ca4059d39cf7c1a1adb', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: '8c01435da933f655acdfcbfee254ca5bd3d893c6', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (h("div", { key: 'c8b4f6779cd3ba0f74e09d92b102528ed36afb55' }, this.author && h("p", { key: '5d5745969539f33e6749d06e4bc3512556b11a25', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: '33c258edfce42764605d9e427449b9a7cd7752b4', class: "stzh-pi-pagetitle__date" }, this.date))), h("slot", { key: '3614f399ff0df547065988a234132e9d294833a2', name: "content" })))))));
+        return (h(Host, { key: 'f46da62bbf355635434b3cf9191cd1a5de10239c', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: '9a12a7a73f6d3cd06476ade7af053e65de0181a0', class: classes }, h("div", { key: 'dec9aa35b40efb51bb1bfaf679018d0cd806a9bd', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: '2a154984dfbdd94b8e3f6bbb2ee35e8b4ad269c6', class: "stzh-pi-pagetitle__hero" }, h("div", { key: 'f088bc2ca767e5acd26f41cdcefa3f6fe24e3291', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: 'b8bfe971cf94130e6385cf5da0afb3ae7ab05a09', name: "breadcrumb" })), h("div", { key: '9fec1691cf0ff47251954809b4542226189192bd', class: "stzh-pi-pagetitle__meta" }, h("div", { key: '90298dfd3905660ba94b5ccca9a5c16b1a8c0bda', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: 'e899f724cce4bbaf576c63a4aa4681cab8b55aa1', name: "readspeaker" }))), h("div", { key: 'ff21745b7d0eb66b36c2e90771ba4b31de899e88', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: 'fde950feb62c82fdb4e101a1138694f2dc552135', name: "dateline" })), h("div", { key: 'efb929aa4345528514b0af23ca2c721119df02a7', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: 'a3c65bad70588e5f1f28429d254b81ee46bfccac', name: "heading" })))), h("div", { key: '7e3e970bed8e21a212aae2e494f7b6d2f3fd3ca6', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: '4e49b257a9f953f87a7c3d178728be39c6e55861', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: 'e6133250389c46429dc02ef92bf052ba7b44b454', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: '6865d2ffd51517ed00e5c27adba5cbe0befd4003', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: '17d0a81dfa2271e1ffb6a9e7c645df4e5464ec28', name: "menu" })))), hasImageSlot && (h("div", { key: 'aafd30ce117fef08d95f193d6371de01d2288f05', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: '6fca999c7eb15f93c8a1029b2ee91462ac186614', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '5994121f6b339ce2790b2c4e4ca576e3dd8cef8b', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: 'b22410646fb82698c97a1ac1b82fbd8d34406a89', name: "image" })))))), menuSlotUsed && (h("div", { key: '884f86d24b9c25f39a26c314315d3648edf671f6', class: "stzh-pi-pagetitle__lead" }, h("div", { key: '46080750113f5416011ba54c4415bdf2c3167186', class: "stzh-pi-pagetitle__lead-inner" }, h("slot", { key: 'a32bf1b11bd78326c78fb85687314310db1857c8', name: "lead" })))))), !menuSlotUsed && (h("div", { key: '508adbcd96b3e9d0a7ef26d97635eb783005aed8', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: 'b13ed47959a7c48d81ca2b8b9bd7bcca9bec74ba', class: "stzh-pi-pagetitle__lead" }, h("div", { key: 'ac362d43d6632f1739d0d1cc413ce20f8d20f4e3', class: "stzh-pi-pagetitle__lead-inner" }, h("slot", { key: '1e805dbef0b024460585156d30fafd8ae2f7990a', name: "lead" }))))), h("div", { key: '947f22c8b39402fcf1d84eb6cf1fd0126e384bcf', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: '2ab74087cc49f188e159a5a131193cd883554a5d', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: 'c0cc042eea5762f81db3f2e23cebfa989439e053', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (h("div", { key: '2219e88bfc37e3e606f3ecbba827401f64a1218e' }, this.author && h("p", { key: '477c954c7d50b158c4be4dd6fd16dd1ecd01756d', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: 'c07e85cc0a3cb45f61a216ec6ce676f8a268d5a2', class: "stzh-pi-pagetitle__date" }, this.date))), h("slot", { key: '0d41216d0a35394f604696ba32e7daf568ef2d7a', name: "content" })))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-quote.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 const stzhPiQuoteCss = () => `@charset "UTF-8";.sc-stzh-pi-quote-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-quote-h,[stzh-hidden].sc-stzh-pi-quote-h{display:none}.sc-stzh-pi-quote-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-quote-h *.sc-stzh-pi-quote,.sc-stzh-pi-quote-h *.sc-stzh-pi-quote::before,.sc-stzh-pi-quote-h *.sc-stzh-pi-quote::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-quote-h .has-focus.sc-stzh-pi-quote{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-quote-h .stzh-fylingfocus-focused.sc-stzh-pi-quote{outline-style:none !important}.sc-stzh-pi-quote-h .stzh-fylingfocus-focused.sc-stzh-pi-quote::-moz-focus-inner{border:0 !important}.sc-stzh-pi-quote-h{--background-color:var(--stzh-pi-quote-background-color, var(--stzh-color-primary30));--color:var(--stzh-pi-quote-color, var(--stzh-color-primary50))}.stzh-pi-quote.sc-stzh-pi-quote{position:relative;background-color:var(--background-color);padding-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-top:var(--stzh-space-xxxlarge)}}.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-xxxlarge)}}.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:5.4375rem}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:9.875rem}}@media print{.stzh-pi-quote.sc-stzh-pi-quote{page-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-pi-quote__content.sc-stzh-pi-quote{margin:0}.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-pi-quote__text.sc-stzh-pi-quote{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:0;display:flex}.stzh-pi-quote__text.sc-stzh-pi-quote::before,.stzh-pi-quote__text.sc-stzh-pi-quote::after{display:block;font-size:var(--stzh-font-mega-font-size)}@media screen and (min-width: 1260px){.stzh-pi-quote__text.sc-stzh-pi-quote::before,.stzh-pi-quote__text.sc-stzh-pi-quote::after{font-size:var(--stzh-font-hero-font-size)}}.stzh-pi-quote__text.sc-stzh-pi-quote::before{content:"«";color:var(--color);display:flex;align-items:flex-start;padding-right:var(--stzh-space-xsmall);line-height:0;padding-top:var(--stzh-space-small)}.stzh-pi-quote__text.sc-stzh-pi-quote::after{content:"»";color:var(--color);display:flex;align-items:flex-end;padding-left:var(--stzh-space-xsmall);line-height:0;padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1260px){.stzh-pi-quote__text.sc-stzh-pi-quote::after{padding-bottom:var(--stzh-space-large)}}.stzh-pi-quote__author.sc-stzh-pi-quote{display:block;margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-quote__author.sc-stzh-pi-quote{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-quote__author.sc-stzh-pi-quote{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote__author.sc-stzh-pi-quote{margin-top:var(--stzh-space-xxlarge)}}.stzh-pi-quote__author.sc-stzh-pi-quote{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);margin-left:1.625rem}@media screen and (min-width: 900px){.stzh-pi-quote__author.sc-stzh-pi-quote{font-size:var(--stzh-font-milli-font-size)}}@media screen and (min-width: 1260px){.stzh-pi-quote__author.sc-stzh-pi-quote{margin-left:2.0625rem}}@media screen and (min-width: 1600px){.stzh-pi-quote__author.sc-stzh-pi-quote{font-size:var(--stzh-font-centi-font-size)}}`;
@@ -14,7 +14,7 @@ const StzhPiQuote = class {
         const classes = {
             "stzh-pi-quote": true,
         };
-        return (h(Host, { key: '7bd0955bfa6f6bd36d4602bb1093a1d8e89df3b4' }, h("div", { key: '38cf6de06830835ab44bef045d900b175ffe974c', class: classes }, h("blockquote", { key: '0f2e37ec295855bb304c088a3bc7b0ae32a63ead', class: "stzh-pi-quote__content" }, h("p", { key: '7ea07d731ae20ee8e29b6b2768e151fe46bc97be', class: "stzh-pi-quote__text" }, this.text), this.author && h("cite", { key: '1468daeb78b0b413f2aeca7d06a6d223de47403c', class: "stzh-pi-quote__author" }, this.author)))));
+        return (h(Host, { key: 'c4047d268cc08ebcb427475c44681b6ece37813d' }, h("div", { key: 'afe29f3639e31dd83aba43f9adfbde7f6845ff94', class: classes }, h("blockquote", { key: 'abbc83bc1f3cbd81f9b515ddd289af6058cd7546', class: "stzh-pi-quote__content" }, h("p", { key: 'c764e46228a63b7783d99216591b2acd7168ec4d', class: "stzh-pi-quote__text" }, this.text), this.author && h("cite", { key: 'd96ee223a7ca68b12f0ff0c860d8b00a5002a0d7', class: "stzh-pi-quote__author" }, this.author)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-teaser-layout-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 const stzhPiTeaserLayoutItemCss = () => `@charset "UTF-8";
@@ -486,7 +486,7 @@ const StzhPiTeaserLayoutItem = class {
             "stzh-pi-teaser-layout-item--has-lead": hasLead,
             "stzh-pi-teaser-layout-item--has-image": hasImage,
         };
-        return (h(Host, { key: 'aadd9d30259533a6613854be971113fd45ed3c74', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: 'db650763d9f4ad952908631eb03b173327ba774e', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '40c929dc9c5e0a46480721574336c5ed70208f5a', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '0a2a51a0363eef1c48ba2b658b51eec846810c5c', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '3f7a6190d344c6858aa4d38b2e6ccfb77dfd1e1c', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: 'ea1e11365abacd509f38fb0b302dd0c6d4780211', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: '6c80179e503c030b4021426379abfeb9fafee703', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '1553256b7d58824b81f1503e099a35e4a5d3b3ab', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: 'bc9129024d081f9446c2f34eba375b5435008215', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: '7b317274a7a40ce25150056446e345de91f8b0ce', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
+        return (h(Host, { key: '13d79df994febfd547cd05d35d469420ddf1144b', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '5d6c133f2d7621222e3057ab332f5cacdcbc35e3', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '819c1daa852719eb3352e04e5bd8cb17d5f432cf', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '504ab79d53e695b08ba27bd127f3be56ccd96d44', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '35db932bfdb0ea36d9b778a1d2ae87839d47bb14', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: 'eb31441a0cd66287fd402ed45ffd1f85845cd74c', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: 'dd14010525e94b66447e2a79b34d400a0b4ccd67', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '2fca42129ae56228fb788e62c865bd978b51b55c', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("p", { key: 'ff44e7c14e79461adea244f9c46884fdb9cc2ff8', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("p", { key: 'e7d37f3a99f83a5bac78ea94ebd443196addac0a', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-teaser-layout-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-pi-teaser-layout-item.entry.js","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"],"names":[],"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,GAAA,MAAA;AALnC,IAAA,WAAA,CAAA,OAAA,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,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AACl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"}
1	+ {"version":3,"file":"stzh-pi-teaser-layout-item.entry.js","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 <p class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</p>\n </div>\n {this.date && <p class=\"stzh-pi-teaser-layout-item__date\">{this.date}</p>}\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"names":[],"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,GAAA,MAAA;AALnC,IAAA,WAAA,CAAA,OAAA,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,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AACl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"}

package/dist/esm/stzh-pi-teaser-layout.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 import { m as media, a as addMediaChangeListener } from './media-utils-CUGRmgip.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhPiTeaserLayoutCss = () => `.sc-stzh-pi-teaser-layout-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-teaser-layout-h,[stzh-hidden].sc-stzh-pi-teaser-layout-h{display:none}.sc-stzh-pi-teaser-layout-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::before,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-teaser-layout-h .has-focus.sc-stzh-pi-teaser-layout{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout{outline-style:none !important}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-columns:repeat(12, 1fr);--min-height:112.5rem;--max-height:118.75rem;--gap:1rem;--grid-pi-teaser-layout-template:"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1"

package/dist/esm/stzh-pi-teaser.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhPiTeaserCss = () => `.sc-stzh-pi-teaser-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-teaser-h,[stzh-hidden].sc-stzh-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(
@@ -75,7 +75,7 @@ const StzhPiTeaser = class {
             "stzh-pi-teaser--has-lead": hasLead,
             "stzh-pi-teaser--has-image": hasImageSlot,
         };
-        return (h(Host, { key: '5de62fb3bcf3aa74f23a1ec0bd56adecc6f413a1', "has-lead": hasLead }, h("article", { key: '17e16cf28798e121ae8d18dbaffbd6e01ae14639', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: '2fc1a4a1160be1a87f036c1982506f4cc8786a4e', ref: el => (this.cardLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: 'd8b9d711ba3f3999dd9d863771d6f38543385359', class: "stzh-pi-teaser__image" }, h("stzh-ratio", { key: '0903987a40e33156506c6dc6ef5bcfa0e4a49ed7', ratio: "2:1" }, h("slot", { key: 'acada0d530285e49f8586d07c79bac866bb5b90b', name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { key: 'aee4462b525b2ce52feed146cb853099002d0687', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { key: 'eee77c4ffb66dd894a9a35292f93cbcd3af7cbd9', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { key: '9b9b63a9514f6881dce296d5ed3dc684babcfe1a', class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })), this.date && h("div", { key: 'bf30e0101a9e134caeb9895291dbad426529f71c', class: "stzh-pi-teaser__date" }, this.date))))));
+        return (h(Host, { key: '7390f7e3ea2c03a3ef4eda7510f83fc73aa71bba', "has-lead": hasLead }, h("article", { key: '0548adf4be7ce5e01e9ff2355d2eb683536fc7fb', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: 'baddbddfb7fc5008fb3fd8217679a0abda852ace', ref: el => (this.cardLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: '34a6571ac84f190525d230ec62a66f76d965cf90', class: "stzh-pi-teaser__image" }, h("stzh-ratio", { key: '790089236fcf35c986592946938e5bab1a9d87a5', ratio: "2:1" }, h("slot", { key: 'ffef3cec52fab726574f65eae66f60a626d011dc', name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { key: '0b964ee204053f5f212c0d822273cb3c07cfaf1b', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { key: 'eb4f6d3d18cd91dba3a689f3ace8c5a174c5dceb', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { key: 'cc7d0ae8a238111ceac3d5bb2297dc63ea2e99fa', class: "stzh-pi-teaser__lead" }, this.lead ? h("p", null, this.lead) : h("slot", { name: "lead" })), this.date && h("p", { key: '3bee7dcfd652179d0291590a071a6ea2d55b5d81', class: "stzh-pi-teaser__date" }, this.date))))));
     }
     get element() { return getElement(this); }
 };