@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/cjs/stzh-pi-content-navigation.cjs.entry.js

@@ -54,7 +54,7 @@ const StzhPiContentNavigation = class {
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (index.h(index.Host, { key: 'c42abe95e0d73723d1f0cf2aa751973a5a583c62', "has-lead": hasLead }, index.h("article", { key: '879c274c2073ea1ce0c5b6017233b610365d7aa2', class: classes, "aria-label": this.heading, role: "listitem" }, index.h(CardLink, { key: '8332f0c407d0c69d8c063ab1667a6c1465993925', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { key: 'aeb3927354ce525cbe6edee3ae7226409de22a7e', class: "stzh-pi-content-navigation__image" }, index.h("stzh-ratio", { key: 'da9d6a69d53465d9171c7c6ab0e96bd1dc985024', ratio: "2:1" }, index.h("slot", { key: 'dfd6406a810fd11a13bc0f2670df982e33096103', name: "image" }))), shouldRenderTitleRatio && (index.h("div", { key: '4399f9261a7546906257c928c511aeac337feda2', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), index.h("div", { key: 'cc0310c4e4ba422fc5f7a171206aa7902bea2052', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (index.h("div", { key: '0de77793c29c75685a56e073b15ff5b2b84321e9', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" })))), index.h("div", { key: '6d5307769334e8f1da198b5d375a4141aae31b2a', class: "stzh-pi-content-navigation__arrow" }, index.h("stzh-icon", { key: '89a95c1f263261738f1578db407e9121f3807775', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (index.h(index.Host, { key: '0a16919e13de81aa15deb81d4162461bc797686d', "has-lead": hasLead }, index.h("article", { key: '546ab726feeb9c83537035fadb527653736a9883', class: classes, "aria-label": this.heading, role: "listitem" }, index.h(CardLink, { key: 'f70c9644e16f1e6ec267000151c0a0f1b6f3ec78', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { key: 'd4b40a0c8bc2dd10832ee93c17706a0a449ca7a5', class: "stzh-pi-content-navigation__image" }, index.h("stzh-ratio", { key: '61f8e77a448c9bc15ffeb684c7fa6d209223f935', ratio: "2:1" }, index.h("slot", { key: 'b35984bd914f3a7eaaf75d11e57a125f50097a4f', name: "image" }))), shouldRenderTitleRatio && (index.h("div", { key: '787bbc48bafb804de5202715d1eb520599c90061', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), index.h("div", { key: '2e5d9234f52eccf7dffa868b00c0a8bfcd337d62', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (index.h("div", { key: 'c3be66d778cf8d7e84c385c778c9ea638b4d5756', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" })))), index.h("div", { key: '5785a3fda4de2dd49ef6151ed9383b2ec00109a2', class: "stzh-pi-content-navigation__arrow" }, index.h("stzh-icon", { key: '0790cce9f6da093c7fd2e1614afe1c5b4e679da2', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pi-menu.cjs.entry.js

@@ -263,7 +263,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 (index.h(index.Host, { key: '8d814a8e0e79688c18cf252a97027944664eaeee', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: 'e4048c92028b18c3a6e2bd0a33200b80cbf63bef', class: "stzh-pi-menu-positioner" }, index.h("div", { key: '58cba2e20480c28bea85e7268370aeb686785f2f', class: classes, style: { width: menuWidth } }, index.h("div", { key: '427a08f026aa5f274e6358e44e21d01754c88322', class: backdropClasses, onClick: this.handleBackdropClick }), index.h(Heading, { key: '9e3b71a442ad935930fa47961dfcce387220dd27', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, index.h("button", { key: '76e742716dc800c260ad509413efa3abcf2b7b1c', 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 }, index.h("span", { key: 'd907834e673e9838d75120b239f3bba9574cbf43', class: "stzh-pi-menu__button-text" }, this.heading), index.h("stzh-icon", { key: 'a0aee001981739d866c75673f4e9739b299aa9f9', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), index.h("div", { key: 'f48db0525c4aa919af26b0b102e187b0fba12175', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, index.h("div", { key: '7d601e993e68d909bada6b7f73690b4b544d5f94', class: "stzh-pi-menu__content-inner" }, index.h("nav", { key: '16f78af2613d5d627ae425012e8ace36788d9c37', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && index.h("p", { key: '861ad618e88385525ce7455e3c3c3eeeb085ca97', class: "stzh-pi-menu__subheading" }, this.subheading), index.h("ul", { key: '3c57f05aa34ab8c0900c41f61beba7ad28dca17e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index$1) => (index.h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (index.h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (index.h("stzh-details", { open: index$1 === 0 }, this.setSubMenuHeader(item), index.h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), index.h("button", { key: 'fb870cbd1098cab33cdcd3a641146cd591bde3bc', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, index.h("span", { key: 'f4073640a70396980e8d3a3305dbd58858cc7ead', class: "stzh-pi-menu__button-text" }, index.h("span", { key: '90c703747d6ac6fb8849bfb207a2c1fffe660cf5', class: "stzh-pi-menu__heading-text" }, this.heading)), index.h("stzh-icon", { key: '21cdf06321e37b291f4c32fda90c75b86d918ffe', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (index.h(index.Host, { key: '57045684e2f4a2ad5559d0a531b77d1bb3e13fcc', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: '42c42aa79045f7df2899fe837fee2f447a67d99b', class: "stzh-pi-menu-positioner" }, index.h("div", { key: 'dcb487d0a8c093aa51403b204e33ad5a4d89682f', class: classes, style: { width: menuWidth } }, index.h("div", { key: '49bd807628e73a723b2a6ff2088f30315eee2131', class: backdropClasses, onClick: this.handleBackdropClick }), index.h(Heading, { key: 'b85e45447c9ea90347107a8dbca3c925aa5c2315', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, index.h("button", { key: '42082f63ea72df85dd0d196383a4c9407b28caeb', 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 }, index.h("span", { key: '64717628f0b735ebd05447efd2880f2c30d2b190', class: "stzh-pi-menu__button-text" }, this.heading), index.h("stzh-icon", { key: 'b727aef4cfd5bfffd7d8332d214db3062e6b85c7', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), index.h("div", { key: 'fd1eb0ba81ab4853f7404777aab058280227f6e3', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, index.h("div", { key: '684f545d9e82648acc98013ad52012eda80126de', class: "stzh-pi-menu__content-inner" }, index.h("nav", { key: '69d4e538668cd30c89b7b5054de0ecacb3f94d14', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && index.h("p", { key: '325c29a8d6b209ea46ca2c42eae6ba21386d8163', class: "stzh-pi-menu__subheading" }, this.subheading), index.h("ul", { key: 'e96fc4a6d795f42f7de769caa7503b312450c5e4', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index$1) => (index.h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (index.h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (index.h("stzh-details", { open: index$1 === 0 }, this.setSubMenuHeader(item), index.h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), index.h("button", { key: 'a796b83c07871db48cdb79cf57f33fc45c463442', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, index.h("span", { key: 'be9e79e611839893454186a68a384c887d8fdd5f', class: "stzh-pi-menu__button-text" }, index.h("span", { key: '24d7d0ad3f41dd70e887bff7e1d50a6297e8e369', class: "stzh-pi-menu__heading-text" }, this.heading)), index.h("stzh-icon", { key: 'a8a0ef3058c5b26000c6edfc68f2935c578058df', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-pi-pagetitle.cjs.entry.js

@@ -63,7 +63,7 @@ const StzhPiPagetitle = class {
             "stzh-pi-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
         };
-        return (index.h(index.Host, { key: 'bc1447bd906371534607883029d0fdafaac84865', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, index.h("div", { key: '2976ef10ec0a80e25447a706948df5e83bce96e4', class: classes }, index.h("div", { key: 'a643484b32794710eb3209eb30a464f2e6abd4f5', class: "stzh-pi-pagetitle__hero-container" }, index.h("div", { key: 'c7fb03253283621f30d744fd7b42bf88a7650aa7', class: "stzh-pi-pagetitle__hero" }, index.h("div", { key: '276a214f03d357f18601abb6573fd99fd492a89a', class: "stzh-pi-pagetitle__breadcrumbs" }, index.h("slot", { key: '1406af1abed10f1d4f19a25ca4889fd09a5dd594', name: "breadcrumb" })), index.h("div", { key: 'c02fd00abc4bb83333a392bcb6594e31a45e4733', class: "stzh-pi-pagetitle__meta" }, index.h("div", { key: '323c574c1b38891b9aea152fc0fde085ce645189', class: "stzh-pi-pagetitle__readspeaker" }, index.h("slot", { key: '023779d61f0f1726c7740726a5d5ad96db24837a', name: "readspeaker" }))), index.h("div", { key: 'a04c33680ba7bec7cd34b7e11d14e2761f75cf1e', class: "stzh-pi-pagetitle__dateline" }, index.h("slot", { key: '242c2ba331c2bd373970d3a36225acfa7ce55ca8', name: "dateline" })), index.h("div", { key: '2e4ea0b21f4ff9479b9a6c4ada9a355283fe3847', class: "stzh-pi-pagetitle__heading" }, index.h("slot", { key: 'bd4a74fbc65b05564abf7a0b88eee4c2ca523dbd', name: "heading" })))), index.h("div", { key: 'ee24ff47efc29d6fe1345ef7bfd08c697ccdcebb', class: "stzh-pi-pagetitle__image-lead-menu-container" }, index.h("div", { key: 'db6cb2a05c58b1189832d350160e943c4fb228a9', class: "stzh-pi-pagetitle__image-lead-menu" }, index.h("div", { key: 'bae5a9d6aa541bbd8c978b550f22bbecf92caab2', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (index.h("div", { key: '64614f49e06acaa037f233a4b4361f5d0618f950', class: "stzh-pi-pagetitle__menu-inner" }, index.h("slot", { key: 'dbc9294e0a1ed5d65e2998aa1c956fed8355bf0b', name: "menu" })))), imageSlotUsed && (index.h("div", { key: '46cc40114e3d085f261e1244b2efe64fdc73073e', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (index.h("div", { key: '2448c75b847ab9f4729aba5681c30bac615c6f9f', class: "stzh-pi-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: '01dcebc68d01b849f86073885564df8fb1ffdfcb', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, index.h("slot", { key: '2b668c52975933f2294e6f3c87bcae85219d6044', name: "image" })))))), menuSlotUsed && (index.h("div", { key: 'a989167bc3a76e160b5cde9c06871948b65d0042', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: 'bae28bb8353549eb9c4b4b9b3ce65aae911f07ca', name: "lead" }))))), !menuSlotUsed && (index.h("div", { key: '47657439842999b021bc4158c19b755f21ae8752', class: "stzh-pi-pagetitle__lead-container" }, index.h("div", { key: '5358eb381605b433ffd56793bd719ff3d1be9746', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: '09dd20699f06cd5a77356f00d6db001264596f7c', name: "lead" })))), hasArticleInfo && (index.h("div", { key: '6087fc056609840d8f1ee629379c8da77440d035', class: "stzh-pi-pagetitle__article-info-wrapper" }, index.h("div", { key: 'ba08bb1cc82b8b13fb385a5b823ccf45d43c4252', class: "stzh-pi-pagetitle__article-info" }, index.h("div", { key: '1158c090072dc2090273d967e7bf2aaa22610272', class: "stzh-pi-pagetitle__article-info-holder" }, this.author && index.h("p", { key: 'd7bb67b16ad7404da9cb1b49df4921a681638fd1', class: "stzh-pi-pagetitle__author" }, this.author), this.date && index.h("p", { key: '615e3defa175315b194e2ebe8333f6d856327b24', class: "stzh-pi-pagetitle__date" }, this.date), index.h("slot", { key: '413b9e6f73c14b62ba6d752e644e0f928be4d7ca', name: "content" }))))))));
+        return (index.h(index.Host, { key: '517553d8fc2eccd4e392639972efd195cc13b82c', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, index.h("div", { key: '2c9b74f7594d4369ae717f3a0aa6221737818e37', class: classes }, index.h("div", { key: '6dbb9e4c7ef4125ef23884373700ca5510d5e2dc', class: "stzh-pi-pagetitle__hero-container" }, index.h("div", { key: '7d6590d75609755b9945181590a58e841ccb6a5d', class: "stzh-pi-pagetitle__hero" }, index.h("div", { key: 'efbac24ba586ef740b3fd012b653dacd571f8f87', class: "stzh-pi-pagetitle__breadcrumbs" }, index.h("slot", { key: '49ffdf90794fee13ac4098a7b7ab9ffffa022a00', name: "breadcrumb" })), index.h("div", { key: '87b59eafb444a76e740931ef533a17ef3dc7b378', class: "stzh-pi-pagetitle__meta" }, index.h("div", { key: '023f4c2a17340475e9a1bb99e5f9a7255b974cb2', class: "stzh-pi-pagetitle__readspeaker" }, index.h("slot", { key: 'f0f935fd4145be184f001899228e77d2d758e7a3', name: "readspeaker" }))), index.h("div", { key: '5b2800adf6b2e29621c5e0071daf3c6ead61f85c', class: "stzh-pi-pagetitle__dateline" }, index.h("slot", { key: 'e2b975fec524d79b1703c16bbdf59ca542173fec', name: "dateline" })), index.h("div", { key: 'f716648deb81197cb86ec57e153ef9533de7c739', class: "stzh-pi-pagetitle__heading" }, index.h("slot", { key: '29c5e4ef9226d7d5733c33d12232fee33f8044ae', name: "heading" })))), index.h("div", { key: 'd31ba15572bed4af76cd98acfef77998c297e805', class: "stzh-pi-pagetitle__image-lead-menu-container" }, index.h("div", { key: '3b77bd8ecbdf2a9e8ba57a2f43df4e67893f9c6f', class: "stzh-pi-pagetitle__image-lead-menu" }, index.h("div", { key: 'b31a688785c6ff74d414602e13240d7aca264f58', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (index.h("div", { key: 'f9023fc9c4a64a7a618e95b646185a9a03e0b101', class: "stzh-pi-pagetitle__menu-inner" }, index.h("slot", { key: 'e9cf0a9658c999a5e4f8e1706976308e091f9e2a', name: "menu" })))), imageSlotUsed && (index.h("div", { key: '563ec8906f9a1829b3795ec4fa1d808e7bb1982e', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (index.h("div", { key: 'f5608867a4849f00a22671b3e533259fec06e06f', class: "stzh-pi-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: 'd8026fe3433a8f59a43a874b9e64dfcf74fda574', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, index.h("slot", { key: 'bc44a468ece509db858af815781cc9950b79cec9', name: "image" })))))), menuSlotUsed && (index.h("div", { key: '6c0268e26dd4462b28b41b234b8998c6cc4ebb7a', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: 'dd88416348dde4e1a748f2bc842941c0bb1b17aa', name: "lead" }))))), !menuSlotUsed && (index.h("div", { key: '159cd4cc09defa62f7c926ba4d71d43762e7d682', class: "stzh-pi-pagetitle__lead-container" }, index.h("div", { key: 'a35c3f7341e49762fc86d9dde3055b89677dd919', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: '559b60a5f60a8b0fdf6f7f5b9c221924ec932acf', name: "lead" })))), index.h("div", { key: '81477ae7580ee075a57395bced4f525a472d2680', class: "stzh-pi-pagetitle__article-info-wrapper" }, index.h("div", { key: '1e232da206f1fd05ea3fa28d85d1c773d17d2b6e', class: "stzh-pi-pagetitle__article-info" }, index.h("div", { key: 'e097552cd246d1064cb9f9b307f45ef1bfde834d', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (index.h("div", { key: '11a170814162133727a85f9d3daf79499d0612e6' }, this.author && index.h("p", { key: 'a50c86bd6d4c336aeed4a77990be0854aa0fa869', class: "stzh-pi-pagetitle__author" }, this.author), this.date && index.h("p", { key: '8b3c06a346f10e06c9c6e969899b0f5db75aa172', class: "stzh-pi-pagetitle__date" }, this.date))), index.h("slot", { key: '1616edd716b2161e4ed69a31fc8c0f84ba93b7e8', name: "content" })))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pi-pagetitle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-pagetitle.entry.cjs.js","mappings":"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","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/CMS/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/CMS/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-pagetitle-background-color: Background if it has a menu\n   * @prop --stzh-pi-pagetitle-hero-background-color: Background color\n   * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n */\n\n:host {\n  --hero-background-color: var(\n    --stzh-pi-pagetitle-hero-background-color,\n    #{$colorPrimary10}\n  );\n  --lead-background-color: var(\n    --stzh-pi-pagetitle-lead-background-color,\n    #{$colorPrimary40}\n  );\n  --background-color: var(\n    --stzh-pi-pagetitle-background-color,\n    #{$colorCoolgrey10}\n  );\n  --grid-template-areas: \"hero hero hero hero\"\n    \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  @include mq($from: small) {\n    --grid-template-areas: \". hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: \". . hero hero hero hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \". . hero hero hero hero hero hero hero hero hero .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n  @include mq($from: ultra) {\n    --grid-template-areas: \". . hero hero hero hero hero hero hero . . .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  ::slotted([slot=\"dateline\"]) {\n    @include fontSize(\"milli\");\n    @include font(\"heavy\");\n    --color: var(--stzh-color-black80op);\n  }\n\n  ::slotted([slot=\"heading\"]),\n  ::slotted([slot=\"lead\"]) *,\n  ::slotted([slot=\"breadcrumb\"]) {\n    --color: var(--stzh-color-black);\n  }\n\n  ::slotted([slot=\"menu\"]) {\n    --stzh-pi-menu-padding-left: #{$containerMargin};\n\n    @include mq($from: small) {\n      --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n    }\n\n    @include mq($from: large) {\n      --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n    }\n\n    @include mq($from: ultra) {\n      --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n    }\n  }\n}\n\n.stzh-pi-pagetitle {\n  @include spaceCurve(\"margin-bottom\", \"large\");\n  @include spaceCurve(\"margin-bottom\", \"large\");\n\n  /* Containers */\n\n  &__hero-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include containerPadding;\n  }\n\n  &__image-lead-menu-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n\n    @include mq($from: medium) {\n      @include containerPadding;\n    }\n  }\n\n  &__lead-container {\n    @include grid;\n    grid-template-areas: \"lead lead lead lead\";\n    background-color: var(--lead-background-color);\n    @include containerPadding;\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n    }\n  }\n\n  &__image-lead-menu {\n    grid-area: image-lead-menu;\n\n    @include grid;\n    grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  /* Elements */\n\n  &__hero {\n    grid-area: hero;\n  }\n\n  &__menu {\n    display: none;\n    // grid-area: menu;\n    grid-column: 1 / 2; /* span full width */\n    grid-row: 1 / 2; /* same row as image */\n    position: relative; /* allows z-index to work */\n    z-index: 2;\n\n    @include mq($from: medium) {\n      // grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n      grid-column: 1 / 3; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n\n    @include mq($from: large) {\n      // grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n      grid-column: 1 / 3; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n  }\n\n  &__image {\n    // grid-area: image;\n    grid-column: 1 / -1;\n    grid-row: 1 / 2; /* extend beyond menu row */\n    z-index: 1;\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n      grid-column: 3 / -1; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n    }\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n    // grid-area: lead;\n    grid-column: 1 / -1;\n    grid-row: 2 / 4; /* extend beyond menu row */\n    z-index: 1;\n\n    background-color: var(--lead-background-color);\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n\n    @include mq($from: medium) {\n      grid-column: 3 / -1; /* span full width */\n      grid-row: 2 / -1; /* same row as image */\n    }\n  }\n\n  &__text {\n    @include spaceCurve(\"padding-top\", \"big\");\n    @include spaceCurve(\"padding-bottom\", \"big\");\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space(\"xsmall\");\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__readspeaker {\n    margin-bottom: space(\"medium\");\n\n    @include mq($from: small) {\n      margin-bottom: space(\"large\");\n    }\n\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    margin-bottom: space(\"xxsmall\");\n  }\n\n  &__breadcrumbs {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  /**\n   * Menu.\n   */\n\n  &__menu-inner {\n    @include mq($from: medium) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  }\n\n  /* Article Info */\n  &__article-info-wrapper {\n    @include container();\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include grid;\n    grid-template-areas: \"article-info article-info article-info article-info\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . article-info article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n    }\n  }\n\n  &__article-info {\n    grid-area: article-info;\n  }\n\n  &__article-info-holder {\n    @include mq($from: medium) {\n      @include spaceCurve(\"padding-left\", \"regular\");\n    }\n  }\n\n  &__author {\n    margin-top: 0;\n    margin-bottom: var(--stzh-space-xxsmall);\n    color: var(--stzh-color-coolgrey70);\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n  }\n\n  &__date {\n    margin: 0;\n    @include fontCurve(\"p1\");\n  }\n\n  /**\n   * Has menu.\n   */\n  &--has-menu &__image-lead-menu {\n    grid-template-columns: auto repeat(3, minmax(0, 1fr));\n    // grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-columns: $gridColumnsMedium;\n      // grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: $gridColumnsLarge;\n      // grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  &--has-menu &__image-lead-menu-container {\n    background-color: transparent;\n    @include mq($to: medium) {\n      background-color: var(--lead-background-color);\n    }\n  }\n\n  &--has-menu &__menu {\n    position: relative;\n    display: inherit;\n    margin-right: calc(#{$gridGutter} * -1);\n\n    @include mq($from: small) {\n      margin-right: calc(#{$gridGutterSmall} * -1);\n    }\n\n    @include mq($from: medium) {\n      margin-right: calc(#{$gridGutterMedium} * -1);\n      margin-left: -$containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: calc(#{$gridGutterLarge} * -1);\n      margin-left: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(#{$gridGutterUltra} * -1);\n      margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n    }\n  }\n\n  &--has-menu &__lead {\n    @include spaceCurve(\"padding-left\", \"regular\");\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n      padding-right: calc((100vw - 84.25rem) / 2);\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve(\"padding-top\", \"regular\");\n  }\n\n  /* Level 3-4 */\n  &--level-3,\n  &--level-4 {\n    --hero-background-color: var(--stzh-color-coolgrey20);\n    --lead-background-color: var(--stzh-color-coolgrey30);\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot breadcrumb - Slot for `stzh-link` element\n * @slot menu - Slot for `stzh-link` element\n * @slot dateline - Slot for date or meta information\n * @slot content - Slot for content\n */\n@Component({\n  tag: \"stzh-pi-pagetitle\",\n  styleUrl: \"stzh-pi-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPiPagetitle {\n  /** Level */\n  @Prop({ reflect: true }) level: 1 | 2 | 3 | 4 = 1;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Author of the content */\n  @Prop({ reflect: true }) author: string = \"\";\n\n  /** Date of the content */\n  @Prop({ reflect: true }) date: string = \"\";\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n    const menuSlotUsed = hasSlot(this.element, \"menu\");\n    const hasArticleInfo = !!this.author || !!this.date;\n\n    const classes = {\n      \"stzh-pi-pagetitle\": true,\n      \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n      \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n      \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n      \"stzh-pi-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n    };\n\n    return (\n      <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n        <div class={classes}>\n          <div class=\"stzh-pi-pagetitle__hero-container\">\n            <div class=\"stzh-pi-pagetitle__hero\">\n              <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n                <slot name=\"breadcrumb\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__meta\">\n                <div class=\"stzh-pi-pagetitle__readspeaker\">\n                  <slot name=\"readspeaker\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__dateline\">\n                <slot name=\"dateline\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__heading\">\n                <slot name=\"heading\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n            <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n              <div class=\"stzh-pi-pagetitle__menu\">\n                {menuSlotUsed && (\n                  <div class=\"stzh-pi-pagetitle__menu-inner\">\n                    <slot name=\"menu\"></slot>\n                  </div>\n                )}\n              </div>\n\n              {imageSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__image\">\n                  {[1, 2].indexOf(this.level) > -1 && (\n                    <div class=\"stzh-pi-pagetitle__image-wrapper\">\n                      <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n                        <slot name={\"image\"}></slot>\n                      </stzh-ratio>\n                    </div>\n                  )}\n                </div>\n              )}\n\n              {menuSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {!menuSlotUsed && (\n            <div class=\"stzh-pi-pagetitle__lead-container\">\n              <div class=\"stzh-pi-pagetitle__lead\">\n                <slot name=\"lead\"></slot>\n              </div>\n            </div>\n          )}\n\n          {hasArticleInfo && (\n            <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n              <div class=\"stzh-pi-pagetitle__article-info\">\n                <div class=\"stzh-pi-pagetitle__article-info-holder\">\n                  {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n                  {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n\n                  <slot name=\"content\" />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-pagetitle.entry.cjs.js","mappings":"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","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/CMS/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/CMS/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-pagetitle-background-color: Background if it has a menu\n   * @prop --stzh-pi-pagetitle-hero-background-color: Background color\n   * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n */\n\n:host {\n  --hero-background-color: var(\n    --stzh-pi-pagetitle-hero-background-color,\n    #{$colorPrimary10}\n  );\n  --lead-background-color: var(\n    --stzh-pi-pagetitle-lead-background-color,\n    #{$colorPrimary40}\n  );\n  --background-color: var(\n    --stzh-pi-pagetitle-background-color,\n    #{$colorCoolgrey10}\n  );\n  --grid-template-areas: \"hero hero hero hero\"\n    \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  @include mq($from: small) {\n    --grid-template-areas: \". hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: \". . hero hero hero hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \". . hero hero hero hero hero hero hero hero hero .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n  @include mq($from: ultra) {\n    --grid-template-areas: \". . hero hero hero hero hero hero hero . . .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  ::slotted([slot=\"dateline\"]) {\n    @include fontSize(\"milli\");\n    @include font(\"heavy\");\n    --color: var(--stzh-color-black80op);\n  }\n\n  ::slotted([slot=\"heading\"]),\n  ::slotted([slot=\"lead\"]) *,\n  ::slotted([slot=\"breadcrumb\"]) {\n    --color: var(--stzh-color-black);\n  }\n\n  ::slotted([slot=\"menu\"]) {\n    --stzh-pi-menu-padding-left: #{$containerMargin};\n\n    @include mq($from: small) {\n      --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n    }\n\n    @include mq($from: large) {\n      --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n    }\n\n    @include mq($from: ultra) {\n      --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n    }\n  }\n}\n\n.stzh-pi-pagetitle {\n  @include spaceCurve(\"margin-bottom\", \"large\");\n  @include spaceCurve(\"margin-bottom\", \"large\");\n\n  /* Containers */\n\n  &__hero-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include containerPadding;\n  }\n\n  &__image-lead-menu-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n\n    @include mq($from: medium) {\n      @include containerPadding;\n    }\n  }\n\n  &__lead-container {\n    @include grid;\n    grid-template-areas: \"lead lead lead lead\";\n    background-color: var(--lead-background-color);\n    @include containerPadding;\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n    }\n  }\n\n  &__image-lead-menu {\n    grid-area: image-lead-menu;\n\n    @include grid;\n    grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  /* Elements */\n\n  &__hero {\n    grid-area: hero;\n  }\n\n  &__menu {\n    display: none;\n    // grid-area: menu;\n    grid-column: 1 / 2; /* span full width */\n    grid-row: 1 / 2; /* same row as image */\n    position: relative; /* allows z-index to work */\n    z-index: 2;\n\n    @include mq($from: medium) {\n      // grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n      grid-column: 1 / 3; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n\n    @include mq($from: large) {\n      // grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n      grid-column: 1 / 3; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n  }\n\n  &__image {\n    // grid-area: image;\n    grid-column: 1 / -1;\n    grid-row: 1 / 2; /* extend beyond menu row */\n    z-index: 1;\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n      grid-column: 3 / -1; /* span full width */\n      grid-row: 1 / 2; /* same row as image */\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n    }\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n    // grid-area: lead;\n    grid-column: 1 / -1;\n    grid-row: 2 / 4; /* extend beyond menu row */\n    z-index: 1;\n\n    background-color: var(--lead-background-color);\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n\n    @include mq($from: medium) {\n      grid-column: 3 / -1; /* span full width */\n      grid-row: 2 / -1; /* same row as image */\n    }\n  }\n\n  &__text {\n    @include spaceCurve(\"padding-top\", \"big\");\n    @include spaceCurve(\"padding-bottom\", \"big\");\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space(\"xsmall\");\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__readspeaker {\n    margin-bottom: space(\"medium\");\n\n    @include mq($from: small) {\n      margin-bottom: space(\"large\");\n    }\n\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    margin-bottom: space(\"xxsmall\");\n  }\n\n  &__breadcrumbs {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  /**\n   * Menu.\n   */\n\n  &__menu-inner {\n    @include mq($from: medium) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  }\n\n  /* Article Info */\n  &__article-info-wrapper {\n    @include container();\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include grid;\n    grid-template-areas: \"article-info article-info article-info article-info\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . article-info article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n    }\n  }\n\n  &__article-info {\n    grid-area: article-info;\n  }\n\n  &__article-info-holder {\n    @include mq($from: medium) {\n      @include spaceCurve(\"padding-left\", \"regular\");\n    }\n  }\n\n  &__author {\n    margin-top: 0;\n    margin-bottom: var(--stzh-space-xxsmall);\n    color: var(--stzh-color-coolgrey70);\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n  }\n\n  &__date {\n    margin: 0;\n    @include fontCurve(\"p1\");\n  }\n\n  /**\n   * Has menu.\n   */\n  &--has-menu &__image-lead-menu {\n    grid-template-columns: auto repeat(3, minmax(0, 1fr));\n    // grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-columns: $gridColumnsMedium;\n      // grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: $gridColumnsLarge;\n      // grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  &--has-menu &__image-lead-menu-container {\n    background-color: transparent;\n    @include mq($to: medium) {\n      background-color: var(--lead-background-color);\n    }\n  }\n\n  &--has-menu &__menu {\n    position: relative;\n    display: inherit;\n    margin-right: calc(#{$gridGutter} * -1);\n\n    @include mq($from: small) {\n      margin-right: calc(#{$gridGutterSmall} * -1);\n    }\n\n    @include mq($from: medium) {\n      margin-right: calc(#{$gridGutterMedium} * -1);\n      margin-left: -$containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: calc(#{$gridGutterLarge} * -1);\n      margin-left: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(#{$gridGutterUltra} * -1);\n      margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n    }\n  }\n\n  &--has-menu &__lead {\n    @include spaceCurve(\"padding-left\", \"regular\");\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n      padding-right: calc((100vw - 84.25rem) / 2);\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve(\"padding-top\", \"regular\");\n  }\n\n  /* Level 3-4 */\n  &--level-3,\n  &--level-4 {\n    --hero-background-color: var(--stzh-color-coolgrey20);\n    --lead-background-color: var(--stzh-color-coolgrey30);\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot breadcrumb - Slot for `stzh-link` element\n * @slot menu - Slot for `stzh-link` element\n * @slot dateline - Slot for date or meta information\n * @slot content - Slot for content\n */\n@Component({\n  tag: \"stzh-pi-pagetitle\",\n  styleUrl: \"stzh-pi-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPiPagetitle {\n  /** Level */\n  @Prop({ reflect: true }) level: 1 | 2 | 3 | 4 = 1;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Author of the content */\n  @Prop({ reflect: true }) author: string = \"\";\n\n  /** Date of the content */\n  @Prop({ reflect: true }) date: string = \"\";\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n    const menuSlotUsed = hasSlot(this.element, \"menu\");\n    const hasArticleInfo = !!this.author || !!this.date;\n\n    const classes = {\n      \"stzh-pi-pagetitle\": true,\n      \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n      \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n      \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n      \"stzh-pi-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n    };\n\n    return (\n      <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n        <div class={classes}>\n          <div class=\"stzh-pi-pagetitle__hero-container\">\n            <div class=\"stzh-pi-pagetitle__hero\">\n              <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n                <slot name=\"breadcrumb\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__meta\">\n                <div class=\"stzh-pi-pagetitle__readspeaker\">\n                  <slot name=\"readspeaker\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__dateline\">\n                <slot name=\"dateline\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__heading\">\n                <slot name=\"heading\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n            <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n              <div class=\"stzh-pi-pagetitle__menu\">\n                {menuSlotUsed && (\n                  <div class=\"stzh-pi-pagetitle__menu-inner\">\n                    <slot name=\"menu\"></slot>\n                  </div>\n                )}\n              </div>\n\n              {imageSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__image\">\n                  {[1, 2].indexOf(this.level) > -1 && (\n                    <div class=\"stzh-pi-pagetitle__image-wrapper\">\n                      <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n                        <slot name={\"image\"}></slot>\n                      </stzh-ratio>\n                    </div>\n                  )}\n                </div>\n              )}\n\n              {menuSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {!menuSlotUsed && (\n            <div class=\"stzh-pi-pagetitle__lead-container\">\n              <div class=\"stzh-pi-pagetitle__lead\">\n                <slot name=\"lead\"></slot>\n              </div>\n            </div>\n          )}\n\n          <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n            <div class=\"stzh-pi-pagetitle__article-info\">\n              <div class=\"stzh-pi-pagetitle__article-info-holder\">\n                {hasArticleInfo && (\n                  <div>\n                    {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n                    {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n                  </div>\n                )}\n                <slot name=\"content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-pi-teaser-layout-item.cjs.entry.js

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

package/dist/cjs/stzh-pi-teaser-layout-item.cjs.entry.js.map

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

package/dist/cjs/stzh-pi-teaser-layout.cjs.entry.js

@@ -60,7 +60,7 @@ const StzhPiTeaserLayout = class {
         this.mediaChangeHandler();
         /**
           The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.
-          The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
+          The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
         **/
         this.contentList = this.contentList.slice(0, 6);
         if (this.variant == "rubrick" && this.contentList.length < 4) {
@@ -273,7 +273,7 @@ const StzhPiTeaserLayout = class {
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? "side" : "no-side"}`]: true,
         });
-        return (index.h(index.Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (index.h("div", { class: "stzh-pi-teaser-layout__header-holder" }, index.h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), index.h("div", { class: classes }, ...this.contentList.map((teaser, index$1) => teaser.type == "empty-teaser" ? (index.h("div", { class: teaserClasses(index$1) })) : (index.h("stzh-pi-teaser", { key: index$1, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index$1 + 1), lead: leadBehavior(teaser.lead, index$1 + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index$1 + 1), isHero: !isRubrick, class: teaserClasses(index$1) })))), bottomSlotUsed && (index.h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, index.h("slot", { name: "bottom" })))));
+        return (index.h(index.Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (index.h("div", { class: "stzh-pi-teaser-layout__header-holder" }, index.h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), index.h("div", { class: classes }, ...this.contentList.map((teaser, index$1) => teaser.type == "empty-teaser" ? (index.h("div", { class: teaserClasses(index$1) })) : (index.h("stzh-pi-teaser-layout-item", { key: index$1, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index$1 + 1), lead: leadBehavior(teaser.lead, index$1 + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index$1 + 1), class: teaserClasses(index$1) })))), bottomSlotUsed && (index.h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, index.h("slot", { name: "bottom" })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pi-teaser-layout.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser-layout.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","hasSlot","h","Host","index"],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                isHero={!isRubrick}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser-layout.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","hasSlot","h","Host","index"],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n/**\n * @slot bottom - Slot for bottom content - like buttons to load more data\n */\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser-layout-item\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}