npm - @oiz/stzh-components - Versions diffs - 4.0.0-beta3 → 4.0.0 - Mend

@oiz/stzh-components 4.0.0-beta3 → 4.0.0

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

Files changed (459) hide show

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

@@ -254,7 +254,7 @@ const StzhTag = class {
         };
         const Tag = this.nonInteractive ? "div" :
             this.href ? "a" : "button";
-        return (h(Host, { key: '41da409f6ae68be3e8b5a44309d482daa6c60ffb', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'af47d8c918967e470688af50a45dbf958cad38b1', class: classes }, this.href ?
+        return (h(Host, { key: 'b6e23aab89a74ab5606a5c1a8eec451565fd4528', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '52a3498a069f6f882178498b0d59d707fa9a436c', class: classes }, this.href ?
             h(Tag, { ref: (el) => (this.tag = el), class: {
                     "stzh-tag__button": true,
                     "is-button": !this.nonInteractive && !this.href,

package/dist/esm/stzh-card-searchresult.entry.js CHANGED Viewed

@@ -129,7 +129,7 @@ const StzhCardSearchresult = class {
         };
         const Heading = `h${this.headingLevel}`;
         const HeadingLink = this.href ? 'a' : 'div';
-        return (h(Host, { key: '34224c79326f378eabbb85c00a157ed9b5fdc6e9', "has-image": hasImage }, h("article", { key: 'dcffabbeccd24ec0d887aa7c0371dc82060a10da', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: '8409f1c08dc363ec54920441f9ab15f904bae48c', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: 'd99c82f2447fb0f06f40e45d20258190d0d12efd', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: 'df332123916b25b18943b65f9b29e292d8111645', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: '14db75611e2b86cf93dbbb777a4035d2c244ab16', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: '44bf45bd348582e8011be3740a688daf9289b5f1', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: '42b418bcc2da58ffc70ed78652121ba9f462e390', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: '446d6655466dadbdabe7b972d5a9e8fdf564d6b1', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: '6f2c3af2dd6f8ceb27c25c7401e4a0f8571a059a', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: '53b27ed9aa01615b6cf091e1400ee6f8afd86c3b', class: "stzh-card-searchresult__event-date" }, h("span", { key: 'e6c03b3107872426d58192f8c6e1537db721eb4f' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: '367ce045621f09563f902ca643b06444a1f302f8' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && h("div", { key: 'cdf57d0a6518bcbe4c4486d26a85e09b39a92469', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '1438ee59b7e62db62aca1fabe7346edb75d48763', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: '253be03750f30bc82b103b2251c7bab11e453251', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: 'fb2ddfde0dea58a365202155aee466092592ed3a', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: 'c07eb82e73208ed99981b228a31406d775dac1ae', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: 'f1abc93e3957a2b8bf95cf63026ed88c2002fe7a', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { key: '93c53cc71d46bc8fa3be1543a2636411d23c607a', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: 'f6c8bc9f094169b4e820a1239cf135cb999fe91a', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: 'f75abb1cb7a1147922456ce1c296b35d5b5d619f', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: 'd0a7405afc4cdf067f21c234139029ba241d30c9', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: '2b825d9432c148c2e2d57a83f40b0f72082f35d0', ratio: "21:9", "ratio-small": "1:1", style: { '--placeholder-image-color': 'var(--placeholder-image-color)' } }, h("div", { key: '56375cc2c8bbff46ce270e407429ee48263b3d97', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '222e90c70804e3f75dcb4445e2cebd9c783a1ae4', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: '7c4902859c04d738e86b24c5d78cd9eebd0093a1', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: '5c66ced7b09ae2d573c32cc9f6db0eeb4eeff34f', class: "stzh-card-searchresult__meta" }, h("div", { key: 'bff92d97828b95983066cebc9c5e5e4d48596ef3', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: 'ea2e02d9ba2653867f7922e30b544e22242ebf59', class: "stzh-card-searchresult__download" }, h("div", { key: '2c00573c9830dc567958677b8029254f115aec44', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: 'afed7cb2e7ad87511fbd076c4d1ad91da602a8a5', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: 'e3d07922ca362ea8c1b10e1308116a942cfa1e9a', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), h("div", { key: 'a7f48919e86378152053079d6f5fe134fdcf5ba8', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: '995eabb909ebae5f07264b9e16e48c17615a77dc', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
+        return (h(Host, { key: '34224c79326f378eabbb85c00a157ed9b5fdc6e9', "has-image": hasImage }, h("article", { key: 'dcffabbeccd24ec0d887aa7c0371dc82060a10da', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: '8409f1c08dc363ec54920441f9ab15f904bae48c', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: 'd99c82f2447fb0f06f40e45d20258190d0d12efd', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: 'df332123916b25b18943b65f9b29e292d8111645', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: '14db75611e2b86cf93dbbb777a4035d2c244ab16', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: '44bf45bd348582e8011be3740a688daf9289b5f1', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: '42b418bcc2da58ffc70ed78652121ba9f462e390', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: '446d6655466dadbdabe7b972d5a9e8fdf564d6b1', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: '6f2c3af2dd6f8ceb27c25c7401e4a0f8571a059a', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: '53b27ed9aa01615b6cf091e1400ee6f8afd86c3b', class: "stzh-card-searchresult__event-date" }, h("span", { key: 'e6c03b3107872426d58192f8c6e1537db721eb4f' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: '367ce045621f09563f902ca643b06444a1f302f8' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && h("div", { key: 'cdf57d0a6518bcbe4c4486d26a85e09b39a92469', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '1438ee59b7e62db62aca1fabe7346edb75d48763', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: '253be03750f30bc82b103b2251c7bab11e453251', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: 'fb2ddfde0dea58a365202155aee466092592ed3a', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: 'c07eb82e73208ed99981b228a31406d775dac1ae', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: 'f1abc93e3957a2b8bf95cf63026ed88c2002fe7a', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { key: '93c53cc71d46bc8fa3be1543a2636411d23c607a', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: 'f6c8bc9f094169b4e820a1239cf135cb999fe91a', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: 'f75abb1cb7a1147922456ce1c296b35d5b5d619f', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: 'd0a7405afc4cdf067f21c234139029ba241d30c9', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: 'd3e08fe0312c01aa71f5490a86bf835f56064a6d', ratio: "21:9", "ratio-small": "1:1" }, h("div", { key: '5a7ef904cfca2b09d18a401334e627cd9e5c0273', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '483570455108815e1332be44951f12d9a9567f0e', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: 'd661557b8bedaa4c5b8bd6c286e9e0c5a6b85d84', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: '1a3e68faf44610fe00f0b2d141d5acdaca4bff95', class: "stzh-card-searchresult__meta" }, h("div", { key: 'afcdc97d45b35aeaadb62b19f6e70a63a5a8edcd', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '0ea455e557d873d463ecbbe73fb7219709f28cb6', class: "stzh-card-searchresult__download" }, h("div", { key: '9c13beea9c7c6dfd159d42f28993002beb8df07d', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: '3f540c28baf71229b235d050a459d73ea0eeb631', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: 'e25b66c12bb8a82aebd48cf47b90d604aa9f82bf', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), h("div", { key: '63a44a6bb73647cdf455c5b93c30c3adb7fd69a4', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: '05ad47932539c8d0389bbe71555442df2e744f65', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-card-searchresult.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-card-searchresult.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":["/*\n @prop --placeholder-image-color: color of placeholder image (svg)\n /\n:host {\n --service-background-color: #{$colorSecondary30};\n --service-color: #{$colorPrimary70};\n --placeholder-image-color: #{$colorGrey30};\n\n --grid-template-areas: \"heading\" \"description\" \"meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas: \"image\" \"heading\" \"description\" \"meta\";\n --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n @include mq($from: small) {\n --grid-template-areas: \"heading image\" \"description image\" \"meta image\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n }\n }\n\n &[has-image][image-position=\"right\"] {\n @include mq($to: small) {\n --grid-template-areas: \"heading image\" \"description description\" \"meta meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n }\n }\n}\n\n.stzh-card-searchresult {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta-wrapper {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &--has-description-wrapper &__description-wrapper,\n &__meta-wrapper {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xlarge');\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__image-placeholder {\n / Apply color since the placeholder svg has fill \"currentColor\" /\n color: var(--placeholder-image-color);\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta-wrapper {\n grid-area: meta;\n }\n\n &__meta {\n overflow: hidden;\n }\n\n &__download {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n &__download-heading {\n color: $colorPrimary70;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n }\n\n &__tag,\n &__topic,\n &__service,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__service,\n &__topic {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: $colorSecondary30;\n color: $colorPrimary70;\n padding: space('xsmall') space('medium');\n text-align: center;\n\n @include mq($from: small) {\n min-width: 180px;\n }\n }\n\n &__service {\n background-color: var(--service-background-color);\n color: var(--service-color);\n }\n\n &__dateline {\n @include fontSize('micro');\n margin-bottom: space('small');\n }\n\n &__heading {\n margin-top: 0;\n margin-bottom: space('xsmall');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontCurve('p1');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n color: $colorBlack;\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n / Has link /\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag {\n --color: #{$colorSecondary60};\n }\n\n / Has breadcrumb /\n\n &--has-breadcrumb &__heading-wrapper {\n margin-top: space('xlarge');\n }\n\n / Has tag /\n\n &--has-tag &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has topic or service /\n\n &--has-service &__heading-wrapper,\n &--has-topic &__heading-wrapper {\n margin-top: space('xxxxlarge');\n }\n\n &--has-service#{&}--has-image-right &__heading-wrapper,\n &--has-topic#{&}--has-image-right &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has image (default) /\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n @include mq($to: small) {\n margin-top: space('small');\n }\n }\n\n / Has image right /\n\n &--has-image-right &__image {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n }\n }\n\n &--has-image-right &__service,\n &--has-image-right &__topic {\n position: static;\n }\n\n / Has description wrapper, meta or download /\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n\n / Hyphens /\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, Watch } from '@stencil/core';\n\nimport {\n StzhBreadcrumbItem,\n StzhCardSearchresultClickEvent,\n StzhDatalistItemEntry,\n StzhLocaleAdapter,\n StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/utils';\nimport PlaceholderImage from './assets/placeholder-image.svg';\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n /\n@Component({\n tag: 'stzh-card-searchresult',\n styleUrl: 'stzh-card-searchresult.scss',\n scoped: true,\n})\nexport class StzhCardSearchresult {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\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 /* Download attribute (if href is used) /\n @Prop() download: 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 /* Heading (alternative for heading slot) /\n @Prop() heading: string = '';\n\n /* Heading level /\n @Prop() headingLevel: '1' \| '2' \| '3' \| '4' = '3';\n\n /* Description text (alternative for description slot) /\n @Prop() description: string = '';\n\n /* Tag /\n @Prop() tag: string;\n\n /* Topic /\n @Prop() topic: string;\n\n /* Service /\n @Prop() service: string;\n\n /* Dateline /\n @Prop() dateline: string;\n\n /* Meta /\n @Prop() meta: string[] \| string;\n private _meta: string[];\n\n /* Breadcrumb items /\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] \| string;\n\n /* Datalist items /\n @Prop() datalistItems: StzhDatalistItemEntry[] \| string = [];\n\n /* Event start date /\n @Prop() eventDateStart: Date \| string;\n\n /* Event start date /\n @Prop() eventDateEnd: Date \| string;\n\n /* Event location /\n @Prop() eventLocation: string;\n\n /* Enable placeholder image if image slot not used /\n @Prop() placeholderImageEnabled: boolean = false;\n\n /* Image position /\n @Prop({ reflect: true }) imagePosition: 'default' \| 'right' = 'default';\n\n /* Download heading /\n @Prop() downloadHeading: string;\n\n /* Download meta /\n @Prop() downloadMeta: string[] \| string;\n private _downloadMeta: string[];\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n @Watch('meta')\n metaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === 'string') {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch('downloadMeta')\n downloadMetaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === 'string') {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement \| HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: 'stzh-card-searchresult',\n originalEvent,\n href: this.href,\n });\n };\n\n private hasProperStartAndOrEndDate(startDate: Date \| undefined, endDate: Date \| undefined) {\n return !(!!startDate && startDate.getHours() === 0 && !endDate);\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute('s-object-id', objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'card-searchresult');\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals,\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading \|\| hasSlot(this.element, 'heading');\n const hasDescription = !!this.description \|\| hasSlot(this.element, 'description');\n const hasImageSlot = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n if (eventDateStart && !hasImageSlot) {\n this.placeholderImageEnabled = true;\n }\n\n const hasImage = hasImageSlot \|\| this.placeholderImageEnabled;\n\n const classes = {\n 'stzh-card-searchresult': true,\n 'stzh-card-searchresult--has-heading': hasHeading,\n 'stzh-card-searchresult--has-description': hasDescription,\n 'stzh-card-searchresult--has-description-wrapper': hasDescription \|\| !!eventDateStart \|\| !!this.eventLocation,\n 'stzh-card-searchresult--has-link': !!this.href,\n 'stzh-card-searchresult--has-service': !!this.service,\n 'stzh-card-searchresult--has-tag': !!this.tag,\n 'stzh-card-searchresult--has-topic': !!this.topic,\n 'stzh-card-searchresult--has-image': hasImage,\n 'stzh-card-searchresult--has-image-default': hasImage && this.imagePosition === 'default',\n 'stzh-card-searchresult--has-image-right': hasImage && this.imagePosition === 'right',\n 'stzh-card-searchresult--has-meta': this._meta.length > 0,\n 'stzh-card-searchresult--has-download': !!this.downloadHeading \|\| this._downloadMeta.length > 0,\n 'stzh-card-searchresult--has-breadcrumb': !!this.breadcrumbItems,\n 'stzh-card-searchresult--hyphens': this.hyphensEnabled,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? 'a' : 'div';\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tag && <stzh-tag class=\"stzh-card-searchresult__tag\" label={this.tag} nonInteractive={true}></stzh-tag>}\n\n <div class=\"stzh-card-searchresult__heading-wrapper\">\n {this.breadcrumbItems && (\n <stzh-breadcrumb\n class=\"stzh-card-searchresult__breadcrumb\"\n items={this.breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n )}\n\n {this.dateline && <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>}\n\n <Heading class=\"stzh-card-searchresult__heading\">\n <HeadingLink\n ref={el => (this.headingLinkElement = el as HTMLAnchorElement \| HTMLDivElement)}\n class=\"stzh-card-searchresult__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n {this.heading ? (\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={el => (this.headingTextElement = el as HTMLDivElement)}\n innerHTML={this.heading}\n ></div>\n ) : (\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={el => (this.headingTextElement = el as HTMLDivElement)}\n >\n <slot name=\"heading\"></slot>\n </div>\n )}\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-searchresult__description-wrapper\">\n {(eventDateStart \|\| this.eventLocation) && (\n <div class=\"stzh-card-searchresult__event-infos\">\n {eventDateStart && (\n <div class=\"stzh-card-searchresult__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, 'dateLong')}</span>\n {this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (\n <span>, {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time')}</span>\n )}\n </div>\n )}\n {this.eventLocation && <div class=\"stzh-card-searchresult__event-location\">{this.eventLocation}</div>}\n </div>\n )}\n\n <div class=\"stzh-card-searchresult__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-searchresult__image\">\n {eventDateStart && (\n <div class=\"stzh-card-searchresult__event-date-teaser\">\n <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}\n {eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n )}\n {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n <slot name=\"image\"></slot>\n {this.placeholderImageEnabled && !hasImageSlot && (\n <stzh-ratio ratio=\"21:9\" ratio-small=\"1:1\" style={{ '--placeholder-image-color': 'var(--placeholder-image-color)' }}>\n <div class=\"stzh-card-searchresult__image-placeholder\" innerHTML={PlaceholderImage}></div>\n </stzh-ratio>\n )}\n </div>\n\n {(this._meta.length > 0 \|\| this.datalistItems \|\| !!this.downloadHeading \|\| this._downloadMeta.length > 0) && (\n <div class=\"stzh-card-searchresult__meta-wrapper\">\n {this.datalistItems && (\n <stzh-datalist class=\"stzh-card-searchresult__datalist\" items={this.datalistItems}></stzh-datalist>\n )}\n\n {this._meta.length > 0 && (\n <div class=\"stzh-card-searchresult__meta\">\n <div class=\"stzh-card-searchresult__meta-list\">\n {this._meta.map(meta => (\n <Fragment>\n <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n </Fragment>\n ))}\n </div>\n </div>\n )}\n\n {(!!this.downloadHeading \|\| this._downloadMeta.length > 0) && (\n <div class=\"stzh-card-searchresult__download\">\n <div class=\"stzh-card-searchresult__download-data\">\n {this.downloadHeading && (\n <div class=\"stzh-card-searchresult__download-heading\">{this.downloadHeading}</div>\n )}\n {this._downloadMeta.length > 0 && (\n <div class=\"stzh-card-searchresult__download-meta-list\">\n {this._downloadMeta.map(meta => (\n <Fragment>\n <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n </Fragment>\n ))}\n </div>\n )}\n </div>\n\n <div class=\"stzh-card-searchresult__download-button\">\n <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n )}\n </div>\n )}\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-card-searchresult.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":["/*\n @prop --placeholder-image-color: color of placeholder image (svg)\n /\n:host {\n --service-background-color: #{$colorSecondary30};\n --service-color: #{$colorPrimary70};\n --placeholder-image-color: #{$colorGrey30};\n\n --grid-template-areas: \"heading\" \"description\" \"meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas: \"image\" \"heading\" \"description\" \"meta\";\n --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n @include mq($from: small) {\n --grid-template-areas: \"heading image\" \"description image\" \"meta image\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n }\n }\n\n &[has-image][image-position=\"right\"] {\n @include mq($to: small) {\n --grid-template-areas: \"heading image\" \"description description\" \"meta meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n }\n }\n}\n\n.stzh-card-searchresult {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta-wrapper {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &--has-description-wrapper &__description-wrapper,\n &__meta-wrapper {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xlarge');\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__image-placeholder {\n / Apply color since the placeholder svg has fill \"currentColor\" /\n color: var(--placeholder-image-color);\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta-wrapper {\n grid-area: meta;\n }\n\n &__meta {\n overflow: hidden;\n }\n\n &__download {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n &__download-heading {\n color: $colorPrimary70;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n }\n\n &__tag,\n &__topic,\n &__service,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__service,\n &__topic {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: $colorSecondary30;\n color: $colorPrimary70;\n padding: space('xsmall') space('medium');\n text-align: center;\n\n @include mq($from: small) {\n min-width: 180px;\n }\n }\n\n &__service {\n background-color: var(--service-background-color);\n color: var(--service-color);\n }\n\n &__dateline {\n @include fontSize('micro');\n margin-bottom: space('small');\n }\n\n &__heading {\n margin-top: 0;\n margin-bottom: space('xsmall');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontCurve('p1');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n color: $colorBlack;\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n / Has link /\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag {\n --color: #{$colorSecondary60};\n }\n\n / Has breadcrumb /\n\n &--has-breadcrumb &__heading-wrapper {\n margin-top: space('xlarge');\n }\n\n / Has tag /\n\n &--has-tag &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has topic or service /\n\n &--has-service &__heading-wrapper,\n &--has-topic &__heading-wrapper {\n margin-top: space('xxxxlarge');\n }\n\n &--has-service#{&}--has-image-right &__heading-wrapper,\n &--has-topic#{&}--has-image-right &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has image (default) /\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n @include mq($to: small) {\n margin-top: space('small');\n }\n }\n\n / Has image right /\n\n &--has-image-right &__image {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n }\n }\n\n &--has-image-right &__service,\n &--has-image-right &__topic {\n position: static;\n }\n\n / Has description wrapper, meta or download /\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n\n / Hyphens /\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, Watch } from '@stencil/core';\n\nimport {\n StzhBreadcrumbItem,\n StzhCardSearchresultClickEvent,\n StzhDatalistItemEntry,\n StzhLocaleAdapter,\n StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/utils';\nimport PlaceholderImage from './assets/placeholder-image.svg';\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n /\n@Component({\n tag: 'stzh-card-searchresult',\n styleUrl: 'stzh-card-searchresult.scss',\n scoped: true,\n})\nexport class StzhCardSearchresult {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\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 /* Download attribute (if href is used) /\n @Prop() download: 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 /* Heading (alternative for heading slot) /\n @Prop() heading: string = '';\n\n /* Heading level /\n @Prop() headingLevel: '1' \| '2' \| '3' \| '4' = '3';\n\n /* Description text (alternative for description slot) /\n @Prop() description: string = '';\n\n /* Tag /\n @Prop() tag: string;\n\n /* Topic /\n @Prop() topic: string;\n\n /* Service /\n @Prop() service: string;\n\n /* Dateline /\n @Prop() dateline: string;\n\n /* Meta /\n @Prop() meta: string[] \| string;\n private _meta: string[];\n\n /* Breadcrumb items /\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] \| string;\n\n /* Datalist items /\n @Prop() datalistItems: StzhDatalistItemEntry[] \| string = [];\n\n /* Event start date /\n @Prop() eventDateStart: Date \| string;\n\n /* Event start date /\n @Prop() eventDateEnd: Date \| string;\n\n /* Event location /\n @Prop() eventLocation: string;\n\n /* Enable placeholder image if image slot not used /\n @Prop() placeholderImageEnabled: boolean = false;\n\n /* Image position /\n @Prop({ reflect: true }) imagePosition: 'default' \| 'right' = 'default';\n\n /* Download heading /\n @Prop() downloadHeading: string;\n\n /* Download meta /\n @Prop() downloadMeta: string[] \| string;\n private _downloadMeta: string[];\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n @Watch('meta')\n metaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === 'string') {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch('downloadMeta')\n downloadMetaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === 'string') {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement \| HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: 'stzh-card-searchresult',\n originalEvent,\n href: this.href,\n });\n };\n\n private hasProperStartAndOrEndDate(startDate: Date \| undefined, endDate: Date \| undefined) {\n return !(!!startDate && startDate.getHours() === 0 && !endDate);\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute('s-object-id', objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'card-searchresult');\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals,\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading \|\| hasSlot(this.element, 'heading');\n const hasDescription = !!this.description \|\| hasSlot(this.element, 'description');\n const hasImageSlot = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n if (eventDateStart && !hasImageSlot) {\n this.placeholderImageEnabled = true;\n }\n\n const hasImage = hasImageSlot \|\| this.placeholderImageEnabled;\n\n const classes = {\n 'stzh-card-searchresult': true,\n 'stzh-card-searchresult--has-heading': hasHeading,\n 'stzh-card-searchresult--has-description': hasDescription,\n 'stzh-card-searchresult--has-description-wrapper': hasDescription \|\| !!eventDateStart \|\| !!this.eventLocation,\n 'stzh-card-searchresult--has-link': !!this.href,\n 'stzh-card-searchresult--has-service': !!this.service,\n 'stzh-card-searchresult--has-tag': !!this.tag,\n 'stzh-card-searchresult--has-topic': !!this.topic,\n 'stzh-card-searchresult--has-image': hasImage,\n 'stzh-card-searchresult--has-image-default': hasImage && this.imagePosition === 'default',\n 'stzh-card-searchresult--has-image-right': hasImage && this.imagePosition === 'right',\n 'stzh-card-searchresult--has-meta': this._meta.length > 0,\n 'stzh-card-searchresult--has-download': !!this.downloadHeading \|\| this._downloadMeta.length > 0,\n 'stzh-card-searchresult--has-breadcrumb': !!this.breadcrumbItems,\n 'stzh-card-searchresult--hyphens': this.hyphensEnabled,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? 'a' : 'div';\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tag && <stzh-tag class=\"stzh-card-searchresult__tag\" label={this.tag} nonInteractive={true}></stzh-tag>}\n\n <div class=\"stzh-card-searchresult__heading-wrapper\">\n {this.breadcrumbItems && (\n <stzh-breadcrumb\n class=\"stzh-card-searchresult__breadcrumb\"\n items={this.breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n )}\n\n {this.dateline && <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>}\n\n <Heading class=\"stzh-card-searchresult__heading\">\n <HeadingLink\n ref={el => (this.headingLinkElement = el as HTMLAnchorElement \| HTMLDivElement)}\n class=\"stzh-card-searchresult__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n {this.heading ? (\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={el => (this.headingTextElement = el as HTMLDivElement)}\n innerHTML={this.heading}\n ></div>\n ) : (\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={el => (this.headingTextElement = el as HTMLDivElement)}\n >\n <slot name=\"heading\"></slot>\n </div>\n )}\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-searchresult__description-wrapper\">\n {(eventDateStart \|\| this.eventLocation) && (\n <div class=\"stzh-card-searchresult__event-infos\">\n {eventDateStart && (\n <div class=\"stzh-card-searchresult__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, 'dateLong')}</span>\n {this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (\n <span>, {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time')}</span>\n )}\n </div>\n )}\n {this.eventLocation && <div class=\"stzh-card-searchresult__event-location\">{this.eventLocation}</div>}\n </div>\n )}\n\n <div class=\"stzh-card-searchresult__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-searchresult__image\">\n {eventDateStart && (\n <div class=\"stzh-card-searchresult__event-date-teaser\">\n <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}\n {eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n )}\n {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n <slot name=\"image\"></slot>\n {this.placeholderImageEnabled && !hasImageSlot && (\n <stzh-ratio ratio=\"21:9\" ratio-small=\"1:1\">\n <div class=\"stzh-card-searchresult__image-placeholder\" innerHTML={PlaceholderImage}></div>\n </stzh-ratio>\n )}\n </div>\n\n {(this._meta.length > 0 \|\| this.datalistItems \|\| !!this.downloadHeading \|\| this._downloadMeta.length > 0) && (\n <div class=\"stzh-card-searchresult__meta-wrapper\">\n {this.datalistItems && (\n <stzh-datalist class=\"stzh-card-searchresult__datalist\" items={this.datalistItems}></stzh-datalist>\n )}\n\n {this._meta.length > 0 && (\n <div class=\"stzh-card-searchresult__meta\">\n <div class=\"stzh-card-searchresult__meta-list\">\n {this._meta.map(meta => (\n <Fragment>\n <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n </Fragment>\n ))}\n </div>\n </div>\n )}\n\n {(!!this.downloadHeading \|\| this._downloadMeta.length > 0) && (\n <div class=\"stzh-card-searchresult__download\">\n <div class=\"stzh-card-searchresult__download-data\">\n {this.downloadHeading && (\n <div class=\"stzh-card-searchresult__download-heading\">{this.downloadHeading}</div>\n )}\n {this._downloadMeta.length > 0 && (\n <div class=\"stzh-card-searchresult__download-meta-list\">\n {this._downloadMeta.map(meta => (\n <Fragment>\n <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n </Fragment>\n ))}\n </div>\n )}\n </div>\n\n <div class=\"stzh-card-searchresult__download-button\">\n <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n )}\n </div>\n )}\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Frag
 import { s as setPropsIfNull, h as hasSlot } from './utils-a756a0c9.js';
 import './string-utils-a9af5463.js';
-const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-h,[stzh-hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card{outline-style:none !important}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card::-moz-focus-inner{border:0 !important}.sc-stzh-card-h{--border-radius:0px;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:flex;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h.sc-stzh-card-s>[slot=image],.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h.sc-stzh-card-s>img[slot=image],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.stzh-card.sc-stzh-card{flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;flex-grow:1;display:flex;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 900px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:flex;justify-content:space-between;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:inline-flex;margin-top:var(--stzh-space-xsmall);gap:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.stzh-card__left.sc-stzh-card{align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);flex-grow:1}.stzh-card__card-actions.sc-stzh-card{display:inline-flex;white-space:nowrap}@media screen and (max-width: 899px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-base-color)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge);padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xxlarge)}}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}.stzh-card--has-header.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xsmall)}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-footer.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-tag.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxxlarge)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__content.sc-stzh-card{transition:color var(--stzh-base-transition-animation-speed)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{z-index:1}.stzh-card--has-link.sc-stzh-card .stzh-card__card-actions.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__content.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__content.sc-stzh-card{color:var(--stzh-color-secondary60)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;appearance:none;background:none;border:none;transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary)}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}";
+const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-h,[stzh-hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card{outline-style:none !important}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card::-moz-focus-inner{border:0 !important}.sc-stzh-card-h{--border-radius:0px;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:flex;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h.sc-stzh-card-s>[slot=image],.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h.sc-stzh-card-s>img[slot=image],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.stzh-card.sc-stzh-card{flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-grey10);border-radius:var(--border-radius)}.stzh-card--background-grey.sc-stzh-card{background-color:var(--stzh-color-grey10)}.stzh-card--background-white.sc-stzh-card{background-color:var(--stzh-color-white)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;flex-grow:1;display:flex;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 900px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:flex;justify-content:space-between;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:inline-flex;margin-top:var(--stzh-space-xsmall);gap:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.stzh-card__left.sc-stzh-card{align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);flex-grow:1}.stzh-card__card-actions.sc-stzh-card{display:inline-flex;white-space:nowrap}@media screen and (max-width: 899px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-base-color)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card.sc-stzh-card:hover,.stzh-card.sc-stzh-card:focus{background-color:var(--stzh-color-secondary10)}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge);padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xxlarge)}}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}.stzh-card--has-header.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xsmall)}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-footer.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-tag.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxxlarge)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__content.sc-stzh-card{transition:color var(--stzh-base-transition-animation-speed)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{z-index:1}.stzh-card--has-link.sc-stzh-card .stzh-card__card-actions.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__content.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__content.sc-stzh-card{color:var(--stzh-color-secondary60)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;appearance:none;background:none;border:none;transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary)}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}";
 const StzhCardStyle0 = stzhCardCss;
 const StzhCard = class {
@@ -151,6 +151,7 @@ const StzhCard = class {
             });
         };
         this.localization = undefined;
+        this.backgroundColor = "grey";
         this.variant = "default";
         this.collapsed = false;
         this.starred = false;
@@ -311,6 +312,8 @@ const StzhCard = class {
         const descriptionId = `stzh-card${uniqueId}`;
         const classes = {
             "stzh-card": true,
+            "stzh-card--background-grey": this.backgroundColor === "grey",
+            "stzh-card--background-white": this.backgroundColor === "white",
             "stzh-card--has-link": !!this.href,
             "stzh-card--has-image": imageUsed,
             "stzh-card--has-content": contentUsed,
@@ -327,23 +330,23 @@ const StzhCard = class {
             [`stzh-card--${this.variant}`]: !!this.variant,
             "stzh-card--hyphens": this.hyphensEnabled,
         };
-        return (h(Host, { key: '1587b18ba3da21978032c26f6ac482abe2144778', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '8caafa7daef550eb646bb76477482d280a1620b2',
+        return (h(Host, { key: 'd0eef9062a29646a186d19da6255840694b8fd5c', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: 'f743f96f9741c622226380bc2abb103e10bfd6b1',
             // ref={(el) => (this.mainElement = el as HTMLElement)}
-            class: classes }, h("a", { key: '17964c16658126657cb9dacd3c0f8b980631cd60', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: '8b14f902045f26f35c1e95262b8b9ad61418ca77', name: "image" })), h("div", { key: '94bb79a442e262909a10257671d5df6e2b318cff', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '332a9e0985e2798aeea238f4d424e7810264b584', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '3fbee678ec5d7fbfa79fd0a0d26cd2dfe0d1c161',
+            class: classes }, h("a", { key: '640483d5376e514c360855b6da8f691b2cdbc0cd', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: '05d98dbc9b7f0853fc30f78fa864301feb84d7f7', name: "image" })), h("div", { key: '2d1bacb43c5393fbd4e10f8ccb9048162f09977b', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '905ab068fdc01d0e501917fe46363bc735c24d63', class: "stzh-card__dnd", name: "drag" }), h("header", { key: 'b6b61a0f4c19d806ddb78e383c781333bdcd4cf2',
             // ref={(el) => (this.headerElement = el as HTMLElement)}
-            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: 'ba01cc5960df92d985519d3d4a66abc1d4335458', class: "stzh-card__header-top" }, h("div", { key: '47dd2bfcc201d908e3de80799f7f361515ffd0eb',
+            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: '75574a4c535d79cab3314216c2f1e5829a2d81e7', class: "stzh-card__header-top" }, h("div", { key: '48c9405b03de8683843188beb535afa4d37063a0',
             // ref={(el) => (this.headerLeftElement = el as HTMLElement)}
-            class: "stzh-card__header-left" }, h("div", { key: 'f3da8157dd758a6533191e0c7ef42baa0964a035', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '75adac7f6a8b88d920823fb029589f519b0c01f5', class: "stzh-card__title" }, h("a", { key: '052d13b68c9742009e5440583044b816fb965472', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: 'a380d0874b7065fe255403a897c17798cac4ff00', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: '3fb19ac7f0b63140e5dbb9e176f2a840bc426d7d', id: descriptionId, hidden: true }, (_d = this.localization) === null || _d === void 0 ? void 0 : _d.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: 'd8905cc49cf3318f0df41e6121510ec330e30c8a', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '6e5c89ac84f6a4464980e9396b31438ae7c09422',
+            class: "stzh-card__header-left" }, h("div", { key: '288614966eee0d722dae1f145226959c078e9a18', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '07f172a2b0c38e0347f0b30ec72405f382394212', class: "stzh-card__title" }, h("a", { key: 'f8026dce8c08471ddde40fa11b8351c288fb477a', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: '962a2bc4fc049b38165c1c2fd3a7d6c54cc54751', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: 'dc437d07bf20f045657e2b16382900934f367f33', id: descriptionId, hidden: true }, (_d = this.localization) === null || _d === void 0 ? void 0 : _d.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: '6505122f261569a949a5507f6eab27b914e6228a', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: 'e9581cd7f17f6f8e26592e5109829bb40a0a112d',
             // ref={(el) => (this.headerRightElement = el as HTMLElement)}
-            class: "stzh-card__header-right" }, h("div", { key: 'e91d30238a0a98a2c2dc6dea054224fff5ef6886', class: "stzh-card__card-actions" }, this.starrable && (h("stzh-tooltip", { key: '57c9c5fe99120b6d1f79bfcfd006731bc2afd16e' }, h("stzh-button", { key: '26da19edd0f7dc06b814c9b147cc27a38c1161fd', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '59eba4c20ddef2345b477853dbedde844cd01e62', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '6a061b2e61d39ddcd0775258421d148f7296db0a', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+            class: "stzh-card__header-right" }, h("div", { key: 'e3d153139e2b181b525ee9266d350b77d21885f7', class: "stzh-card__card-actions" }, this.starrable && (h("stzh-tooltip", { key: 'ff738548e442b88f9dfc4388f47a6cb373b8731c' }, h("stzh-button", { key: '8be33c7951488e14ee77c16cbaeb7599d12cd594', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '89ba16bdb636ea98eb613535d5743932332dab39', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '866c206709fc68e75358245d949de2f94014731f', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
                 "stzh-card__card-action-popover": true,
                 // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
-            } }, h("stzh-button", { key: '41a7bb990ab59a7676ab18fd6f6434cc462fcc4e', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_e = headerActionsWithBadge[0]) === null || _e === void 0 ? void 0 : _e.badgeType) || "default" }), h("stzh-menu", { key: 'fed4bd3fa12ab1853510ef0cbd6f9819b9125f3d', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
+            } }, h("stzh-button", { key: 'bec38b589210b52cea9035638efd096e3a12bc97', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_e = headerActionsWithBadge[0]) === null || _e === void 0 ? void 0 : _e.badgeType) || "default" }), h("stzh-menu", { key: '5dbdb078257355d6ef472f90268cb80ba27cc44a', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
             // class="hide-medium show-when-collapsed"
             icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
                 this.actionClick(e, action);
             }
-        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'b394328b2568c9d511689bb702cbc2fc35f47472' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '771f877ab0dd3657942894dc698d50366cadbe2a', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: 'ff343131c4ff6a24193da4662625647730864c58', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: 'f3012e3345965ea3253f63097482d2c1fd3e83ea', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'a2b07fc0039dd4500d0300fe2dffe997eda93bc4', class: "stzh-card__header-meta" }, h("slot", { key: '4f74031fa6cdc4dae3376cde2acd5e650622a360', name: "meta" }))), h("div", { key: '7bb76513dea446a206be1788d5a663fd7ff055b4', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '64452e7c5fa348a074c50743022fa827469fc738', name: "content" })), h("div", { key: '1f4a913a978305e5fd153b99d0810e89c8dba918', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: 'd59e50bd4f4a60d082dfba8be2b7923e8752148d', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'd3fe192ddb459b27e8de88cf8ceee79100e465df', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '02c7dba7ecdc05b6351ee080473316d28fd221d7', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
+        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'a66b9cbb82680026665532df59b3d260bd567fad' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: 'c5144ea3cd6e63c63aaaea5a954afaac2084e916', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: 'd4d1b07661c7f9ba4a98035ffa6d07439050f097', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '05237cd7773f63c8407c0c1f7ee7e007f14e678f', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'ef855363b7098083eea57776f1d6ec4e0cc29f02', class: "stzh-card__header-meta" }, h("slot", { key: 'e3d8c168e44f20c95756d11681ee747863dccda4', name: "meta" }))), h("div", { key: '9dfa797204fb876c34a66ca408c030fee42240dc', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '553f663d65edcde3295744461b8bcc1c23981a1a', name: "content" })), h("div", { key: 'e3cc8d37b278309950eb26347d37346c597bcdff', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: '96a790640048c359597721852832b4c323228549', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: '3b3b2a1d65ea8c6f63ac6a4dc5f8663ea68c99d5', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: 'bd560d5fcef2ff1a5a147e0af7a9e260927e7183', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {