@oiz/stzh-components 4.3.0 → 4.3.1

package/dist/cjs/stzh-accordion_3.cjs.entry.js

@@ -93,7 +93,7 @@ const StzhAccordion = class {
             "stzh-accordion": true,
             "stzh-accordion--is-nested": this.isNested,
         };
-        return (index.h(index.Host, { key: 'e5cfa3b76e86eeda4d7a8b7a6d7ea8cc86c61edc' }, index.h("div", { key: '6c17af9a9953915fab3e0a317ec706c6433b2745', class: classes }, this.heading && (index.h("div", { key: '9560136a1cee929da57ab15fef555b49dda67406', class: "stzh-accordion__heading" }, index.h("stzh-heading", { key: 'e914f38b25106ddf44d890f32cb356be7426ff23', level: "2" }, this.heading))), index.h("slot", { key: 'c795a2868f5548d2318bfab391412ba21338be60' }))));
+        return (index.h(index.Host, { key: 'c72407bfa24d8de5b6a0881e0ac5f23d645a37c6' }, index.h("div", { key: '075b65f65515d57bda48a0998c6143bbe3315337', class: classes }, this.heading && (index.h("div", { key: '4a0545d04d615dc08e9a93ddacb4f4efc01d5be0', class: "stzh-accordion__heading" }, index.h("stzh-heading", { key: 'e038bc06eae344973250ad291bdffa788aeef62d', level: "2" }, this.heading))), index.h("slot", { key: 'ce2bbd3ce5f4171cdf78f567a6b97c4d21202419' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -355,7 +355,7 @@ const StzhAccordionItem = class {
             "stzh-accordion-item--is-disabled": this.disabled,
             [`stzh-accordion-item--${this._variant}`]: !!this._variant,
         };
-        return (index.h(index.Host, { key: '69591289ec8c62ae9411c0fb13a60cd2791905a0', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, index.h("div", { key: 'c88e55f9d5ff331e07e228a26e5db398a92cb425', class: classes }, index.h(Heading, { key: 'ec82b5e69bbc435a3f52cd08d773b2c8e292f31a', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, index.h("button", { key: 'cc30a68d64a63119f00dd8b6619b38af2a679979', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, index.h("span", { key: '7085fafdaa17e82c049c93a37e9ba7693faf92d6', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (index.h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (index.h("slot", { name: "icon" }))), index.h("span", { key: 'a8ca696e39f436690c7566aa17ceb21288d55485', class: "stzh-accordion-item__button-text" }, index.h("span", { key: '80ff5d45ec14cbfb1209167d65298e0062caeeac', class: "stzh-accordion-item__subtitle" }, this.subtitle), index.h("span", { key: 'd989dac08bafd33720db277836c21c51b65e9f91', class: "stzh-accordion-item__heading-text" }, this.heading), index.h("span", { key: '8b86f182c701cc8701db471ab521bef24411b638', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (index.h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (index.h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (index.h("stzh-badge", { key: 'ba314df692ade02cd8aec031e1fde697195e4aca', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), index.h("div", { key: '8acc8f15e83dc840bc34fc635ba2cc727bb4b77a', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, index.h("div", { key: 'a3b044ddcbd98857ab4b26015a6bf4ba40bbefb8', class: "stzh-accordion-item__content-inner" }, index.h("slot", { key: 'c2fca0eb0a98dd41ec7e6ed0e1d0deacff875ba6' }))))));
+        return (index.h(index.Host, { key: 'a8bda269fd127fa03e7cef43aff3c6cd69c049f1', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, index.h("div", { key: 'c299384ed50c4a0b79ff290371638c16c8626636', class: classes }, index.h(Heading, { key: '8fd8acf022ee5aacf1b5e921a901ed3623ec2f8c', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, index.h("button", { key: 'cad80aeb090e027b6468780c62f5a35a0de78eb6', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, index.h("span", { key: 'bc1f4d365614e2a43914d8c0a9fa406c43497ec3', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (index.h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (index.h("slot", { name: "icon" }))), index.h("span", { key: 'dd3c081172f8fdf4736d379eb4446c4731646e2b', class: "stzh-accordion-item__button-text" }, index.h("span", { key: 'b071d6ee59f2c557a00f4595b246b7a59a2fb1f4', class: "stzh-accordion-item__subtitle" }, this.subtitle), index.h("span", { key: 'b4240bcf3407e9c402b9b9a241e6d01890d0cbb6', class: "stzh-accordion-item__heading-text" }, this.heading), index.h("span", { key: '4f474ef65f242f330af26a2eded73615a53ee964', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (index.h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (index.h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (index.h("stzh-badge", { key: '70bded9a927856fe1dad472c841c37736d93aab1', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), index.h("div", { key: 'd14438e696102091725c8347eacde0b1784e1339', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, index.h("div", { key: 'eb138c6bfafeedc18b5f6667e05027459d3308d0', class: "stzh-accordion-item__content-inner" }, index.h("slot", { key: '838d75fd4ec275c043d7b656a2b6885f907557f2' }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-actions_6.cjs.entry.js

@@ -48,7 +48,7 @@ const StzhActions = class {
             "stzh-actions--space-between": this.spaceBetween,
             [`stzh-actions--${this.variant}`]: !!this.variant,
         };
-        return (index.h(index.Host, { key: '100dd1874470f995ec038b2e0aedb932129e304b', "space-between": this.spaceBetween }, index.h("div", { key: '08d5776a9d368dceccfb6f183a7b12d503757150', class: classes }, index.h("div", { key: '1c8ac2cdbc564ceea60ce95c6731d86d42d68e15', class: "stzh-actions__actions", role: "group" }, index.h("div", { key: '30df5675c620d9d1065d2494de3b69d006b2cf61', class: "stzh-actions__tertiary-actions" }, index.h("slot", { key: '8e8dcfdecc3b7ce21f70c35e9aa90837598cb51c', name: "tertiary" })), index.h("div", { key: 'bf39e9610570f31cd91c988170925e717ea8267d', class: "stzh-actions__wrapper" }, index.h("div", { key: 'b33198895823912d509c87fc8e15144fe7df32f3', class: "stzh-actions__secondary-actions" }, index.h("slot", { key: '2b26d7ee10df898072dda39ccd683b936053e847', name: "secondary" })), index.h("div", { key: '4621cdb0b58a3d57aaceb1258ae3514ab9214efb', class: "stzh-actions__primary-actions" }, index.h("slot", { key: '7b7078d3d67950162fb442210b394c3d902afc49', name: "primary" })))))));
+        return (index.h(index.Host, { key: 'ad1364f137832998b2874ca016a428aa0c78193d', "space-between": this.spaceBetween }, index.h("div", { key: '1aba75918431bedcb009e2e62681a4c630172a1a', class: classes }, index.h("div", { key: 'c1ec0938ad1cb960212a89edc38f9c27e6f92c29', class: "stzh-actions__actions", role: "group" }, index.h("div", { key: '46ba39311ef9859ae6dfb6bb01a5faab8e209e1a', class: "stzh-actions__tertiary-actions" }, index.h("slot", { key: 'da4fe8c3cd3872660d0778883b68aa363b532b6b', name: "tertiary" })), index.h("div", { key: '82151e34caa58e5af2679b4e7b4ddf7a1bd5d767', class: "stzh-actions__wrapper" }, index.h("div", { key: 'b7682c3feacce2b7ec4d3c8f8fa5a4a3d8ce7c96', class: "stzh-actions__secondary-actions" }, index.h("slot", { key: 'bf43095e9877a1c317f0faa226bdcad5bb5e5889', name: "secondary" })), index.h("div", { key: '2797094e321e461280b44d7fd596c7b08fccfec4', class: "stzh-actions__primary-actions" }, index.h("slot", { key: '0ec6975e6e7208df564fa0cf17482246a9e18396', name: "primary" })))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-actionset.cjs.entry.js

@@ -127,7 +127,7 @@ const StzhActionset = class {
             "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
             [`stzh-actionset--${this.variant}`]: !!this.variant
         };
-        const Action = (action, disableTabbing) => (index.h("stzh-button", { key: 'f6340f82b621bea452323b5fb3b77d8e73daa419', a11yTabindex: disableTabbing ? "-1" : null, class: {
+        const Action = (action, disableTabbing) => (index.h("stzh-button", { key: '2397d5f1ac9b33777a6f9abbc5c48ad8b788eede', a11yTabindex: disableTabbing ? "-1" : null, class: {
                 "stzh-actionset__action": true,
                 "is-button": true
             }, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
@@ -135,7 +135,7 @@ const StzhActionset = class {
                 : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
                 ? action.size
                 : (this.variant === "stack" ? "small" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }));
-        return (index.h(index.Host, { key: 'dc433c2f3d9b50dcbe38856a9350d5f43b0039e7', "has-collapsed-items": this.actionsCollapsed.length > 0 }, index.h("div", { key: '015810c00e4b173726a680b2a2de7226b1764300', class: classes }, index.h("div", { key: '861acb3025044202b99545e714d8b12cf811b0b7', class: "stzh-actionset__actions", role: "group" }, index.h("div", { key: '54d2901933fb57aed73ac8e24748857262ca50ed', ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+        return (index.h(index.Host, { key: 'bc7eedb7e34b63625b1b31e67a512e16d0cd6ef1', "has-collapsed-items": this.actionsCollapsed.length > 0 }, index.h("div", { key: '88a948febbe5ccfa2dc336926ea1064571797c3b', class: classes }, index.h("div", { key: '0ad9a554da91561f695f1fc3ffc8f8747b616308', class: "stzh-actionset__actions", role: "group" }, index.h("div", { key: '9de772d0bc60f83c6d1071e9019933b23a75a9f3', ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
             || (!this.dynamicActions &&
                 this.actionsCollapsed.indexOf(action) === -1))
             &&
@@ -143,15 +143,15 @@ const StzhActionset = class {
                     ?
                         index.h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))
                     :
-                        Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), index.h("div", { key: '8d9e67ec27d04f9a974d05d9d17bf1212d432447', class: "stzh-actionset__action-popover-wrapper" }, index.h("stzh-popover", { key: '51d1686ae773c5264a7fcaf622ffd841ce81ac07', label: this.variant === "stack"
+                        Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), index.h("div", { key: '1f60df5fd4c399a9466577c537890ba86d2b6907', class: "stzh-actionset__action-popover-wrapper" }, index.h("stzh-popover", { key: '8604dae463d92ce1b2e9b9c58a04d6303467eb11', label: this.variant === "stack"
                 ? this.localization.furtherActions
-                : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, index.h("stzh-button", { key: '5a8fa9b52129d2f70088d40acdd8dd5867ac989e', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+                : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, index.h("stzh-button", { key: '3adae7941f1a7872b32a7a03458f0c4e5290d8be', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
                 ? this.popoverButtonVariant
                 : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
                 ? this.popoverButtonSize
                 : (this.variant === "stack" ? "small" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
                 ? this.localization.furtherActions
-                : (!this.isMedium ? this.localization.actions : ""), a11yLabel: this.variant === "overflow" && this.localization.actions }), index.h("stzh-menu", { key: '4b3acf5168c020daac317febd032b521d754bde4', slot: "content" }, this.actionsCollapsed.map(action => (index.h("stzh-menu-item", {
+                : (!this.isMedium ? this.localization.actions : ""), a11yLabel: this.variant === "overflow" && this.localization.actions }), index.h("stzh-menu", { key: 'a1b64371b2f294de441bba73b2b65c41701c3176', slot: "content" }, this.actionsCollapsed.map(action => (index.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(action, e); }
         }, action.label))))))))));

package/dist/cjs/stzh-amount.cjs.entry.js

@@ -142,7 +142,7 @@ const StzhAmount = class {
             "stzh-amount--is-required": !!this.required,
             "stzh-amount--is-disabled": !!this.disabled
         };
-        return (index.h(index.Host, { key: 'd1edd6817cf1ab20e22a681ee9c00c5952745c20', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: 'bdbde0bcf74e0807ee8570c202b53fdd62098096', class: classes, id: this.amountId }, this._showDropdown ?
+        return (index.h(index.Host, { key: '809aeef9153086a605aedfb6bafd10305172782d', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: '3331e3a9c6bb00a498d524b98852ee300118bc62', class: classes, id: this.amountId }, this._showDropdown ?
             this.renderDropdown()
             :
                 this.renderInputStepper())));

package/dist/cjs/stzh-anchornav.cjs.entry.js

@@ -50,7 +50,7 @@ const StzhAnchornav = class {
         const classes = {
             "stzh-anchornav": true,
         };
-        return (index.h(index.Host, { key: 'a38e7cfd2af4089f71e2773527c6b27e080a76e0' }, index.h("nav", { key: '7898e6b2d3649e66c2a6b450ae03706c6ee08ee2', class: classes, role: "navigation", "aria-label": this.localization.title }, index.h("div", { key: '6310a857401f860ce2b3a4679d42e34d577a95d9', class: "stzh-anchornav__list", role: "list" }, this._items.map(item => (index.h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, index.h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, index.h("div", { innerHTML: item.label })), index.h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" }))))))));
+        return (index.h(index.Host, { key: '1f0a95ee65487fdeeeb264f8f52ce686cf58164e' }, index.h("nav", { key: '1e6b7380730db306d523fb320dce9791b5729b3d', class: classes, role: "navigation", "aria-label": this.localization.title }, index.h("div", { key: 'f1eb72d69c03661631ce374b22eaa33e9a426793', class: "stzh-anchornav__list", role: "list" }, this._items.map(item => (index.h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, index.h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, index.h("div", { innerHTML: item.label })), index.h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" }))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-app-nav.cjs.entry.js

@@ -31,7 +31,7 @@ const StzhAppNav = class {
         const classes = {
             "stzh-app-nav": true,
         };
-        return (index.h(index.Host, { key: 'c9bdfee898b5de6ae6c13736cbfa3ff36bb08613' }, index.h("nav", { key: '7580c2f6e66b7e5f38606ff5b21c48f03147826d', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, index.h("div", { key: 'fbef6a44d4e892992bb05222f1ddeeb709f1cbfe', class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (index.h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => { this.handleAppNavItemClick(e, item); } }, item.text)))))));
+        return (index.h(index.Host, { key: '8573745e125b58540549d0af2cdac4f1b6bf5e2f' }, index.h("nav", { key: '48c2916bca9148fadb006f9310fa600b96ddf3b0', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, index.h("div", { key: 'cf5d22c667a83bacac694c6ea05e4116ce2ea910', class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (index.h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => { this.handleAppNavItemClick(e, item); } }, item.text)))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-appointments.cjs.entry.js

@@ -258,12 +258,12 @@ const StzhAppointments = class {
             "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
             "stzh-appointments--has-sort": this.showSort
         };
-        return (index.h(index.Host, { key: '271335239435b313002acd0e8cc557f3c7716bc7', "has-heading": headingUsed }, index.h("div", { key: '992e35868e4f21b95c53215fb676bae61dd30698', class: classes }, index.h("div", { key: 'cc1b78def55fddd3ab2eb033c925c1dcd91115cb', class: "stzh-appointments__heading" }, index.h("slot", { key: '8018b668b9dab119ad0a6395b734e254af900674', name: "heading" })), index.h("div", { key: 'ecbb9279d01d4735b863c87c9425c641f1306bff', class: "stzh-appointments__wrapper" }, this.showCalendar &&
-            index.h("div", { key: 'df5efe6da618778e8341965c7e4be22a57548e91', class: "stzh-appointments__calendar-wrapper" }, index.h("div", { key: '9c904e91819ab6e20eede7a84a5491ff02a4463c', class: "stzh-appointments__calendar-title-wrapper" }, index.h("div", { key: '7d6d9e5e97db9b4447b0602417bcbc18897268bc', class: "stzh-appointments__calendar-title" }, index.h("stzh-icon", { key: '7f72f4557930f1eb54c79277e0de5c3d3732f348', class: "stzh-appointments__calendar-icon", name: "calendar" }), index.h("span", { key: '30928f440cbe298c53352833e4a1d211b2404a80', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), index.h("div", { key: '1b6ad635a2b8b80fd986aa63c8b5c818f1bfac0c', class: "stzh-appointments__calendar-content" }, index.h("stzh-datepicker", { key: '38b338c9d6bccf382e0a4707aa9cbb3fcb7afc4f', "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: dateUtils.printISODate(this.earliestDate), calendarMax: dateUtils.printISODate(this.latestDate) }, index.h("stzh-link", { key: '367ba626216c0c413dd1d5794d0f0169746de77f', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), index.h("div", { key: '8d1af77de95467d006e4ee5899c2cb1cf194b9b6', class: "stzh-appointments__calendar-content-medium" }, index.h("stzh-datepicker", { key: '9d39284d5a8514e9e5f4f50793749b7807c735ab', "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: dateUtils.printISODate(this.earliestDate), calendarMax: dateUtils.printISODate(this.latestDate) }, this.nextDate &&
-                index.h("stzh-link", { key: '8f98cdacac1c048e9340432fde4d0ad90ef14be3', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))), index.h("div", { key: '5053e6915db895f326bd63995e1195cd077bda1b', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
-            index.h("div", { key: '7370eb8bb2a93558660694b956e4318c28bac1b9', class: "stzh-appointments__appointments-title-wrapper" }, index.h("div", { key: '222d6f5d0a55e5de444f51804ccb76ae43ed016c', class: "stzh-appointments__appointments-title" }, index.h("stzh-icon", { key: 'dac2f49c7f202e6c0126631536641407ff68c76d', class: "stzh-appointments__appointments-icon", name: "clock" }), index.h("span", { key: 'efcef0fd98df4c03cafb5abeaa879a260882eac4', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
-                index.h("div", { key: '945d856fe3af87af9bcdfb71b066cd42c3a79915', class: "stzh-appointments__sort" }, index.h("stzh-dropdown", { key: 'b8477dc3d7aa7bf8a865e03b606f3975a7a310f8', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), index.h("div", { key: '6043e94ca35efa16f72d3b17e9a38d983f06d39b', class: "stzh-appointments__appointments-content" }, index.h("stzh-radiogroup", { key: '06d6619c63948011b31d61b0b14cf4e429a0da96', class: "stzh-appointments__appointments-radiogroup", ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => index.h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, index.h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && index.h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), index.h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
-            index.h("stzh-link", { key: 'f99f95b953f208a3d1eb20924be254a8c19bf959', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, index$1.tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
+        return (index.h(index.Host, { key: '3c75f8143876ae8a975186f1d67977abb92e7a81', "has-heading": headingUsed }, index.h("div", { key: '003c087a8135c9988228fde839dc222863839ca8', class: classes }, index.h("div", { key: 'b70bc69a79da83a73170e7328a2c6a65b06d95ec', class: "stzh-appointments__heading" }, index.h("slot", { key: '1f9bbfaff4a01d78c6b56c862f133af905c1804f', name: "heading" })), index.h("div", { key: '83af0e71c4551bf685fe6198de0249d598b2270d', class: "stzh-appointments__wrapper" }, this.showCalendar &&
+            index.h("div", { key: 'f6014983f03dd8ef3cdca92cf4c2e8d8a5e5b9a0', class: "stzh-appointments__calendar-wrapper" }, index.h("div", { key: '63e0e9a42c2979a86bbb45e5051aa61f2ec6103a', class: "stzh-appointments__calendar-title-wrapper" }, index.h("div", { key: '08b025a37be227bf4ae90d71856f23816c8dfda8', class: "stzh-appointments__calendar-title" }, index.h("stzh-icon", { key: '006a76a5b0c7dd447a052352e95d80c00da451b5', class: "stzh-appointments__calendar-icon", name: "calendar" }), index.h("span", { key: 'ddc96c299f1c078094309c6cef217a345d204930', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), index.h("div", { key: '686a44e0ed2659e7290b18438672c91c00d4d0c8', class: "stzh-appointments__calendar-content" }, index.h("stzh-datepicker", { key: '4346ed2d9546bcd6fb048aaec93ea713155eb39f', "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: dateUtils.printISODate(this.earliestDate), calendarMax: dateUtils.printISODate(this.latestDate) }, index.h("stzh-link", { key: 'f8ba7e0ca18fba114997ccfdb36c86d4179567f9', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), index.h("div", { key: '29f38a10a16bdd8b1f268705b46eac59c0626d48', class: "stzh-appointments__calendar-content-medium" }, index.h("stzh-datepicker", { key: 'dd633317966ae81185186190c0a74e15843374f3', "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: dateUtils.printISODate(this.earliestDate), calendarMax: dateUtils.printISODate(this.latestDate) }, this.nextDate &&
+                index.h("stzh-link", { key: '4bcce6d8708c96d772451ecb50c092c838ae8421', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))), index.h("div", { key: 'd8352171a41d4331fc2828192dab8851eb0cd48c', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
+            index.h("div", { key: 'bd2ecaeed8f5f698b4b75ee19d5c4cadf1325a41', class: "stzh-appointments__appointments-title-wrapper" }, index.h("div", { key: '93a83bf50eab52b1c01497f44385995f3a00ad77', class: "stzh-appointments__appointments-title" }, index.h("stzh-icon", { key: '1a48144da976a0885193e06b10425af4b1d2af26', class: "stzh-appointments__appointments-icon", name: "clock" }), index.h("span", { key: '4862564ed7a7d59a08b362b6fde5823e7ee1c33d', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
+                index.h("div", { key: '72b6b916f3fe7e09d9910aa358a49fa51e22c937', class: "stzh-appointments__sort" }, index.h("stzh-dropdown", { key: 'e2c902bd446b44012c8b5512c01fe693958477a0', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), index.h("div", { key: 'ee97c06bb44f8a4aa548d1d706d535ddd429bb64', class: "stzh-appointments__appointments-content" }, index.h("stzh-radiogroup", { key: 'bd92bf34d9a3e093e74fd868fb144c8544f4e1b0', class: "stzh-appointments__appointments-radiogroup", ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => index.h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, index.h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && index.h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), index.h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
+            index.h("stzh-link", { key: '7b10dbaa4d117a45c664cf1b5e1112651268bb4b', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, index$1.tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
                 ? this.stepItems
                 : this.moreItemsLeft))))))));
     }

package/dist/cjs/stzh-audio.cjs.entry.js

@@ -4140,11 +4140,11 @@ const StzhAudio = class {
         const classes = {
             "stzh-audio": true
         };
-        return (index.h(index.Host, { key: 'a9a4e62079f2794dd47668a07fd850a33476f473' }, index.h("vds-media", { key: 'b34dd7d978091396aa8ad56fb318f489d16399a3', class: classes }, index.h("vds-audio", { key: 'cb5fa9682c5f0fc382fd4f12b411cf7f67d635fd', class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, index.h("audio", { key: 'fbd2a4432612073c44e94281f97ab745a5643542', preload: this.preload, src: this.src }, index.h("slot", { key: 'ee727f8d1e5bb6b2dcc11f6086ac88648e6064d5' }))), index.h("div", { key: 'dd9644e6d415b0cf75ff5b7c1b3e23ad85dc87a2', class: "stzh-audio__controls" }, index.h("div", { key: 'f3801484be170c497c599c98a8885f7c748324d3', class: "stzh-audio__loader-overlay" }, index.h("stzh-loader", { key: 'cef34e12e2ca9ead973170b568b1313184270656', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), index.h("div", { key: '3d6ca53bb6cdbc0b22e3f5f981898556bc40ea20', class: "stzh-audio__controls-top" }, index.h("vds-time-slider", { key: '4d73e93ad470b900223212bc112bbdb80bedaab9', class: "stzh-audio__slider is-time" }, index.h("div", { key: 'af6e66e8556d5b83b4b16d9a33b301a80513a8cc', class: "stzh-audio__slider-track" }), index.h("div", { key: '184c7eafd92b4d09ce524e1aa4bfeda9f3e37daa', class: "stzh-audio__slider-track is-fill" }), index.h("div", { key: 'b7417b350ccb4705c1c8b6bb9f3ba15e8950efba', class: "stzh-audio__slider-thumb-container" }, index.h("div", { key: 'b3aa0e0e4b91093b1dd679bb910ed0456ab38c5d', class: "stzh-audio__slider-thumb" })), index.h("div", { key: 'fc7a0c1e0e140790b29ccda6f35d49976d6b406b', class: "stzh-audio__media-preview-container" }, index.h("vds-slider-value-text", { key: 'ce88c561828866cb0acb563af5b05763ff25ab11', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), index.h("div", { key: '2858a63a9adaa096e0c8436001409daf6bc4159b', class: "stzh-audio__controls-bottom" }, index.h("div", { key: 'b59d57e040de39b86c75c3818435b61a12a4ca28', class: "stzh-audio__controls-bottom-left" }, index.h("stzh-tooltip", { key: '24e0df0634a5128b5783c99ecfe769a9ee196a01' }, index.h("vds-play-button", { key: '8ffa4308875f1ed1058c43fad076624a67d81a0a', class: "stzh-audio__button is-play" }, index.h("stzh-icon", { key: '75e1c47fa420a8ce32726623d7e7c6cf20b39886', class: "stzh-audio__played", name: "play" }), index.h("stzh-icon", { key: 'a75d277d2be80e0a911bb3d390ceab37b3cec161', class: "stzh-audio__paused", name: "pause" })), index.h("span", { key: '6af78bdb8aa21d9a282b1266f36c50ff752d30a0', slot: "content" }, index.h("span", { key: '7de26291df7713e91d0d596ae1be1e116e6f66f6', class: "stzh-audio__played" }, this.localization.play), index.h("span", { key: '3215075a604fda21e23ce8464b1c814aa3a5a7c7', class: "stzh-audio__paused" }, this.localization.pause))), index.h("div", { key: 'e81bdc0540b8fc0965434006035ef7b24e324e29', class: "stzh-audio__time" }, index.h("vds-time", { key: '1f8bec9e4150c2318baab5139fff1c6d0f391391', type: "current" }), index.h("span", { key: '4673c8f5abfa7caa7f4ce3ef7229f87395a6686a', class: "stzh-audio__time-separator" }, "/"), index.h("vds-time", { key: '12c2d5b94f386ef80703aacb6054e4d59b62407c', type: "duration" })), index.h("stzh-tooltip", { key: 'e722d87656e4c641280b920a69b88e4db6d80290' }, index.h("vds-mute-button", { key: 'c3ef037ba77c8fa5c39780c223b49c6071d395d6', class: "stzh-audio__button is-mute" }, index.h("stzh-icon", { key: '3ee75a8b3a16868cdc23ba3cb48d39fdb93c5adf', class: "stzh-audio__muted", name: "volume-medium" }), index.h("stzh-icon", { key: 'd7a36d3bf8812ad5c5fd524cb8d2bd0523aff9fa', class: "stzh-audio__unmuted", name: "silent-mode" })), index.h("span", { key: 'ceda27f36038f72afbdb6c0bb36a02cbcc644a3a', slot: "content" }, index.h("span", { key: 'e460232ed1d24eb9cda3660325615e4eb5f62652', class: "stzh-audio__muted" }, this.localization.mute), index.h("span", { key: 'e09def3437860e70d20447598cf2b89260e00870', class: "stzh-audio__unmuted" }, this.localization.unmute))), index.h("vds-volume-slider", { key: 'f52435ecbd6f090cede25d5eb85a9872aa25b682', class: "stzh-audio__slider is-volume" }, index.h("div", { key: 'd0f0c9a56784ae30b00349ed061998560ba4cc5f', class: "stzh-audio__slider-track" }), index.h("div", { key: '16d70abb0c1dd4b35902f92ca739dbaa12a25af3', class: "stzh-audio__slider-track is-fill" }), index.h("div", { key: 'abb75284bd50af0b149c95c277bcffe83c674a91', class: "stzh-audio__slider-thumb-container is-shown" }, index.h("div", { key: '7db4a64e74f5717170ec5c4cf2a10034fde7cefb', class: "stzh-audio__slider-thumb" })), index.h("div", { key: 'b21e57d447a5f718c5f38f2183eb1e78a98aa421', class: "stzh-audio__media-preview-container" }, index.h("vds-slider-value-text", { key: 'c763af6747e8a6a2d00c072886a89cd5b887dd33', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), index.h("div", { key: '523b9bc24ab364a13e20e610ae0096e7b0979f18', class: "stzh-audio__controls-bottom-right" }, hasTranscript &&
-            index.h("stzh-tooltip", { key: '6447e562a8eae611dce0cd7d309618b68977ec3d', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, index.h("button", { key: '23b46ece641d0d8b6a21db8d49db6f719a8316f8', class: {
+        return (index.h(index.Host, { key: '1b23115241d893cc9295af7ffcd235a73374f40a' }, index.h("vds-media", { key: '9116beb8e3fa314500b42c2e4c4524b17d6a073c', class: classes }, index.h("vds-audio", { key: '11abee2c6077dd19ae3f39b1b4e5b2e0089b102a', class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, index.h("audio", { key: '33969256148395a69c9a89eb1f56076e3510792b', preload: this.preload, src: this.src }, index.h("slot", { key: '0dc1790866335339aade9d3b951540cb213345b4' }))), index.h("div", { key: '52b15327abffd863dd6301094cb83147c664f602', class: "stzh-audio__controls" }, index.h("div", { key: '852f475c94911e2f191447477fd20740aa1e93d6', class: "stzh-audio__loader-overlay" }, index.h("stzh-loader", { key: 'e40ffb2647b79500225fa442ba1accb6b955eb9a', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), index.h("div", { key: '96e04531a69b2e22dc7597909abc3b64dca95e7e', class: "stzh-audio__controls-top" }, index.h("vds-time-slider", { key: 'b5ab66b07c6124412040229f1f8bf198c7bff244', class: "stzh-audio__slider is-time" }, index.h("div", { key: 'c9718991e43b7fc1592be15414f4364fea2d3e5f', class: "stzh-audio__slider-track" }), index.h("div", { key: 'ed44a140c091b745189e2b3caa7adc400095e72e', class: "stzh-audio__slider-track is-fill" }), index.h("div", { key: '0ae7b1250b47f77f221af25abb67474c26bb4105', class: "stzh-audio__slider-thumb-container" }, index.h("div", { key: 'caba0a84627f5ca15e9b5085b1368144946bf9b8', class: "stzh-audio__slider-thumb" })), index.h("div", { key: '29f2113170e7f54c6d8226076704feb06497b820', class: "stzh-audio__media-preview-container" }, index.h("vds-slider-value-text", { key: '9638bd7c5a30ef07ca81f21984de90fec2de5cb6', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), index.h("div", { key: '3d0d0db1da198509746bb13a8bba223ab1e91069', class: "stzh-audio__controls-bottom" }, index.h("div", { key: '738848fc707567f4b73bc94d552fc50129a4d78b', class: "stzh-audio__controls-bottom-left" }, index.h("stzh-tooltip", { key: '0167ee85cb9297cc67817ebf3536c757cd942f8f' }, index.h("vds-play-button", { key: '0edfb4e77f17da9ce2763313086725d98d5b263f', class: "stzh-audio__button is-play" }, index.h("stzh-icon", { key: '3c459c85a5fd8c12f992c1ba9429fd700e3120ed', class: "stzh-audio__played", name: "play" }), index.h("stzh-icon", { key: 'd76f6edad3de9bd65a7ec6ce6b5a44481a5f7d13', class: "stzh-audio__paused", name: "pause" })), index.h("span", { key: '4d15ee3f00960aeb3c455d4a696372c52e1c819f', slot: "content" }, index.h("span", { key: 'ccc0f1eae7d7d2591a85ebec219eb6bab1223ae7', class: "stzh-audio__played" }, this.localization.play), index.h("span", { key: '56eeda2aa061e8f424616f0d4298116755623835', class: "stzh-audio__paused" }, this.localization.pause))), index.h("div", { key: '17e87064c788e5ba971bc17a47edf6c2d43a5295', class: "stzh-audio__time" }, index.h("vds-time", { key: '0e05e1a03c7a06dcef0fd5fe2e4fcd0cf36edf24', type: "current" }), index.h("span", { key: '52458339f70e6ffb07a76e1be92ef31c6719365a', class: "stzh-audio__time-separator" }, "/"), index.h("vds-time", { key: '606787d40522d8ad5fbc9698d79acf7c9b332f92', type: "duration" })), index.h("stzh-tooltip", { key: 'fb235514c0d3e739d4b9af82f5b6187f54924ab7' }, index.h("vds-mute-button", { key: '3978fc8a65169f8a9a545cedd9f886fd76394eda', class: "stzh-audio__button is-mute" }, index.h("stzh-icon", { key: 'f2fb23e8b79868d7c74138141916ec46c14cfe43', class: "stzh-audio__muted", name: "volume-medium" }), index.h("stzh-icon", { key: '1ef31dbb5229d3b3a0cb5af1cce7891f991e05e1', class: "stzh-audio__unmuted", name: "silent-mode" })), index.h("span", { key: '03b8fa6c9a096ffabb6559a12b8e8f1db7c5143d', slot: "content" }, index.h("span", { key: '67872f195868330d0db725387630021614a3e343', class: "stzh-audio__muted" }, this.localization.mute), index.h("span", { key: '855563f45a6046ef2da0b05e880be1a77cbc9432', class: "stzh-audio__unmuted" }, this.localization.unmute))), index.h("vds-volume-slider", { key: '542e2d6e4fb5b1697f1930112413285f76e9b3ad', class: "stzh-audio__slider is-volume" }, index.h("div", { key: '63f6731455d71bb820e17bb9b15d98ecf940e85d', class: "stzh-audio__slider-track" }), index.h("div", { key: 'b5f5022c706b512c3dadb82e33f16386fd46f891', class: "stzh-audio__slider-track is-fill" }), index.h("div", { key: '7bd98458d99a472f74db589005bfb136b4dcb780', class: "stzh-audio__slider-thumb-container is-shown" }, index.h("div", { key: '1ef6979b7272b0120e4e265b783ddd90396d0aa8', class: "stzh-audio__slider-thumb" })), index.h("div", { key: '44a65bdef967555f2225248f5182dc1a9b1c0916', class: "stzh-audio__media-preview-container" }, index.h("vds-slider-value-text", { key: '7a505f0519c9251983117d6f137953139bb39527', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), index.h("div", { key: '28418a36b3e1888b38b27ca261e00c5d3b2d694c', class: "stzh-audio__controls-bottom-right" }, hasTranscript &&
+            index.h("stzh-tooltip", { key: '1b20a90b47895c71954be770b4f3b8b6264ca30e', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, index.h("button", { key: '83d5fd32da0c48b36ad144e63ead11a9308bc5c3', class: {
                     "stzh-audio__button is-transcript": true,
                     "is-active": this.transcriptShown
-                }, onClick: () => this.transcriptShown = !this.transcriptShown, "s-object-id": this.transcriptAnalyticsId || (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, index.h("stzh-icon", { key: 'aaae15b9df90972fd068d81a63d88f48e27c623f', name: "transcript" }))), index.h("stzh-tooltip", { key: '69f11cc70b1330d471aa7319b563ff0d74abb245', content: this.localization.download }, index.h("a", { key: '6250be441aef11adb46919be6555905ccb78d4ee', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, index.h("stzh-icon", { key: '933d7086d844eb36ddcff471ca21781bd502f560', name: "download" })))))), index.h("div", { key: '4d3a56e1f93557060b4c151dcd5481e6cd18c686', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : index.h("slot", { name: "transcript" })))));
+                }, onClick: () => this.transcriptShown = !this.transcriptShown, "s-object-id": this.transcriptAnalyticsId || (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, index.h("stzh-icon", { key: 'ccb1ab0d685c7bbd43c126003c806681630c485a', name: "transcript" }))), index.h("stzh-tooltip", { key: 'd72761efb2444057e9ef2d2c8552757e28207b64', content: this.localization.download }, index.h("a", { key: '4bb2f4a31cdb9f1ab736f4d99bccac2c9f603e2d', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, index.h("stzh-icon", { key: '66457bf9f6ed279c67e88a102a576a771436157e', name: "download" })))))), index.h("div", { key: 'aca2aa4d6c0e3308abf424c23b2a0fee923b1bfd', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : index.h("slot", { name: "transcript" })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-badge_3.cjs.entry.js

@@ -20,7 +20,7 @@ const StzhBadge = class {
             "stzh-badge": true,
             [`stzh-badge--type-${this.type}`]: !!this.type
         };
-        return (index.h(index.Host, { key: '37063f952a5625d680ff7643a3146f0d1b44ebb1', filled: !!this.label }, index.h("div", { key: '582955f68358bf6f3712cb14c748c63c220d50d9', class: classes }, this.label || index.h("slot", { key: 'dd74c9995b94b7493b0f4a971604c3f2f021021a' }))));
+        return (index.h(index.Host, { key: '99a44fd265a36597da37135322e50203056a996a', filled: !!this.label }, index.h("div", { key: 'e9d4f75f22ae5450d0e70e9a0ab57d455e3226e0', class: classes }, this.label || index.h("slot", { key: '9ab4e722728d3c1355010690f4054d86ce5a59c5' }))));
     }
 };
 StzhBadge.style = StzhBadgeStyle0;
@@ -195,7 +195,7 @@ const StzhButton = class {
             [`stzh-button--type-${this.type}`]: !!this.type,
             [`stzh-button--${this.variant}`]: !!this.variant,
         };
-        return (index.h(index.Host, { key: '84c9232cd835c37c71c280af67a36dc807cff7f5', tabindex: this.disabled ? null : '-1', onFocus: this.onRootFocus }, this.href ?
+        return (index.h(index.Host, { key: 'cd5a593d9695e38e26c60e742acee2e93cd12df2', tabindex: this.disabled ? null : '-1', onFocus: this.onRootFocus }, this.href ?
             index.h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== 'undefined'
                     ? (this.a11yDisabled ? 'true' : 'false') : null, "aria-expanded": typeof this.a11yExpanded !== 'undefined'
                     ? (this.a11yExpanded ? 'true' : 'false') : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))

package/dist/cjs/stzh-breadcrumb_2.cjs.entry.js

@@ -156,7 +156,7 @@ const StzhBreadcrumb = class {
             [`stzh-breadcrumb--${this.variant}`]: !!this.variant,
             "rs_skip": true // will prevent component being read by readspeaker
         };
-        return (index.h(index.Host, { key: '94e2c29dac3b984c04d7034f0e3db24a9d9b5dc9' }, index.h("div", { key: '08fc0a3b21a2ab1387d465f888babf4aec32d9d3', class: classes }, index.h("nav", { key: '4b7df97b6699e7d9834ffc6e4e2674e355187fff', ref: (el) => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, index.h("ol", { key: 'b61255f4433045b2c7521a8f59325f8953b08e6b', class: "stzh-breadcrumb__list" }, this._items.map((item, index$1) => index.h(index.Fragment, null, index.h("li", { class: {
+        return (index.h(index.Host, { key: 'f9543487d5c613df43dcabbb930e4ae0d4d59776' }, index.h("div", { key: '8f2920f5c137596a1092e3991a3ab060ad9648a7', class: classes }, index.h("nav", { key: '3e2b4c1d82b92499fb4c0b7d1d9b468d68207221', ref: (el) => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, index.h("ol", { key: 'fba9ce0dbeb3d63997ba3a129a1b6a9f5218a561', class: "stzh-breadcrumb__list" }, this._items.map((item, index$1) => index.h(index.Fragment, null, index.h("li", { class: {
                 "stzh-breadcrumb__item": true,
                 "is-last": index$1 + 1 === this._items.length,
                 "is-first": index$1 === 0,

package/dist/cjs/stzh-buttongroup.cjs.entry.js

@@ -15,7 +15,7 @@ const StzhButtongroup = class {
         const classes = {
             "stzh-buttongroup": true
         };
-        return (index.h(index.Host, { key: 'a65fc9caab24d3489d79cf4074632867bf0f19e9' }, index.h("div", { key: '88d46996673926bc38da429201eee5a2c5761b00', class: classes }, index.h("slot", { key: '3066111876f14d938980e489077d149c696dc92c' }))));
+        return (index.h(index.Host, { key: '2bb35a0c916a52482875947aa46ffb4c6f302a63' }, index.h("div", { key: 'bc4ef63b4902921608c2196469f120c283945705', class: classes }, index.h("slot", { key: '9938ffcb428caa993e93b7a5b9ba5932e8a172c6' }))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-card-navigation.cjs.entry.js

@@ -46,7 +46,7 @@ const StzhCardNavigation = class {
         };
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? 'a' : 'button';
-        return (index.h(index.Host, { key: '3393431bd69c151af056dc870ca2a4a2d0c5ced3', "has-lead": hasLead }, index.h("article", { key: '667e744cb52f37173895986baab41d8c1dd34dce', class: classes, "aria-label": this.heading, role: "listitem" }, index.h("div", { key: '52b9292c459198070dd755f406c931fb50867841', class: "stzh-card-navigation__wrapper" }, index.h(Heading, { key: '9b0db871e70bed5c44c783e3ba943139d6278396', class: "stzh-card-navigation__title" }, index.h(TitleLink, { key: 'b083fc0b84503e58ae4b734c9ddd72f0dea03949', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (index.h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" }))))), index.h("div", { key: '30a7d08a3a7a8b815aa82bd59c9d510afe46f366', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" }))), index.h("div", { key: '670d21d2482f625a70547823dc15abc598d6bb4b', class: "stzh-card-navigation__arrow" }, index.h("stzh-icon", { key: '93aa6f995119f80e954bc31b087882bd615c2ea0', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
+        return (index.h(index.Host, { key: '6baeef74c234db5b0ff49edb94f8be658db8fa51', "has-lead": hasLead }, index.h("article", { key: '0e4c40bbe12e18da21d462e3282a41780c83a1ec', class: classes, "aria-label": this.heading, role: "listitem" }, index.h("div", { key: '15d760a01d78bb1ad7e20ef21a05f5724721db7b', class: "stzh-card-navigation__wrapper" }, index.h(Heading, { key: '866ed2ec132488eb7d7baf975f4c22cab4d9c88f', class: "stzh-card-navigation__title" }, index.h(TitleLink, { key: '82d857e1ba4aa79678d30eb98817a1720e3ae2c2', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (index.h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" }))))), index.h("div", { key: '3bdc587f8355b46c6810838cd24fd1618477556c', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" }))), index.h("div", { key: 'c88a378cbf902150e145d46e6bf421e550587b7e', class: "stzh-card-navigation__arrow" }, index.h("stzh-icon", { key: '75cc2dfb254007fb3b7b6b19ead4d4a2a2ea49d1', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-card-navigation.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-card-navigation.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,yqPAAyqP,CAAC;AACxsP,iCAAe,qBAAqB;;MCavB,kBAAkB;;;;QAkCrB,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,sBAAsB;gBACjC,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;uBAzBwB,EAAE;4BAGkB,GAAG;oBAG1B,EAAE;8BAG0B,KAAK;;IAkBxD,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAIA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE7D,MAAM,OAAO,GAAG;YACd,sBAAsB,EAAE,IAAI;YAC5B,gCAAgC,EAAE,OAAO;YACzC,+BAA+B,EAAE,IAAI,CAAC,cAAc;SACrD,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAE7C,QACEC,QAACC,UAAI,iEAAW,OAAO,IACrBD,sEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChEA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,QAAC,OAAO,qDAAC,KAAK,EAAC,6BAA6B,IAC1CA,QAAC,SAAS,qDACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,OAAO,IACXA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,GAAQ,KAEjGA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC9DA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACS,CACJ,EAEVA,kEAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,CAC7F,EAENA,kEAAK,KAAK,EAAC,6BAA6B,IACtCA,wEAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;KACH;;;;;;;","names":["hasSlot","h","Host"],"sources":["src/components/CMS/stzh-card-navigation/stzh-card-navigation.scss?tag=stzh-card-navigation&encapsulation=scoped","src/components/CMS/stzh-card-navigation/stzh-card-navigation.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-card-navigation {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  gap: space('small');\n  background-color: $colorGrey10;\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n  }\n\n  &:hover &__arrow-icon {\n    transform: translateX(4px);\n  }\n\n  &__wrapper {\n    @include spaceCurve('padding-left', 'regular');\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    // safe space padding top/bottom when it would go to three lines\n    padding-top: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n\n  &__title {\n    @include font('heavy');\n    @include fontCurve('teaser');\n    @include wordWrap;\n    color: $colorPrimary70;\n    margin: 0;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    font-size: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: $colorPrimary;\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontCurve('p2');\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__arrow {\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 64px;\n    height: 64px;\n    color: $colorPrimary70;\n    background-color: $colorSecondary30;\n  }\n\n  &__arrow-icon {\n    transition: transform 150ms ease;\n    --size: #{iconSize('large')};\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__wrapper {\n    @include spaceCurve('padding-right', 'regular');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'large');\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &--has-lead &__arrow {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 44px;\n    height: 44px;\n  }\n\n  /* Hyphens */\n  &--hyphens &__title,\n  &--hyphens &__title-link {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport { StzhCardNavigationClickEvent } from '../../../index';\nimport { hasSlot } from '../../../utils/utils';\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n */\n@Component({\n  tag: 'stzh-card-navigation',\n  styleUrl: 'stzh-card-navigation.scss',\n  scoped: true,\n})\nexport class StzhCardNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = '';\n\n  /** Heading level */\n  @Prop() headingLevel: '1' | '2' | '3' | '4' = '3';\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = '';\n\n  /** 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<StzhCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: 'stzh-card-navigation',\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute('s-object-id', objectId);\n      }\n    });\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, 'lead');\n\n    const classes = {\n      'stzh-card-navigation': true,\n      'stzh-card-navigation--has-lead': hasLead,\n      'stzh-card-navigation--hyphens': this.hyphensEnabled,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? 'a' : 'button';\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-card-navigation__wrapper\">\n            <Heading class=\"stzh-card-navigation__title\">\n              <TitleLink\n                ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n                class=\"stzh-card-navigation__title-link\"\n                href={this.href}\n                target={this.target}\n                onClick={this.handleCardClick}\n              >\n                {this.heading ? (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)} innerHTML={this.heading}></div>\n                ) : (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n                    <slot name=\"heading\"></slot>\n                  </div>\n                )}\n              </TitleLink>\n            </Heading>\n\n            <div class=\"stzh-card-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n          </div>\n\n          <div class=\"stzh-card-navigation__arrow\">\n            <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-card-navigation.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,yqPAAyqP,CAAC;AACxsP,iCAAe,qBAAqB;;MCavB,kBAAkB;;;;QAkCrB,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,sBAAsB;gBACjC,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;uBAzBwB,EAAE;4BAGkB,GAAG;oBAG1B,EAAE;8BAG0B,KAAK;;IAkBxD,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAIA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE7D,MAAM,OAAO,GAAG;YACd,sBAAsB,EAAE,IAAI;YAC5B,gCAAgC,EAAE,OAAO;YACzC,+BAA+B,EAAE,IAAI,CAAC,cAAc;SACrD,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAE7C,QACEC,QAACC,UAAI,iEAAW,OAAO,IACrBD,sEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChEA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,QAAC,OAAO,qDAAC,KAAK,EAAC,6BAA6B,IAC1CA,QAAC,SAAS,qDACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,OAAO,IACXA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,GAAQ,KAEjGA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC9DA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACS,CACJ,EAEVA,kEAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,CAC7F,EAENA,kEAAK,KAAK,EAAC,6BAA6B,IACtCA,wEAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;KACH;;;;;;;","names":["hasSlot","h","Host"],"sources":["src/components/stzh-card-navigation/stzh-card-navigation.scss?tag=stzh-card-navigation&encapsulation=scoped","src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-card-navigation {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  gap: space('small');\n  background-color: $colorGrey10;\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n  }\n\n  &:hover &__arrow-icon {\n    transform: translateX(4px);\n  }\n\n  &__wrapper {\n    @include spaceCurve('padding-left', 'regular');\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    // safe space padding top/bottom when it would go to three lines\n    padding-top: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n\n  &__title {\n    @include font('heavy');\n    @include fontCurve('teaser');\n    @include wordWrap;\n    color: $colorPrimary70;\n    margin: 0;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    font-size: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: $colorPrimary;\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontCurve('p2');\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__arrow {\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 64px;\n    height: 64px;\n    color: $colorPrimary70;\n    background-color: $colorSecondary30;\n  }\n\n  &__arrow-icon {\n    transition: transform 150ms ease;\n    --size: #{iconSize('large')};\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__wrapper {\n    @include spaceCurve('padding-right', 'regular');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'large');\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &--has-lead &__arrow {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 44px;\n    height: 44px;\n  }\n\n  /* Hyphens */\n  &--hyphens &__title,\n  &--hyphens &__title-link {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport { StzhCardNavigationClickEvent } from '../../index';\nimport { hasSlot } from '../../utils/utils';\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n */\n@Component({\n  tag: 'stzh-card-navigation',\n  styleUrl: 'stzh-card-navigation.scss',\n  scoped: true,\n})\nexport class StzhCardNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = '';\n\n  /** Heading level */\n  @Prop() headingLevel: '1' | '2' | '3' | '4' = '3';\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = '';\n\n  /** 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<StzhCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: 'stzh-card-navigation',\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute('s-object-id', objectId);\n      }\n    });\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, 'lead');\n\n    const classes = {\n      'stzh-card-navigation': true,\n      'stzh-card-navigation--has-lead': hasLead,\n      'stzh-card-navigation--hyphens': this.hyphensEnabled,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? 'a' : 'button';\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-card-navigation__wrapper\">\n            <Heading class=\"stzh-card-navigation__title\">\n              <TitleLink\n                ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n                class=\"stzh-card-navigation__title-link\"\n                href={this.href}\n                target={this.target}\n                onClick={this.handleCardClick}\n              >\n                {this.heading ? (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)} innerHTML={this.heading}></div>\n                ) : (\n                  <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n                    <slot name=\"heading\"></slot>\n                  </div>\n                )}\n              </TitleLink>\n            </Heading>\n\n            <div class=\"stzh-card-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n          </div>\n\n          <div class=\"stzh-card-navigation__arrow\">\n            <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-card-searchresult.cjs.entry.js

@@ -133,7 +133,7 @@ const StzhCardSearchresult = class {
         };
         const Heading = `h${this.headingLevel}`;
         const HeadingLink = this.href ? 'a' : 'div';
-        return (index.h(index.Host, { key: '9f52f014b5610e1ac66a29bd2e5f9b680e44b9a8', "has-image": hasImage }, index.h("article", { key: 'e9e11cb6bc606fc0b8c6b7d8b5cca62d0c822b22', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && index.h("stzh-tag", { key: '8d992ee6baaef8680563b01709221edda007f84c', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), index.h("div", { key: '47996f700bdbe2d20ad44d71dc78dac0e02d1db1', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (index.h("stzh-breadcrumb", { key: '7e94de0e8bc190c8329c6060028d3b8ecae62428', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && index.h("div", { key: '091936c4b313d18810af77baaf34dbcadcb42e4d', class: "stzh-card-searchresult__dateline" }, this.dateline), index.h(Heading, { key: 'bb3dbe0022e7da6e7d365e6112dbaee0539f4341', class: "stzh-card-searchresult__heading" }, index.h(HeadingLink, { key: 'f2297ebd653ffcf28921e796199bc6647a7e1b16', 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 ? (index.h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" })))))), index.h("div", { key: '0e1e73ac59e0c0e495cc4b7adfd52ffa1cad0669', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (index.h("div", { key: 'ccf06877404e8bbec139f2a434a804766c462b0c', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (index.h("div", { key: 'b814cb1b0229507c988505a2d3637ee9d9e427b3', class: "stzh-card-searchresult__event-date" }, index.h("span", { key: '146d72fc9cf251f6b62b5d7778ffbe7c325cf3ba' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (index.h("span", { key: 'e92eeebe9110504d3feb3c61783d42847bda4dbe' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && index.h("div", { key: '5d9fb7738b5d3ef327bacd55512d516ab2a0e5b7', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), index.h("div", { key: '5bec7ba382d868e0c5dbd576fc1c06be85db3586', class: "stzh-card-searchresult__description" }, this.description ? this.description : index.h("slot", { name: "description" }))), index.h("div", { key: '36ffbf77ffb8e85a96a83b059646dbaa11d193d6', class: "stzh-card-searchresult__image" }, eventDateStart && (index.h("div", { key: 'a5452e40e5a3f91d6ab7afb9a45a2f6fa3992774', class: "stzh-card-searchresult__event-date-teaser" }, index.h("div", { key: 'f319566cd791960231cb00ee24d7d530c8328699', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), index.h("div", { key: '16f8311595ed8baa05be82e66600e3ee3898bbb8', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), index.h("div", { key: 'e1fb90717f9585da0d02b59673f50a6aa641522d', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && index.h("div", { key: '84d40cc8a0984359babd8f4a52c6acc393982a59', class: "stzh-card-searchresult__topic" }, this.topic), this.service && index.h("div", { key: '4acda86d32ad00db8f9c9b03568ec3e50e82c1e0', class: "stzh-card-searchresult__service" }, this.service), index.h("slot", { key: '475bd78ea0f24082f0ebdab59d0d1f09a3e30830', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (index.h("stzh-ratio", { key: '6860f6f83f00e8ffc1762bf28eec1794daa930e5', ratio: "21:9", "ratio-small": "1:1" }, index.h("div", { key: '04c4b8b687739015d5f4c8082072e8d6fbc9a407', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '3c4793cf50456f1a43978d26c1f26ff5fd318e83', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (index.h("stzh-datalist", { key: 'c25382d1831e6cd2f85af683125e35e5822a859f', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (index.h("div", { key: '15b007d227a3bff6e26e8efd14cfa775f930d472', class: "stzh-card-searchresult__meta" }, index.h("div", { key: '1e29fc122bbfb0f8da2b81af7c45e2c3ea1afa51', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '07cb7b838ccd2de4fae15ac0e9ed19342aee8d20', class: "stzh-card-searchresult__download" }, index.h("div", { key: 'c35e7fd55712ee790d9a6db0bc2ee97a612208a0', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (index.h("div", { key: 'd6d377ea87bfba938e15411de6448cfe8f24f3e1', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (index.h("div", { key: '79c14ba462d51fa570beae2a61b96c1ce6533ff7', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), index.h("div", { key: '2306d3b96ccf1f4187d800dc533e8295142ee305', class: "stzh-card-searchresult__download-button" }, index.h("stzh-icon", { key: '3744f20328018f7aa40fae4cf2298dde287ee01f', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
+        return (index.h(index.Host, { key: '6ad4d06898b0ea6d3e94748e81d3302638a12d71', "has-image": hasImage }, index.h("article", { key: 'ade897bba1a380aa80a2372a446cf2cb28ebad37', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && index.h("stzh-tag", { key: '384f159abcdd41f043dd306717a5bc46c84eaa6a', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), index.h("div", { key: '2c5178485689f02d40b276d3517590b9ebfdffba', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (index.h("stzh-breadcrumb", { key: 'ec640ba9f1febd69660e33388a6c48a4c9683214', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && index.h("div", { key: '7be07cc63c0415ac8d2736a1850ea489f9bd1594', class: "stzh-card-searchresult__dateline" }, this.dateline), index.h(Heading, { key: 'c0a580dfc398730a2f34b5ec9a87eb98e5bef46d', class: "stzh-card-searchresult__heading" }, index.h(HeadingLink, { key: '116d4e85f528b4610bb374e96d6aba9078cc3fe8', 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 ? (index.h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" })))))), index.h("div", { key: '930549d901b4031384589221af84b30456073098', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (index.h("div", { key: 'd4179d9c03a694044d30160e85bb2397485c2699', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (index.h("div", { key: '2591cb7836d7ba51ef7659e87bbb4feb718dcf51', class: "stzh-card-searchresult__event-date" }, index.h("span", { key: '827e37a240e4ef982984ce25cc96d5a7741ebd59' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (index.h("span", { key: 'ab507961c5f1db052f96171adf26872e3b7b2cf7' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && index.h("div", { key: '038a9d68837838eaaf0e6e62e179bd4de6271a5d', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), index.h("div", { key: '351bdd7e66e7e05c53a725374dbf9320088d099f', class: "stzh-card-searchresult__description" }, this.description ? this.description : index.h("slot", { name: "description" }))), index.h("div", { key: '2fa3743d7cec3fc5eae748fcf8447970162aa36d', class: "stzh-card-searchresult__image" }, eventDateStart && (index.h("div", { key: '3f61274d2365b1ee6ce89a8f1f9d95d2780bed7e', class: "stzh-card-searchresult__event-date-teaser" }, index.h("div", { key: 'a5b3242063e118a130e3dc55b7f5fea8c9cbf5bd', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), index.h("div", { key: '8ff38d2d75564580f5ec2d3ee9278626f06a9928', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), index.h("div", { key: '4d192b51db436e2158d91f421b083a98d72fad84', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && index.h("div", { key: 'cd4328660085fdb8de571047c5a8090c48123b7d', class: "stzh-card-searchresult__topic" }, this.topic), this.service && index.h("div", { key: 'a2530097161a312eab865b9d7d649536e745434f', class: "stzh-card-searchresult__service" }, this.service), index.h("slot", { key: '564131288d1b98ad7bcc27b411e276fda6b24cff', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (index.h("stzh-ratio", { key: '1314063779440e340e611e0b4505346a63e0e93f', ratio: "21:9", "ratio-small": "1:1" }, index.h("div", { key: 'c7c5b6975aeae72fedf13acdea35e5808228a3fc', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '1680c46a075ae0b703183d8aa8edb370ed146c50', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (index.h("stzh-datalist", { key: 'e19675828fb638bcbd93c7c41c1fa9f4d1624687', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (index.h("div", { key: 'ccb298045c0a99a15f690fc4a67fc74d12600341', class: "stzh-card-searchresult__meta" }, index.h("div", { key: '2c7e93489d01c9f4cd98b7b9033fee697c6ceb0e', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '571cbf8dd7d20d0db84afc542dc49bbb6b83c3d3', class: "stzh-card-searchresult__download" }, index.h("div", { key: 'fc7c9e3f0d1069ce58772f09a98f8588be5fd91c', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (index.h("div", { key: '8f4fb61fa486fcdf99eaa5bd0dae1685c9b31d26', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (index.h("div", { key: '82dd5efc8fa83aec6176d0a2b71c85eab48d730a', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), index.h("div", { key: 'b9e1fcd20e00a1493af5becb4ed86088aeabda00', class: "stzh-card-searchresult__download-button" }, index.h("stzh-icon", { key: '33f035e04965cb8b14ca075e47dcad885b481ec8', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-card-searchresult.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-card-searchresult.entry.cjs.js","mappings":"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","names":["hasSlot","h","Host","Fragment"],"sources":["src/components/CMS/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/CMS/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: var(--service-background-color);\n    color: var(--service-color);\n    padding: space('xsmall') space('medium');\n    text-align: center;\n\n    @include mq($from: small) {\n      min-width: 180px;\n    }\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>,&nbsp;{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}
+{"file":"stzh-card-searchresult.entry.cjs.js","mappings":"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","names":["hasSlot","h","Host","Fragment"],"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: var(--service-background-color);\n    color: var(--service-color);\n    padding: space('xsmall') space('medium');\n    text-align: center;\n\n    @include mq($from: small) {\n      min-width: 180px;\n    }\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>,&nbsp;{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/cjs/stzh-card-superteaser.cjs.entry.js

@@ -136,7 +136,7 @@ const StzhCardSuperteaser = class {
         };
         const Heading = `h${this.headingLevel}`;
         const HeadingLink = this.href ? 'a' : 'div';
-        return (index.h(index.Host, { key: '243e5f4de48ca7bd87a8438bbba6da5b8b5cbee7', "has-image": hasImage }, index.h("article", { key: 'aac91a0d5fe741054065568a2244b3a0782d5379', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && index.h("stzh-tag", { key: '0cc0b045f9caf00a918921de3ab3987e714aa5f2', class: "stzh-card-superteaser__tag", label: this.tag, nonInteractive: true }), index.h("div", { key: '70a867f9962146612d902666f850eba8ad0496d9', class: "stzh-card-superteaser__heading-wrapper" }, this.breadcrumbItems && (index.h("stzh-breadcrumb", { key: 'd36a2919d87d230992ccfba2a98209e7a4de213e', class: "stzh-card-superteaser__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && index.h("div", { key: '38fc4d1cd3858f045167881c96f08329d6f20959', class: "stzh-card-superteaser__dateline" }, this.dateline), this.topic && index.h("div", { key: 'a237a5a335e9dc8acab176a51fb9a56bcbdcd3b0', class: "stzh-card-superteaser__topic" }, this.topic), index.h(Heading, { key: '6f9c5f8ff4d43d29b25e619b31de57db24c31154', class: `stzh-card-superteaser__heading ${utils.hasSlot(this.element, 'heading') ? 'stzh-card-superteaser__heading--slotted' : ''}` }, index.h(HeadingLink, { key: 'c22753bd8c790c4bd4539482830bbcf8d1c5f993', ref: el => (this.headingLinkElement = el), class: "stzh-card-superteaser__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (index.h("div", { class: "stzh-card-superteaser__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { class: "stzh-card-superteaser__heading-link-text", ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" })))))), index.h("div", { key: '25d6308e28b1dce1c7ef5c8db41849f6b2abfe15', class: "stzh-card-superteaser__description-wrapper" }, (eventDateStart || this.eventLocation) && (index.h("div", { key: '36bbef4240ce6bf8679cdaded7924ce04b02ee32', class: "stzh-card-superteaser__event-infos" }, eventDateStart && (index.h("div", { key: '615ad1a26661c3b2b483551dc5585ada2adcb1e0', class: "stzh-card-superteaser__event-date" }, index.h("span", { key: 'aadea5411e4ad15c11da622028c96da717b933dc' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (index.h("span", { key: 'd451940d718e0bb5273c37f049d7ec3ef64b2a88' }, !this.isOnHomepage && index.h("span", { key: '3f8a6d158cd898c5f27ef3aaa8aa443e9f5b10f0' }, ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && index.h("div", { key: 'f282e771fee84638dacaed8dfae5ef34a685bb9e', class: "stzh-card-superteaser__event-location" }, this.eventLocation))), index.h("div", { key: 'a02f7954fde980c37f28e79f3aa19a263cfeca08', class: `stzh-card-superteaser__description ${utils.hasSlot(this.element, 'heading') ? 'stzh-card-superteaser__description--slotted' : ''}` }, this.description ? this.description : index.h("slot", { name: "description" }))), index.h("div", { key: '2856d9912703f7b279c9ca21ae5b14551003606f', class: "stzh-card-superteaser__image" }, eventDateStart && (index.h("div", { key: '2a3cfa5cfe80f08b466872fc7ed288cd6d4d0566', class: "stzh-card-superteaser__event-date-teaser" }, index.h("div", { key: 'cb56d3361a5d264a4d1e5ca305f4cabc0e1470bc', class: "stzh-card-superteaser__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), index.h("div", { key: '0f73912e4559df4eb16512b8acf74d781799df1b', class: "stzh-card-superteaser__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), index.h("div", { key: '799f495172f62abeba6bbb43a520c5807b2463d5', class: "stzh-card-superteaser__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.service && index.h("div", { key: '18ce943077d0d30e90e35073a1ccac510c5860ea', class: "stzh-card-superteaser__service" }, this.service), index.h("slot", { key: '974ffd75ac2c9276c2ff0dab1cc39094cdd14e97', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (index.h("stzh-ratio", { key: 'ec5ecf48a324d1d7a5c8830431d173e1208ec57a', ratio: "2:1" }, index.h("div", { key: '6a1dec4e24d725fd9f7502fd77d42c69da82a3b3', class: "stzh-card-superteaser__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '5c9f7c6d52c5e8a8455d50c63be43bd97251564f', class: "stzh-card-superteaser__meta-wrapper" }, this.datalistItems && (index.h("stzh-datalist", { key: '3812c79f9201e2a6b87cfcf4c6f609850498f2e3', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (index.h("div", { key: '6d374221b71429b599989c30ca6e497c3cc75b17', class: "stzh-card-superteaser__meta" }, index.h("div", { key: '5d48fd059c32b0d8e610ead5ac20105f7f12e860', class: "stzh-card-superteaser__meta-list" }, this._meta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '3b5ba0fb071839acfc0b147adf98e95b35a4890a', class: "stzh-card-superteaser__download" }, index.h("div", { key: '221e137d66668043994ce17eb4d8d604691ee4fa', class: "stzh-card-superteaser__download-data" }, this.downloadHeading && (index.h("div", { key: '2dbdff1540ae7918e09328b43a6c6a87e805ae25', class: "stzh-card-superteaser__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (index.h("div", { key: '46791b933efe0b1f491b9d0f33c290a32628dfa9', class: "stzh-card-superteaser__download-meta-list" }, this._downloadMeta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__download-meta-list-item" }, meta))))))), index.h("div", { key: 'f4d9f246e4afbe1c5480dc713ecb470f6ae5b88c', class: "stzh-card-superteaser__download-button" }, index.h("stzh-icon", { key: '386eb37815559091e7a6e3d51f9a2ffb28062ea2', class: "stzh-card-superteaser__download-icon", name: "download" })))))))));
+        return (index.h(index.Host, { key: '4a755207f1eb529c29bbcb293f830351bf85dd0b', "has-image": hasImage }, index.h("article", { key: 'f7e85d2a50410333d200b620e22f5836962ba13e', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && index.h("stzh-tag", { key: '9d84bd2e1c52973e98506c1d8cd8772aa3517e19', class: "stzh-card-superteaser__tag", label: this.tag, nonInteractive: true }), index.h("div", { key: 'c20f09e9cb5f654f13f259582950353d2f7f3e7f', class: "stzh-card-superteaser__heading-wrapper" }, this.breadcrumbItems && (index.h("stzh-breadcrumb", { key: 'a18da51bab5547792821234e82d3963696ae56cf', class: "stzh-card-superteaser__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && index.h("div", { key: 'cabeb6345a5c5f1384aa44267a4aed9fe3875e38', class: "stzh-card-superteaser__dateline" }, this.dateline), this.topic && index.h("div", { key: '0ddc07cc825450fd328f712ac18642ddf2ac5e76', class: "stzh-card-superteaser__topic" }, this.topic), index.h(Heading, { key: 'd3b95485099bf097fb612260f38a0b1f56e69a60', class: `stzh-card-superteaser__heading ${utils.hasSlot(this.element, 'heading') ? 'stzh-card-superteaser__heading--slotted' : ''}` }, index.h(HeadingLink, { key: '89b8fdfb5dc84a1c6d14240355d723b9b8cbf010', ref: el => (this.headingLinkElement = el), class: "stzh-card-superteaser__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (index.h("div", { class: "stzh-card-superteaser__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (index.h("div", { class: "stzh-card-superteaser__heading-link-text", ref: el => (this.headingTextElement = el) }, index.h("slot", { name: "heading" })))))), index.h("div", { key: '6dda86a14003e7025f6f2b996e975b7bddd20b38', class: "stzh-card-superteaser__description-wrapper" }, (eventDateStart || this.eventLocation) && (index.h("div", { key: '9aaa7ef623dc0ce9eb7dca07941baf36721d824b', class: "stzh-card-superteaser__event-infos" }, eventDateStart && (index.h("div", { key: 'a9d383f55a7b0fdb2bc68e3f702c9bb7f89fe31d', class: "stzh-card-superteaser__event-date" }, index.h("span", { key: 'be021c66b64eff2127074909b4fa83f349740597' }, this.dateAdapter.format(eventDateStart, 'dateLong')), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (index.h("span", { key: 'f865eef810accebb8a8b26144c9ca2a33715d45d' }, !this.isOnHomepage && index.h("span", { key: '9880c25baf82442fbacb19352f28904dbec09c16' }, ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, 'time'))))), this.eventLocation && index.h("div", { key: 'c89de6c38da582da23179adbc0428483c7e5c239', class: "stzh-card-superteaser__event-location" }, this.eventLocation))), index.h("div", { key: 'a5225e44a5384de5b1b5e0ce30b5bac648c8dcb9', class: `stzh-card-superteaser__description ${utils.hasSlot(this.element, 'heading') ? 'stzh-card-superteaser__description--slotted' : ''}` }, this.description ? this.description : index.h("slot", { name: "description" }))), index.h("div", { key: 'ea9df0616e204643a1aee4891e3e97eec51c2a49', class: "stzh-card-superteaser__image" }, eventDateStart && (index.h("div", { key: '8a2f0eec8f4009bb8c8bcabc582110ec8a249e5b', class: "stzh-card-superteaser__event-date-teaser" }, index.h("div", { key: '8b9a2cea1dd19134c28105382f75417aae0472b4', class: "stzh-card-superteaser__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), index.h("div", { key: '5ee0649ccd3750ec9a870a7e920e1fd69a0f988a', class: "stzh-card-superteaser__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), index.h("div", { key: '7a39a5e27a622e6b782e389541e9cd2c94259772', class: "stzh-card-superteaser__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.service && index.h("div", { key: 'c7e266a0aca96414ed84d95636d28769fc0ad9af', class: "stzh-card-superteaser__service" }, this.service), index.h("slot", { key: '7c7881dee9ceabc452cfa1605cf184fdb8bf0bfa', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (index.h("stzh-ratio", { key: 'b0cfca0dc30972e63531e6c90fd57792b0749448', ratio: "2:1" }, index.h("div", { key: '0dbd0798db3ac63f2eabbc569032468147ec9bf3', class: "stzh-card-superteaser__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '1316eb65043cf43566d30bc51cf8640294ef70f6', class: "stzh-card-superteaser__meta-wrapper" }, this.datalistItems && (index.h("stzh-datalist", { key: '89b8e1afdcf36fe36bbee5487162ea253975312c', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (index.h("div", { key: 'c95f985b9f1b8962e89c34d1b5e4811818d3528f', class: "stzh-card-superteaser__meta" }, index.h("div", { key: '6dd18341abd87c8e35df1435d8940c6c6db397e1', class: "stzh-card-superteaser__meta-list" }, this._meta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (index.h("div", { key: '6da754acec74375d3cc32a646daa86160bdfbb29', class: "stzh-card-superteaser__download" }, index.h("div", { key: 'c4c72e13f888507d9479a5efe3ecb917d8f2e5cb', class: "stzh-card-superteaser__download-data" }, this.downloadHeading && (index.h("div", { key: 'c7ed18eae260c2191c3c5759d2568542f94d9e85', class: "stzh-card-superteaser__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (index.h("div", { key: 'b9a0f3cb751af92d249654ed17c3f0d30a994643', class: "stzh-card-superteaser__download-meta-list" }, this._downloadMeta.map(meta => (index.h(index.Fragment, null, index.h("div", { class: "stzh-card-superteaser__download-meta-list-item" }, meta))))))), index.h("div", { key: '5a63eef74476703e37ca5eee61f6958b2c955501', class: "stzh-card-superteaser__download-button" }, index.h("stzh-icon", { key: '3d740d96e78a6f0ab392a4cf6b38ba66f4868c70', class: "stzh-card-superteaser__download-icon", name: "download" })))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {