@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/esm/stzh-message.entry.js

@@ -41,10 +41,10 @@ const StzhMessage = class {
             "stzh-message--has-close-hidden": this.hideClose,
             [`stzh-message--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '267c7e609677ca54b45142e5f056d28f711cdd9f', hidden: !this.open }, h("div", { key: '56a67b7c79fc1817e396b59e3b4181e0d65f3e24', class: classes }, h("div", { key: '35f09d647f2f25896d32488ec68df4923a6dcea4', class: "stzh-message__content" }, h("div", { key: '5bb473fb68a4485f83a09f5d67d6dba536cc48ae', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: '804e2b7eaa18ae9944830323f69bdf721ee3e8d8', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
+        return (h(Host, { key: '2b8dc6ea34859cbb2ec97a5050e302c4abb6950d', hidden: !this.open }, h("div", { key: 'db8a69b709fdf2744e5539a4a73450572f421ffb', class: classes }, h("div", { key: 'd5d0cee42e708c3023b08e5ff8bb19ce069115fd', class: "stzh-message__content" }, h("div", { key: 'e8bac8afe7becaa1c1e2e7c6547693baa61ac3c9', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: '85e21a2325335da337918af004be529a6ccc8b3a', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), h("div", { key: 'fbaae9b83b1a6ea0ca6266ff0f5d319d62a50c2a', class: "stzh-message__text-wrapper" }, h("div", { key: 'e3eac8a185112ffc1e045946bbd7c00c6c132dca', class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '3b99a5d3e8ce1eb7fe4be442012c7308033cbacc', class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { key: '216e5dfbd5c74e12d71e3c91380aa3dd00cef027', class: "stzh-message__link" }, h("slot", { key: 'c5b5faa346a93b88474c4d91a62af304a5b80cd9', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '204ff573366df41346ec409165b55aad3b8f25bb', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
+                (this.type === "error" && "warning-filled") })), h("div", { key: '573458dff14060a35d607a7145e6689edf4851e6', class: "stzh-message__text-wrapper" }, h("div", { key: '348e43408a997b4852bca789a49da5db02a9c5ab', class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '9060751b5a99c6291618d876008c078e224e36fd', class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { key: '274a4a61335cf8f8aeb378270c7bae204f35f28e', class: "stzh-message__link" }, h("slot", { key: 'c5b42563deef2f30a6b8bf16c7e3e6ca7f7013a1', name: "link" })))), !this.hideClose && (h("stzh-button", { key: 'ea83e74ca6bb1f26fea215449edee56d47e1120a', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-microsite-teaserlist.entry.js

@@ -73,7 +73,7 @@ const StzhMicrositeTeaserlist = class {
         const classes = {
             "stzh-microsite-teaserlist": true,
         };
-        return (h(Host, { key: '037ac3c273bd4f15ece3e41a1e2b3f607470429d' }, h("div", { key: '75a12d422b3a13b94bc5f7f18675ea43a73e8c41', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: '1b9893a0d1f054d5f4e594772fc3cf3e04d16dfd', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: 'e1d62163c5d29bb66f28fa1d79f402a2e5863766', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: 'd118f38950ab4fb6a68b31b0988acf6d86177ae0', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: 'fafcc6bdf5c1047d5f48de45f6d05a42fbd198e8', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
+        return (h(Host, { key: '33f709ed60ff013d3e0c123f19a4d86b0bff9128' }, h("div", { key: '43aac0009c91d4f7ac0c0961773b792bc2cec274', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: '815b9b392e0862973c2da64e77b24f4d6bcfc63d', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: 'd521939456bbf16acfe6f2ea7aebcd2183818e76', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: '7c3f1712e6ae03f25746daecaffc6c1d7e56e455', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: '0cc6a2d32a1aa5180909aec516d0b0eafd3c2f9b', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-monthyearpicker.entry.js

@@ -197,7 +197,7 @@ const StzhMonthyearpicker = class {
         const classes = {
             "stzh-monthyearpicker": true,
         };
-        return (h(Host, { key: '36c159a287ae1cf63e611e5e44a3a3073e3a5386', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c541529d09923b821f2923ec5598a637dea89a87', class: classes }, h("input", { key: '1b184e6567a05691c680292fc2e66ebb2bb2acfc', type: "hidden", name: this.name, value: this.value }), h("div", { key: '6efd5586afe0db082f3a605152c2bfc7d1385ba8', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: 'e5dd68a4aac50e95dacd7bff5098f8cdfb613b41', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: 'f55009ba7e82afc3712469f36fd62873d53c52cc', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '32ebf24f44cff511a430369abc35043cb02d80cb', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+        return (h(Host, { key: 'eba44c9f88fe3fa74d87a7981034e157559b61ba', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '46e3134928c73452993808b293f89112e1fcf71b', class: classes }, h("input", { key: '2849c42a5eef497bad5f5d904a8d72665c7671f8', type: "hidden", name: this.name, value: this.value }), h("div", { key: '2d1932ee3a82185d8da0e8de8a1591c5347582c3', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: 'a671562dff236ace3f5c4cea6e8a28ae6f3469d4', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: '7669fda5c59e27c793e04fd63d2e9b90abb96924', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '7f2b5ca4a7ec87b7964c89f125ecc079011acc41', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-offline-indicator.entry.js

@@ -95,7 +95,7 @@ const StzhOfflineIndicator = class {
         const classes = {
             "stzh-offline-indicator": true,
         };
-        return (h(Host, { key: '1c551c99ced3a627999deddb807874496d6ba0a0', "is-offline": this.isOffline }, h("div", { key: '46adcd961c00db05812bb8f8cf9916fbc69afb38', class: classes })));
+        return (h(Host, { key: 'f2839774390e99ecf7e889dbdee76cc34d98fc60', "is-offline": this.isOffline }, h("div", { key: 'e0001ee7bc12fc8772aca2d2f6247e186c35d632', class: classes })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-page-skiplinks.entry.js

@@ -27,7 +27,7 @@ const StzhPageSkiplinks = class {
         }
     }
     render() {
-        return (h(Host, { key: '409810be74740c94b493b890d43999a2c4c9b1d6' }, h("div", { key: '90e6ff829f95acaee31fb61e32266737022f36cd', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: '58eec930796c55319ca33753f87a751eda4c368a' }))));
+        return (h(Host, { key: '8d08d198d36044d8db4d092aebe367b36f1b33bd' }, h("div", { key: 'adeea901b72554cbc7bf68deb21b97e3d1d96ea3', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: '31415fd96e02e3dcbbf052302614a182db711904' }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -29,7 +29,7 @@ const StzhPagebottom = class {
             "stzh-pagebottom": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: '86b219e13a6c85c70e372c828e974bdc65e46008' }, h("div", { key: '20bba21d493d56f2eb5a7939bf3caabbb4dbf32f', class: classes }, h("div", { key: 'e81fc4ef130048b7622c84d079b078a12ef130b5', class: "stzh-pagebottom__wrapper" }, h("div", { key: '9187966337d643df6040607705cbd70555205a15', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: '937f70cb75fc59de9d7d057f4694efd2a0fdc8ce', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '31357b288e32c8948844ba7826641937904bac28' }, h("stzh-button", { key: 'b5077a2e0d80c9423e4a121076313ed9c1672c0b', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '9e2fef4459e773003ec4ac3493cf9b9905b4c3a4', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: 'eb8d45284496f544c25b900cc77ce1ac204ea719', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: '97d0740070666ef7b6843220e562cdf78ecccff0', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '5266eb1985d2c8574ca59a9365f971ac877b9f6c', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: '6c5455890be560cac1382688757fe5f9d21dc073', name: "sticky-actions" }))))));
+        return (h(Host, { key: '005deb84142b76635d8470da6adaff17ed108958' }, h("div", { key: '73bb1bf4226953f7447768d9c1eed3bfc01ba646', class: classes }, h("div", { key: 'd8530fe4842bf7d12d41bc34e77d49134df1b29b', class: "stzh-pagebottom__wrapper" }, h("div", { key: 'd478518d4b7ff3c5efddf845563a290881df671c', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: 'fac78db6e63ce1a66e7d060f1ec451958b3e0889', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '3e514058ba6b66a96fdfb3f31d0047e25c66eb59' }, h("stzh-button", { key: '922c3ea2036de895cb385f4cd18e8905150cc7fa', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '6090a666612fe829464a70a04251ec5de350480a', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: '8c9b1f9819f6f4d725acf93b06771baafb437254', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: '27f1d54b536bba53ca35f561de163b51175fc59f', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '7937e815e89689189415eb7512017aa35264decb', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: 'b058ae842711f3a054e8efbee759c0c235db4af4', name: "sticky-actions" }))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -17,7 +17,7 @@ const StzhPagecontent = class {
             "stzh-pagecontent--has-aside-left": hasAsideLeft || hasAnchornav,
             "stzh-pagecontent--has-no-aside-left": !hasAsideLeft && !hasAnchornav,
         };
-        return (h(Host, { key: '4d9f85a23cdf707919faf0ca310094e998d9eab3' }, h("div", { key: '229b94d83ac0b07aff14a0c4c8aaecc73bbfbeb1', class: classes }, h("aside", { key: '44b74f2b05773a3fc24366a1d2a4f032b90f111c', class: "stzh-pagecontent__aside-left" }, h("div", { key: 'eca1e7294926c27c021d03cad273a9b3c2962b0d', class: "stzh-pagecontent__anchornav" }, h("slot", { key: 'afa16547566f035323f9032282303585bb2a7fb4', name: "anchornav" })), h("slot", { key: '8b1ac4b7aa2cfe6baf02538bfef73f163c958030', name: "aside-left" })), h("div", { key: '14703cd1bf2a490371046412586ba863ade146c9', class: "stzh-pagecontent__content" }, h("slot", { key: '12ffb5f3807742bbbddd7e70ba94a44e9db91799' })))));
+        return (h(Host, { key: 'f726915c77fb50da570f9464c11423e5a8ccd89a' }, h("div", { key: 'd41812115b4a4acde596e6a0ab9f010cbd0a61cb', class: classes }, h("aside", { key: 'c66267f8d7d3cedc013a2ec928ed4c45c03255f8', class: "stzh-pagecontent__aside-left" }, h("div", { key: 'e4e90e268463053ebacfbce8ff4812a737fe7367', class: "stzh-pagecontent__anchornav" }, h("slot", { key: '08a0ca43c98fd32d7ef4585d7dcb5e4720f2865c', name: "anchornav" })), h("slot", { key: 'a423a6bd099c5891ef13aea3ff2ed09703b8b952', name: "aside-left" })), h("div", { key: '1cdcdf7717832b8d55634a4775f6f5ebda741126', class: "stzh-pagecontent__content" }, h("slot", { key: 'a67910955cf2adde8784169a5ff9bb3d3306871a' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -90,7 +90,7 @@ const StzhPagetitleHero = class {
             "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
             "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
         };
-        return (h(Host, { key: '4092fdf29e81da467a01ce14169ef0a236fa1e81' }, h("div", { key: 'a3a5fa6f25707cfc669ebc2068c7659b2ede3a75', class: classes }, h("div", { key: '44705be15cd02e32cd63089fec428ca89f274c4e', class: "stzh-pagetitle-hero__header" }, h("div", { key: '3368ece2fcb33a65b43ef1d69cac47bfabacd7a6', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: 'e9a10e3a4ea5f63929e4a5b1a36f5d1a70c00744', name: "back-link" })), h("div", { key: 'c469457f5348d0fbaa824bf440078320e8a32596', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: 'fc53ef3d0dcfde0d119e7027b4d9188b900c751c', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '9ae6ec6a9935a3aa4ffd8053c18664067d6680cb', name: "image" })), h("div", { key: '0f0f8af4c8f2112e2e6c3b93e21271e827366052', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '58645c0a1a06a5989dcbcceecff1257bf9f014ff', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '4c6eee91b82a84e6aebbf47bd7579a0ed38aac14', name: "tag" })), h("div", { key: '41d1ef58eab92d23dd56280f366372e1f314ad9d', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: '08158f41da5669da5cee4d65f66022220f7c7304', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: 'fcc6c8049f43836f7ed054225c0f32c50161c19c', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '281ce8413afb63bd550af21b02eeed4337c979f9', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '992301a3e044847bc796daa82ffe749c2e9055d0', name: "lead" }), h("div", { key: 'ffb40b5bf0fc473a8b1c3acdd9fe10c699fd5063', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+        return (h(Host, { key: '7131fb3579b554c83ed04bfe3adf7a334cea4a11' }, h("div", { key: 'ae93f4d178c03843cc294dc161b2f86745da9df5', class: classes }, h("div", { key: 'bfc41e3c232ba164871607a2545e767e212998d5', class: "stzh-pagetitle-hero__header" }, h("div", { key: 'b0f8eeff9b5a96b3351d0caa67d9c054486b21be', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: 'f0d6ac1f0ce21887f59a86b3972ed8ca5a5503b2', name: "back-link" })), h("div", { key: '4b1b3be34cb11c0d681ef1b0fde01d32102feb28', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: '4910095f7a2168ee467e366e743d8b345d2a1a03', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '7ba9ad2669e9c7e2e2107fc0af9794ad712f1dfa', name: "image" })), h("div", { key: '0149cf3acc30fcf1cc9a69893b64256789cbb365', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '6a333694de2e2afe32b9876495d3f06852f0f458', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: 'a2d242d2e4b05b43430ef358f1284a349750b5d6', name: "tag" })), h("div", { key: 'afddda21b9a8c4582fa9d4ce93bde060767182b1', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: 'b91e3e159a07f765be288379646506e080668a48', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: 'c1a796b7ca15da84d12da31c92c4248e76ad5c55', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '9c58abab4911b1ade0ecf535cd7766113e77dbf9', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '319faf271c067665cfe0101293250cce130bb656', name: "lead" }), h("div", { key: '2afffcdf300dae75622fa3da9cbd671a9a7411d9', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
     }
     get element() { return getElement(this); }
 };

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

@@ -73,7 +73,7 @@ const StzhPagetitleHome = class {
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (h(Host, { key: 'b638d153bcfb7b4fe87b87b29d7320583775bd46', "has-image": imageSlotUsed }, h("div", { key: '68999d5a6d6ec3470b2d7b90fa7240fb101f8972', class: classes }, h("div", { key: '01da18fe59c497bd145f9d6db14334fc518f9063', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '058edc2961c2f6f186711bdb0904d1998eb0e990', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '925bbfc859262fd6d2ff3ab2130d1e3d82f85b44', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: '6b26d4baaa957d85f8ff20d62380a18734fbbc6a', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '70101199a9e82da6a40dd921a7d961f82b1eb764', name: "image" }))), h("div", { key: 'b0110b6de4093b9f62993ccbf3fcea7adbaf23d9', class: "stzh-pagetitle-home__container" }, h("div", { key: '13050ea6e6d918ef44cf8a9aa7168d9b5619cace', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: 'c324c43fe755b7716d11b1734304656c464f2f50', class: "stzh-pagetitle-home__text" }, h("div", { key: '8368115a3c0629aec8ba5b427aac8fe1b11de5da', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'b03e94e3011103f27a3344e08d0889b2a8f3beba', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '693a60c6dab6698c2ff8c526e8635c2c7b69d371', name: "readspeaker" }))), h("div", { key: 'a4b9dcf0f9f62b21d5077cb070baeefe98a79613', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '42b95509e25a8496ebb19f6e20d48526dc981a41', name: "heading" })), h("div", { key: '9f115338a44493e71aab896f8610962e139cda0e', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: '298604d1fce9000561b0aeac82fa13e84700821f', name: "subheading" }))))))));
+        return (h(Host, { key: 'a6b5a908d562b6d6f595e92178b884c6c45f46f3', "has-image": imageSlotUsed }, h("div", { key: 'babedc3294a807918c5c8e66aaf9e6a497d0aa19', class: classes }, h("div", { key: 'a91f46ddc54b508eddaef1bd9b961e225f3b29bf', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '6fdd7ae67e9d3c37ea3b4c5abdbf83900f4ad724', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '85a80d1fc9c2b64fe884deb0ff4783a8875ba882', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: '06016f5efb8b69effaeccd47c672b0bf400bf652', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '30026bf3cf9fa3542d21163d75e30112296b1333', name: "image" }))), h("div", { key: '266b6330efdc3724a8f4055cf1117d51402b7a6d', class: "stzh-pagetitle-home__container" }, h("div", { key: '2bb3e41d69a23d18d9c75ff79b293ac17b93b49a', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '570d416be79b7d1b82772c10d07d0a709708f426', class: "stzh-pagetitle-home__text" }, h("div", { key: '04e39163a9bad8ba4ef5385a5f0503a72292d6a0', class: "stzh-pagetitle-home__meta" }, h("div", { key: '6318ed166a9502c9966fd9bc67c6ff764ccf0af1', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '3f1506b2d98b9ebf56734b77b0426a9cf01c4e50', name: "readspeaker" }))), h("div", { key: '85ae0b1b6aa706aff5f2cff5223b0c737f6723ce', class: "stzh-pagetitle-home__heading" }, h("slot", { key: 'b09c9b60fba35f97c4f481293ae05f849a543646', name: "heading" })), h("div", { key: '024e544ef0657fc490485aff1b745b54f034b070', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'c015ffb08dee3ee824a7745743cb66c6e28928b5', name: "subheading" }))))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -132,7 +132,7 @@ const StzhPagetitle = class {
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (h(Host, { key: 'dd1dae5e9d6238ffdac9b57bee9028c6ab293a9e' }, h("div", { key: '7692e22c130fb9d768d54c57e56aea0bf5f49e75', class: classes }, h("div", { key: '276b719825766581a9310b2da3f2a8da24fc3ca8', class: "stzh-pagetitle__container" }, h("div", { key: '4edbf3c08ace8896ad635561e564fdfcfe9b0636', class: "stzh-pagetitle__wrapper" }, h("div", { key: 'b0d87b0ff4c587809434424dbe4b5ea820486849', class: "stzh-pagetitle__text" }, h("div", { key: '644c747a9faf9dec771338668bf8b1400ca0f22b', class: "stzh-pagetitle__meta" }, h("div", { key: '308d1af6ca44ed4e529f7b3f2c842c3cc5b433a8', class: "stzh-pagetitle__tag" }, h("slot", { key: '45d323f77a910db3c3333d71a4fca19e9df09de2', name: "tag" })), h("div", { key: '8c5f81a671e670b450efc5c689cba18b4146be34', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '53ca3e154eba02986ebb6a6243b01cdf211ec8e0', name: "readspeaker" }))), this.dateline && h("div", { key: '4c75ea7565d6d7ace87e4d315c21eaf2afad2ee4', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: 'a26fc81a10690ac96d14dd298a195861001feeb4', class: "stzh-pagetitle__heading" }, h("slot", { key: '187a4b8f2c292263c9176fea2fe421d78f43aeeb', name: "heading" })), h("div", { key: '187da73cdbbc557ad0609f83fee27a982b400d90', class: "stzh-pagetitle__lead" }, h("slot", { key: '0209e7b1c9431237292c7d62db87c95f58f89855', name: "lead" }))), h("div", { key: '8e9b473d1b013b1cef1b0df537612568cf0849e8', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '3d360e87e41d8ad5f8cdd292ca4d6d971af1c3fb', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '77fe51987394ce4d61e4b809bf3c1ed3e0231dcf', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '74b4a5695c7fcd3f9dbdd11d2e6eae6f9cd395d6', name: "image" }))), h("div", { key: '70f64853370f205febf986d7b0f405aa5d635371', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '8e45414bd0ef9b94029098bd2998ea3c6fb0c64d', name: "disturber" })))))));
+        return (h(Host, { key: '44f334e63ff5db5a9a1d97e849da679dcc31839b' }, h("div", { key: '30456eb5fd2763ea488a1dafc7b2aee3e0ed4377', class: classes }, h("div", { key: 'f01d7ffba4f3347a13d85be74f41b37daa6bcaec', class: "stzh-pagetitle__container" }, h("div", { key: 'cb24305da741c280db8f91c77e61cbf51a7c1bf8', class: "stzh-pagetitle__wrapper" }, h("div", { key: '37ba4fbeea5c5a05b404cdf7985f8c813bea71a8', class: "stzh-pagetitle__text" }, h("div", { key: '073ba56929ce3463d71050652ea1462c685e27cf', class: "stzh-pagetitle__meta" }, h("div", { key: '2ffd8a096f4b83604499bd7f2ec0d7a854663647', class: "stzh-pagetitle__tag" }, h("slot", { key: 'e46fe24b23852c524aa8022892451835c1ffa798', name: "tag" })), h("div", { key: '9e1427369474667936816c937c05460db2ca9e32', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '381371798764e856e046768e2e8400e9721bb3b9', name: "readspeaker" }))), this.dateline && h("div", { key: 'd506066275fcd82211fe691d6b679b5ba93afe15', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '5d9808dd2aebe14646a7b550cca1dcc69e1a61f1', class: "stzh-pagetitle__heading" }, h("slot", { key: 'a466725b4361d869036486ad2ecdb461a53f6be5', name: "heading" })), h("div", { key: '09c87ce1f8caba89b916e122fdb033018040254c', class: "stzh-pagetitle__lead" }, h("slot", { key: 'df1436e56e97f206efa49f846e714db15e56f1b7', name: "lead" }))), h("div", { key: '3481dfdd6294adae1b326882b5b2661548cbfaca', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: 'bfee946466a4e6244ca71f775151929d1a225a4a', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '5bb505e0c6fb23c54cca77cdd4bb80c96388d6ad', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: 'c45840b576424d1b0a6185f3fb48c3ecf06f5884', name: "image" }))), h("div", { key: '2358fb35eda7fa73e9d0ee107bb9bed919e6297a', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '89902de8265bc604db44feb9f7e6a1068253c495', name: "disturber" })))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -440,9 +440,9 @@ const StzhPanorama = class {
             text: imageTitle,
         }));
         const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-        return (h(Host, { key: '0239b3952066af59f6041b26236db080a23ccb0a' }, h("div", { key: '0b872046692908dfc813c6f1f800fda8af7d1bea', class: classes }, h("stzh-figure", { key: 'bb84231fee7fea352a8b7962c3d017b8d686e84d', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: 'fdaeae37626d47f8d0ce8cb1a76898ffd3210d7f' }, h("div", { key: '79c759aa7bd07042715f4f5e756654650a3a3a8e', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'f3dd8596b0c6711060d10e1f9d35e903406d7fbf', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '8cb5beee664516811443042edf284e063186fa89', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: 'ec84da9ea267914c07820b2a7d70135a4a760a67', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: '6d1e159ac1458020e7f3cea59cf2714247b0a0ae', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: '7b3453f65caa37af5e6a227209a2043f4c65caaf' }, h("stzh-button", { key: 'af6697075c085f158b92aebbe3839ca7d4ec99a6', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: '4157878c68cacafd246b6eaf01fe27628cf43f7f', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '816285cf6b9009ac9a8d8b2f0e3b6f96172ee297', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: 'f4058fff62b8f610fdd46437e35cfbbbfc39ed87', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '92f7651f9dfc74c3dd878b8076a18eb11aff67b8', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: '478529431ea9d25f2c930766d0498556e18dc864', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: 'baa80c699ba238e8f3fbce666ac8e7aa3f555b90', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        return (h(Host, { key: 'a0e4205ae7cfe0ae2d38d0ce8ca9a4154b92d8bc' }, h("div", { key: '4020962ed7f84328e0d690eacd57dc171200a3e7', class: classes }, h("stzh-figure", { key: '05e64014b90947d214220788d84007c54ed62533', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '435c970233fa3ff709809ccdabdaba41203a4ff6' }, h("div", { key: '7f3cd220acf42b9201a1e3ddf18946279043fd8d', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'f6466f7338384f4753d674dde7b5a00eb82ef324', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: 'b6e11adab5c9cad8e1aad1cb6aff94acdc733ce4', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: 'ab59d2ea571d023918e5458bb3cfa5dfe5deffd2', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: 'bbfd108408228c711d2306eb149fd09bc1304d14', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: 'eb4ebf27d617f8fec09c7e6e8059eb7feeff9329' }, h("stzh-button", { key: '579d432b9f723f6172e886cb27c3aa3e1ce6f190', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: '1bd7d36f93ddc69508e368a00bf088b49006f220', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: 'c1957ca01278ecb84a6bf4438c902adc1777851e', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: '8f3d2ca0f3ced59550df329582dc1d3d22e07994', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: 'fb7b0ffd613af7a39ba5263c6e279f9824e44647', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: '21e1118a8845c616ed8b45d8b58516cf06a6dfb0', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: '04ab232818d4976cb1ff4904596e4e765ab8c3a4', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
                 ? this.localization.stopOrientation
-                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '19f6f2154750c9efabcb9edc918b40282766babb', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: 'f14391578d80d071ea38c7c7f5c2e983e2eacaae', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
                 ? this.localization.disableFullscreenLabel
                 : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
     }

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

@@ -50,7 +50,7 @@ const StzhPiContentNavigation = class {
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (h(Host, { key: 'c42abe95e0d73723d1f0cf2aa751973a5a583c62', "has-lead": hasLead }, h("article", { key: '879c274c2073ea1ce0c5b6017233b610365d7aa2', class: classes, "aria-label": this.heading, role: "listitem" }, 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 }, h("div", { key: 'aeb3927354ce525cbe6edee3ae7226409de22a7e', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: 'da9d6a69d53465d9171c7c6ab0e96bd1dc985024', ratio: "2:1" }, h("slot", { key: 'dfd6406a810fd11a13bc0f2670df982e33096103', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '4399f9261a7546906257c928c511aeac337feda2', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: 'cc0310c4e4ba422fc5f7a171206aa7902bea2052', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '0de77793c29c75685a56e073b15ff5b2b84321e9', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: '6d5307769334e8f1da198b5d375a4141aae31b2a', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '89a95c1f263261738f1578db407e9121f3807775', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (h(Host, { key: '76c5d185c4b95277345a7553e2fb2624b2381c73', "has-lead": hasLead }, h("article", { key: 'c6951fc908a7c16cd6664e74dd895339628c96b4', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: 'f5124cbc29d5e191d30410d41c21c575dfb0b7f5', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: '6ffc74e56bc15e97d56290b67dcad105fe37464d', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: 'd1f29fd45d125151bf697b5a69ea2a804823dc24', ratio: "2:1" }, h("slot", { key: 'cccf70fe733b2a71813fd04fedcf8f8120d47049', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '4f060613a6dc993ffebe15c33752bdb118418e21', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: 'dc35588c012f3fc1736ae8fbb9b5c01f19587db8', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '4157f021b2f12c6f36a3de1d71155704c73689f3', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: '2d1949deebd2556d9994df1d8d372aebe44135e7', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: 'd24c8c04a36f75c80c15e7801e65559820a0b587', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -259,7 +259,7 @@ const StzhPiMenu = class {
         // Screens medium, large and ultra
         const wideScreens = `${this.entangledMenuSize}px`;
         const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;
-        return (h(Host, { key: '8d814a8e0e79688c18cf252a97027944664eaeee', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'e4048c92028b18c3a6e2bd0a33200b80cbf63bef', class: "stzh-pi-menu-positioner" }, h("div", { key: '58cba2e20480c28bea85e7268370aeb686785f2f', class: classes, style: { width: menuWidth } }, h("div", { key: '427a08f026aa5f274e6358e44e21d01754c88322', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '9e3b71a442ad935930fa47961dfcce387220dd27', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, 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 }, h("span", { key: 'd907834e673e9838d75120b239f3bba9574cbf43', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: 'a0aee001981739d866c75673f4e9739b299aa9f9', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), 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" }, h("div", { key: '7d601e993e68d909bada6b7f73690b4b544d5f94', class: "stzh-pi-menu__content-inner" }, h("nav", { key: '16f78af2613d5d627ae425012e8ace36788d9c37', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: '861ad618e88385525ce7455e3c3c3eeeb085ca97', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '3c57f05aa34ab8c0900c41f61beba7ad28dca17e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: 'fb870cbd1098cab33cdcd3a641146cd591bde3bc', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: 'f4073640a70396980e8d3a3305dbd58858cc7ead', class: "stzh-pi-menu__button-text" }, h("span", { key: '90c703747d6ac6fb8849bfb207a2c1fffe660cf5', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: '21cdf06321e37b291f4c32fda90c75b86d918ffe', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (h(Host, { key: '19c9245b7898158309b63e3cecbb6322a9494567', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '80bf1fd91b550fcfd4b1894020957f890d67520f', class: "stzh-pi-menu-positioner" }, h("div", { key: '44b07a6af2535d75f2aee4f64edae2f05420774f', class: classes, style: { width: menuWidth } }, h("div", { key: '5ebcdd0b185e4be3b9e86bc7e83ce2087b09dabb', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '075ce52b2106e0df7eac5414a51690b049f982c7', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: 'b1a7f0497f7e973848e8fe4d337d2f7d5b13b28f', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '7beb1052c937d6c7a536be8bd92f8cc536cc9018', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: '9901049180363da950c14a75ad44db0360cc4e2f', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: 'd0ebd8482b70224040fcc19a3693026c95e60579', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'fd76f69718f44ca704754e0c5ebed8309ea9f2f4', class: "stzh-pi-menu__content-inner" }, h("nav", { key: 'ebc0138ea3372635a5c2538050dbe235e41735d8', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: '778afe5da2ce59a0a72456c44f7be248a097c707', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '6fc94fcfb7a6711928e624f854b77bd5927fc24e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: '0347330e191eda5dda471f6e4379b254edc5cab2', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: 'a42ee43aa87c160023605933428c75c0072fe691', class: "stzh-pi-menu__button-text" }, h("span", { key: '53106545d12e49cde15a24706f532bdfd179e8b3', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: 'e638fc640654dc3cb1223a40c34cfc7b8191e19a', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -59,7 +59,7 @@ const StzhPiPagetitle = class {
             "stzh-pi-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
         };
-        return (h(Host, { key: 'bc1447bd906371534607883029d0fdafaac84865', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: '2976ef10ec0a80e25447a706948df5e83bce96e4', class: classes }, h("div", { key: 'a643484b32794710eb3209eb30a464f2e6abd4f5', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: 'c7fb03253283621f30d744fd7b42bf88a7650aa7', class: "stzh-pi-pagetitle__hero" }, h("div", { key: '276a214f03d357f18601abb6573fd99fd492a89a', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: '1406af1abed10f1d4f19a25ca4889fd09a5dd594', name: "breadcrumb" })), h("div", { key: 'c02fd00abc4bb83333a392bcb6594e31a45e4733', class: "stzh-pi-pagetitle__meta" }, h("div", { key: '323c574c1b38891b9aea152fc0fde085ce645189', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: '023779d61f0f1726c7740726a5d5ad96db24837a', name: "readspeaker" }))), h("div", { key: 'a04c33680ba7bec7cd34b7e11d14e2761f75cf1e', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: '242c2ba331c2bd373970d3a36225acfa7ce55ca8', name: "dateline" })), h("div", { key: '2e4ea0b21f4ff9479b9a6c4ada9a355283fe3847', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: 'bd4a74fbc65b05564abf7a0b88eee4c2ca523dbd', name: "heading" })))), h("div", { key: 'ee24ff47efc29d6fe1345ef7bfd08c697ccdcebb', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: 'db6cb2a05c58b1189832d350160e943c4fb228a9', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: 'bae5a9d6aa541bbd8c978b550f22bbecf92caab2', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: '64614f49e06acaa037f233a4b4361f5d0618f950', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: 'dbc9294e0a1ed5d65e2998aa1c956fed8355bf0b', name: "menu" })))), imageSlotUsed && (h("div", { key: '46cc40114e3d085f261e1244b2efe64fdc73073e', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: '2448c75b847ab9f4729aba5681c30bac615c6f9f', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '01dcebc68d01b849f86073885564df8fb1ffdfcb', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: '2b668c52975933f2294e6f3c87bcae85219d6044', name: "image" })))))), menuSlotUsed && (h("div", { key: 'a989167bc3a76e160b5cde9c06871948b65d0042', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: 'bae28bb8353549eb9c4b4b9b3ce65aae911f07ca', name: "lead" }))))), !menuSlotUsed && (h("div", { key: '47657439842999b021bc4158c19b755f21ae8752', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: '5358eb381605b433ffd56793bd719ff3d1be9746', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: '09dd20699f06cd5a77356f00d6db001264596f7c', name: "lead" })))), hasArticleInfo && (h("div", { key: '6087fc056609840d8f1ee629379c8da77440d035', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: 'ba08bb1cc82b8b13fb385a5b823ccf45d43c4252', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: '1158c090072dc2090273d967e7bf2aaa22610272', class: "stzh-pi-pagetitle__article-info-holder" }, this.author && h("p", { key: 'd7bb67b16ad7404da9cb1b49df4921a681638fd1', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: '615e3defa175315b194e2ebe8333f6d856327b24', class: "stzh-pi-pagetitle__date" }, this.date), h("slot", { key: '413b9e6f73c14b62ba6d752e644e0f928be4d7ca', name: "content" }))))))));
+        return (h(Host, { key: '7ea11c48b8c57d36a37c2a6d74bbf9a2fc9d904e', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: 'c9d1cc9761d0a35b9fc66baf409813c0af435685', class: classes }, h("div", { key: 'e32cb331b8e6f03381bb8b5ca33af86a992edf26', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: '37c4e72c7eb3b4e2ec1a64ace15c4d47b0f6e43a', class: "stzh-pi-pagetitle__hero" }, h("div", { key: 'f285333ba0eff3875613a2b890c36196f99ee12c', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: 'fd81c5e3e49816288ec9d822a86950c5702964a5', name: "breadcrumb" })), h("div", { key: '935d4419958984a2d91ed7db6d37a5beca568598', class: "stzh-pi-pagetitle__meta" }, h("div", { key: '328d4c6994b315da26f3f7470d741cffdbada90d', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: '2ead52ad42dabc733bfa67b3e743bc790c2b50eb', name: "readspeaker" }))), h("div", { key: '4df5e3871f9114a38dccc6739304df280f6cd7d4', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: '4576c4f11268a8081b71a8e776c3527f8cb94571', name: "dateline" })), h("div", { key: '24d4ef15a376d07ad44a95e38ea83e86e3be29cd', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: '5530b2846ff28d8568c6781279d9671ab17e1601', name: "heading" })))), h("div", { key: '9dbfc7fac99bb4b89eef7887296648392e099109', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: 'ab73e1d6f13e2098309bc03454657e9a9b189f4a', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: '4a28eadc08311050cb0f6a591c01cf91c94dfdc1', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: '566cf88bd625035d8060e7de23d1bfaf0858d1f7', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: '837e00551eb0e0208ec9ab979a3cf090af734b5a', name: "menu" })))), imageSlotUsed && (h("div", { key: '2f4be9e6df7f32ca34dff53a225f859905df6339', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: 'c7c913468286788ec37f5be9a03e5c8aa0870b9c', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '0cff56d0e99705c567589db49931ceff94b6ae5f', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: 'd5288b9554264c8d976188ad61898eaf4ae284ed', name: "image" })))))), menuSlotUsed && (h("div", { key: 'ba77a201bef9d6a44fae462cc30bf0d35a1e74db', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: 'c388a5a185ff83d98fb1e8400b4ffa6f0693e1bb', name: "lead" }))))), !menuSlotUsed && (h("div", { key: 'f2d78346bce95f3271cb386d3e03bbe0ceba8eac', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: '647bcc87e9fbfb359bc11b7b7b1b080f8a914b78', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: '5c03b625f0282c93c4e32f24996caa0bfd12db78', name: "lead" })))), h("div", { key: '713935d6e3d7ed9ce9ec93fc551e37c820d043e1', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: 'd0103129df581d0b516f74556d26c0487cf17c2e', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: '51b9b85aca3e2158ba29366dcc9497ff24da6781', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (h("div", { key: 'd1b26da604f2c60a8ca6d4a321cb113e610fd1c7' }, this.author && h("p", { key: '8fc605d7235b143d4fc6eee854a32ba493b2b8f4', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: '6e9d57f0b109d837b850db8733eb5271af54ef81', class: "stzh-pi-pagetitle__date" }, this.date))), h("slot", { key: 'b87768ccb4752a0027585601b121f1948d9d31e4', name: "content" })))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"stzh-pi-pagetitle.entry.js","mappings":"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","names":[],"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.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,uh0BAAuh0B,CAAC;AACnj0B,8BAAe,kBAAkB;;MCmBpB,eAAe;;;QAelB,SAAI,GAAG;YACb,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,6DAA6D,CAAC,CAAC;YAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;YAC/F,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC;YAEzF,IAAI,OAAO,EAAE;gBACX,cAAc,CAAC,OAAO,EAAE;oBACtB,KAAK,EAAE,MAAM;oBACb,KAAK,EAAE,GAAG;iBACe,CAAC,CAAC;aAC9B;YAED,IAAI,iBAAiB,EAAE;gBACrB,cAAc,CAAC,iBAAiB,EAAE;oBAChC,OAAO,EAAE,gBAAgB;oBACzB,aAAa,EAAE,IAAI;oBACnB,cAAc,EAAE,IAAI;oBACpB,IAAI,EAAE,OAAO;oBACb,UAAU,EAAE,MAAM;oBAClB,eAAe,EAAE,GAAG;iBACI,CAAC,CAAC;aAC7B;YAED,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,IAAI;iBACY,CAAC,CAAC;aAC3B,CAAC,CAAC;SACJ,CAAC;qBAzC8C,CAAC;8BAGE,KAAK;sBAGd,EAAE;oBAGJ,EAAE;;IAkC1C,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACnD,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QACjE,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAEpD,MAAM,OAAO,GAAG;YACd,mBAAmB,EAAE,IAAI;YACzB,8BAA8B,EAAE,aAAa;YAC7C,iCAAiC,EAAE,CAAC,aAAa;YACjD,6BAA6B,EAAE,YAAY;YAC3C,6BAA6B,EAAE,mBAAmB;YAClD,6BAA6B,EAAE,YAAY;YAC3C,qCAAqC,EAAE,cAAc;YACrD,4BAA4B,EAAE,IAAI,CAAC,cAAc;YACjD,CAAC,4BAA4B,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SACzD,CAAC;QAEF,QACE,EAAC,IAAI,iEAAW,YAAY,sBAAoB,cAAc,IAC5D,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EAEN,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,EAEN,4DAAK,KAAK,EAAC,6BAA6B,IACtC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EAEN,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN,4DAAK,KAAK,EAAC,8CAA8C,IACvD,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,yBAAyB,IACjC,YAAY,KACX,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CACG,EAEL,aAAa,KACZ,4DAAK,KAAK,EAAC,0BAA0B,IAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAC9B,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,mEAAY,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAC,0BAA0B,IAC7E,6DAAM,IAAI,EAAE,OAAO,GAAS,CACjB,CACT,CACP,CACG,CACP,EAEA,YAAY,KACX,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CACG,CACF,EAEL,CAAC,YAAY,KACZ,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACP,EAED,4DAAK,KAAK,EAAC,yCAAyC,IAClD,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,wCAAwC,IAChD,cAAc,KACb,8DACG,IAAI,CAAC,MAAM,IAAI,0DAAG,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,MAAM,CAAK,EACrE,IAAI,CAAC,IAAI,IAAI,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,IAAI,CAAK,CAC5D,CACP,EACD,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":[],"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/esm/stzh-pi-quote.entry.js

@@ -13,7 +13,7 @@ const StzhPiQuote = class {
         const classes = {
             "stzh-pi-quote": true,
         };
-        return (h(Host, { key: '5fd70d77731728318c9b9653b9bdc0796f7fc8a0' }, h("div", { key: '6e142cb6d6d2a4a4f78aa312bdd8c9d4968e959e', class: classes }, h("blockquote", { key: '69dc187d2d494dad5294299456920fd6ec7933c3', class: "stzh-pi-quote__content" }, h("p", { key: '5ae1f9a4d0df0d8285a1769729c419c640b029b1', class: "stzh-pi-quote__text" }, this.text), this.author && h("cite", { key: '0c251dc121558bf2ee8bed7a52d118df740eacae', class: "stzh-pi-quote__author" }, this.author)))));
+        return (h(Host, { key: '213692370897716d960e3dfbfa16142c6468bb6a' }, h("div", { key: '6fdc12ea34841aff0da66ff40f58812a94fa516d', class: classes }, h("blockquote", { key: '0b812d842316c3e83c1b44efc9c710bede61bcdd', class: "stzh-pi-quote__content" }, h("p", { key: '89ecfec809044b3cea057a017643ac6b7f04b26b', class: "stzh-pi-quote__text" }, this.text), this.author && h("cite", { key: '05f63895d5f308ec94f5528133a6cce6bd00ee66', class: "stzh-pi-quote__author" }, this.author)))));
     }
     get element() { return getElement(this); }
 };

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

@@ -0,0 +1,64 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d8813b10.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(\n    --stzh-pi-teaser-layout-item-image-background-color,\n    var(--stzh-color-coolgrey10)\n  );\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(\n      --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(\n      --stzh-pi-teaser-layout-item-grid-template-areas,\n      \"image image image image image image image image\"\n        \"text text text text text text text text\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-grid-template-areas,\n      \"image image image image image image image image image image image image\"\n        \"text text text text text text text text text text text text\"\n    );\n  }\n}\n[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(\n      --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(\n      --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(\n      --stzh-pi-teaser-layout-item-grid-template-areas,\n      \"text text text text text text image image image image image image\"\n    );\n  }\n}\n.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:549px) {\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: 550px) and (max-height: 639px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 50cqh 50cqh;\n  }\n}\n@container (min-height: 640px) 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) {
+        registerInstance(this, hostRef);
+        this.stzhClick = 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 (h("div", { class: "stzh-pi-teaser-layout-item__title-wrapper" }, h(Heading, { class: "stzh-pi-teaser-layout-item__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser-layout-item__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
+    }
+    render() {
+        const hasLead = !!this.lead;
+        console.log("imageSrc: ", this.imageSrc, " & imagePosition: ", this.imagePosition);
+        const hasImage = !!this.imageSrc && !!this.imagePosition;
+        console.log("hasImage: ", hasImage);
+        const displayLead = this.lead;
+        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
+        // : "";
+        const classes = {
+            "stzh-pi-teaser-layout-item": true,
+            "stzh-pi-teaser-layout-item--has-lead": hasLead,
+            "stzh-pi-teaser-layout-item--has-image": hasImage,
+        };
+        return (h(Host, { key: '22c18d7fd9de7d75ce2a33f1bf1c2b9ba155b07f', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: 'c77072a09b6eb79691f42ec00d8e822345791aff', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '5a52e0b497bcbb76b4a11a998e895a096b631161', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '621d1fd651d3420c80c56989962198bec015605c', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '05c14742afec614a534d48a771539cdbd7d128d4', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: 'a6ee0da58d7a855970b5b5619b432b075b893934', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: '181a0e14237977cd6902ec956260e0ea336f9108', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '406a47bc1425f5052bc7bb99309c9279bd05a262', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: '9d2397fd768f3b36985345b699c92fac2a80d87c', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: '38ab554072180402070a63884889f965abbe446c', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
+    }
+    get element() { return getElement(this); }
+};
+StzhPiTeaserLayoutItem.style = StzhPiTeaserLayoutItemStyle0;
+
+export { StzhPiTeaserLayoutItem as stzh_pi_teaser_layout_item };
+
+//# sourceMappingURL=stzh-pi-teaser-layout-item.entry.js.map

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

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