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

@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

Files changed (285) hide show

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

@@ -19,7 +19,7 @@ const StzhBadge = class {
       "stzh-badge": true,
       [`stzh-badge--type-${this.type}`]: !!this.type
     };
-    return (index.h(index.Host, { filled: !!this.label }, index.h("div", { class: classes }, this.label)));
+    return (index.h(index.Host, { filled: !!this.label }, index.h("div", { class: classes }, this.label || index.h("slot", null))));
   }
 };
 StzhBadge.style = stzhBadgeCss;
@@ -152,9 +152,9 @@ const StzhButton = class {
     return (index.h("div", { class: "stzh-button__text", ref: (el) => (this.text = el) }, this.rel && this.rel.includes('external') && index.h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && index.h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : index.h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
+    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-button__inner" }, this.type === "radio" &&
       index.h("div", { class: "stzh-button__mark" }, index.h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), (this.badge || this.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
-      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
+      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   async componentWillLoad() {
     this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;

package/dist/cjs/stzh-badge_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-badge.stzh-button.stzh-icon.entry.cjs.js","mappings":"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","names":["h","Host","Fragment","hasSlot"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError60};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n\n &[filled][type=\"error\"] {\n --background-color: #{$colorError70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space('xsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize('medium')};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize('large')};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space('xsmall')};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n @include font('heavy');\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper,\n &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: '';\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorSecondary60;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorSecondary60;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Is expanded /\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n\n / Default /\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n","/\n @prop --size: Icon size\n * @prop --color: Icon color\n \n @prop --stzh-icon-size: Global: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: Global: Icon color\n * @prop --stzh-icon-vertical-align: Global: Icon vertical alignment\n /\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n if (response.status === 200) {\n const svgString = await response.text();\n\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n this.svgElement.classList.add('stzh-icon__svg');\n\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n\n this.a11yTitleWatcher(this.a11yTitle);\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement \| null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n this.nameWatcher(this.name);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-badge.stzh-button.stzh-icon.entry.cjs.js","mappings":"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","names":["h","Host","Fragment","hasSlot"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError60};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n\n &[filled][type=\"error\"] {\n --background-color: #{$colorError70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label \|\| <slot></slot>}\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space('xsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize('medium')};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize('large')};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space('xsmall')};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n @include font('heavy');\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper,\n &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: '';\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorSecondary60;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorSecondary60;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Is expanded /\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n\n / Default /\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n","/\n @prop --size: Icon size\n * @prop --color: Icon color\n \n @prop --stzh-icon-size: Global: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: Global: Icon color\n * @prop --stzh-icon-vertical-align: Global: Icon vertical alignment\n /\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n if (response.status === 200) {\n const svgString = await response.text();\n\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n this.svgElement.classList.add('stzh-icon__svg');\n\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n\n this.a11yTitleWatcher(this.a11yTitle);\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement \| null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n this.nameWatcher(this.name);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-breadcrumb_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-breadcrumb.stzh-tag.entry.cjs.js","mappings":"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","names":["h","Host","index","Fragment"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: #{$colorPrimary70};\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize('milli');\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font('heavy');\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space('xxsmall');\n\n &.is-separator {\n --size: #{iconSize('small')};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n @slot - Slot for e.g. image or video\n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event /\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: var(--stzh-tag-color, #{$colorSecondary50});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space('small')};\n --padding-right: #{space('small')};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary50});\n\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize('nano');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n / Size /\n\n &--size-large &__button {\n @include font('heavy');\n @include fontSize('milli');\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-tag\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href\n });\n }\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type\n };\n\n const Tag = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ?\n <Tag\n ref={(el) => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n :\n <Tag\n ref={(el) => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-breadcrumb.stzh-tag.entry.cjs.js","mappings":"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","names":["h","Host","index","Fragment"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: #{$colorPrimary70};\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize('milli');\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font('heavy');\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space('xxsmall');\n\n &.is-separator {\n --size: #{iconSize('small')};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event /\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: var(--stzh-tag-color, #{$colorSecondary50});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space('small')};\n --padding-right: #{space('small')};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary50});\n\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize('nano');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n / Size /\n\n &--size-large &__button {\n @include font('heavy');\n @include fontSize('milli');\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-tag\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href\n });\n }\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type\n };\n\n const Tag = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ?\n <Tag\n ref={(el) => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n :\n <Tag\n ref={(el) => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ const index = require('./index-92254d32.js');
 const utils = require('./utils-d091c010.js');
 require('./string-utils-5dd70320.js');
-const stzhCardNavigationCss = ".sc-stzh-card-navigation-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-navigation-h{display:none}.sc-stzh-card-navigation-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-navigation-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-navigation-h *.sc-stzh-card-navigation,.sc-stzh-card-navigation-h *.sc-stzh-card-navigation::before,.sc-stzh-card-navigation-h *.sc-stzh-card-navigation::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-navigation-h .has-focus.sc-stzh-card-navigation{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-navigation-h .stzh-fylingfocus-focused.sc-stzh-card-navigation{outline-style:none !important}.sc-stzh-card-navigation-h .stzh-fylingfocus-focused.sc-stzh-card-navigation::-moz-focus-inner{border:0 !important}.sc-stzh-card-navigation-h{display:flex;flex-direction:column}.stzh-card-navigation.sc-stzh-card-navigation{position:relative;flex-grow:1;display:flex;gap:var(--stzh-space-small);background-color:var(--stzh-color-grey10)}.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-medium);display:flex;align-items:center;flex-grow:1;padding-top:0.625rem;padding-bottom:0.625rem}@media screen and (min-width: 600px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-xxlarge)}}.stzh-card-navigation__title.sc-stzh-card-navigation{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-heading-line-height);letter-spacing:var(--stzh-font-curve---heading-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--stzh-color-primary70);margin:0}.stzh-card-navigation__title-link.sc-stzh-card-navigation{display:block;font-family:inherit;font-size:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-navigation__title-link.sc-stzh-card-navigation::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card-navigation__title-link.sc-stzh-card-navigation::after{z-index:1}.stzh-card-navigation__lead.sc-stzh-card-navigation{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-bottom:var(--stzh-space-large)}}.stzh-card-navigation__arrow.sc-stzh-card-navigation{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:4rem;height:4rem;color:var(--stzh-color-primary70);background-color:var(--stzh-color-secondary30)}.stzh-card-navigation__arrow-icon.sc-stzh-card-navigation{--size:var(--stzh-icon-size-large)}.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 600px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__arrow.sc-stzh-card-navigation{position:absolute;right:0;bottom:0;width:2.75rem;height:2.75rem}";
+const stzhCardNavigationCss = ".sc-stzh-card-navigation-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-navigation-h{display:none}.sc-stzh-card-navigation-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-navigation-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-navigation-h *.sc-stzh-card-navigation,.sc-stzh-card-navigation-h *.sc-stzh-card-navigation::before,.sc-stzh-card-navigation-h *.sc-stzh-card-navigation::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-navigation-h .has-focus.sc-stzh-card-navigation{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-navigation-h .stzh-fylingfocus-focused.sc-stzh-card-navigation{outline-style:none !important}.sc-stzh-card-navigation-h .stzh-fylingfocus-focused.sc-stzh-card-navigation::-moz-focus-inner{border:0 !important}.sc-stzh-card-navigation-h{display:flex;flex-direction:column}.stzh-card-navigation.sc-stzh-card-navigation{position:relative;flex-grow:1;display:flex;gap:var(--stzh-space-small);background-color:var(--stzh-color-grey10)}.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-medium);display:flex;align-items:center;flex-grow:1;padding-top:0.625rem;padding-bottom:0.625rem}@media screen and (min-width: 600px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-left:var(--stzh-space-xxlarge)}}.stzh-card-navigation__title.sc-stzh-card-navigation{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-heading-line-height);letter-spacing:var(--stzh-font-curve---heading-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--stzh-color-primary70);margin:0}.stzh-card-navigation__title-link.sc-stzh-card-navigation{display:block;font-family:inherit;font-size:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-navigation__title-link.sc-stzh-card-navigation::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card-navigation__title-link.sc-stzh-card-navigation::after{z-index:1}.stzh-card-navigation__lead.sc-stzh-card-navigation{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-card-navigation__lead.sc-stzh-card-navigation{margin-bottom:var(--stzh-space-large)}}.stzh-card-navigation__arrow.sc-stzh-card-navigation{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:4rem;height:4rem;color:var(--stzh-color-primary70);background-color:var(--stzh-color-secondary30)}.stzh-card-navigation__arrow-icon.sc-stzh-card-navigation{--size:var(--stzh-icon-size-large)}.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 600px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__wrapper.sc-stzh-card-navigation{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-card-navigation--has-lead.sc-stzh-card-navigation .stzh-card-navigation__arrow.sc-stzh-card-navigation{position:absolute;right:0;bottom:0;width:2.75rem;height:2.75rem}.stzh-card-navigation--hyphens.sc-stzh-card-navigation .stzh-card-navigation__title.sc-stzh-card-navigation,.stzh-card-navigation--hyphens.sc-stzh-card-navigation .stzh-card-navigation__title-link.sc-stzh-card-navigation{-webkit-hyphens:auto;hyphens:auto}";
 const StzhCardNavigation = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ const StzhCardNavigation = class {
       this.stzhClick.emit({
         component: "stzh-card-navigation",
         originalEvent,
-        href: this.href
+        href: this.href,
       });
     };
     this.href = undefined;
@@ -25,6 +25,7 @@ const StzhCardNavigation = class {
     this.heading = "";
     this.headingLevel = "3";
     this.lead = "";
+    this.hyphensEnabled = false;
   }
   componentDidRender() {
     requestAnimationFrame(() => {
@@ -36,14 +37,15 @@ const StzhCardNavigation = class {
     });
   }
   render() {
-    const hasLead = !!this.lead || utils.hasSlot(this.element, 'lead');
+    const hasLead = !!this.lead || utils.hasSlot(this.element, "lead");
     const classes = {
       "stzh-card-navigation": true,
       "stzh-card-navigation--has-lead": hasLead,
+      "stzh-card-navigation--hyphens": this.hyphensEnabled,
     };
     const Heading = `h${this.headingLevel}`;
     const TitleLink = this.href ? "a" : "button";
-    return (index.h(index.Host, { "has-lead": hasLead }, index.h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, index.h("div", { class: "stzh-card-navigation__wrapper" }, index.h(Heading, { class: "stzh-card-navigation__title" }, index.h(TitleLink, { ref: (el) => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : index.h("slot", { name: "heading" })))), index.h("div", { class: "stzh-card-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" }))), index.h("div", { class: "stzh-card-navigation__arrow" }, index.h("stzh-icon", { class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
+    return (index.h(index.Host, { "has-lead": hasLead }, index.h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, index.h("div", { class: "stzh-card-navigation__wrapper" }, index.h(Heading, { class: "stzh-card-navigation__title" }, index.h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : index.h("slot", { name: "heading" })))), index.h("div", { class: "stzh-card-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" }))), index.h("div", { class: "stzh-card-navigation__arrow" }, index.h("stzh-icon", { 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-card-navigation.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,~~ylNAAylN~~;;~~MCwB1mN~~,kBAAkB;;;;~~IA+BrB~~,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,~~CAAA~~;;;;~~mBAtByB~~,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;~~EAkBzB~~,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAIA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;~~KAC1C~~,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7C,QACEC,QAACC,UAAI,gBAAW,OAAO,IACrBD,qBAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChEA,iBAAK,KAAK,EAAC,+BAA+B,IACxCA,QAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B,IAC1CA,QAAC,SAAS,IACR,GAAG,EAAE,~~CAAC,~~EAAE,~~MAAM~~,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,~~EAClF~~,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,iBAAK,GAAG,EAAE,~~CAAC,~~EAAE,~~MAAM~~,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,~~IAC/D~~,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,EAEVA,iBAAK,KAAK,EAAC,4BAA4B,~~IACpC~~,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,MAAM,GAAQ,~~CAC9C~~,~~CACF~~,EAENA,iBAAK,KAAK,EAAC,6BAA6B,IACtCA,uBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;GACH;;;;;;;","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 &__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: 10px;\n padding-bottom: 10px;\n }\n\n &__title {\n @include font('heavy');\n @include fontSize('centi', 'heading');\n~~\t\t~~@include wordWrap;\n color: $colorPrimary70;\n~~\t\tmargin~~: 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 --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~~","import~~ {\n ~~Component~~,\n ~~Host,\~~n ~~h,\~~n ~~Element,\~~n ~~Prop,\~~n Event~~,\n~~ EventEmitter~~,\n~~} from \"@stencil/core\";\n\nimport {\n StzhCardNavigationClickEvent\n} 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 @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 };\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 <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </TitleLink>\n </Heading>\n\n <div class=\"stzh-card-navigation__lead\"~~>\n~~ {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </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}
1	+ {"file":"stzh-card-navigation.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,w1NAAw1N;;MCcz2N,kBAAkB;;;;IAkCrB,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,CAAC;;;;mBAzBwB,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;0BAG0B,KAAK;;EAkBxD,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAIA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;MACzC,+BAA+B,EAAE,IAAI,CAAC,cAAc;KACrD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7C,QACEC,QAACC,UAAI,gBAAW,OAAO,IACrBD,qBAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChEA,iBAAK,KAAK,EAAC,+BAA+B,IACxCA,QAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B,IAC1CA,QAAC,SAAS,IACR,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,IAE7BA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,EAEVA,iBAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,CAC7F,EAENA,iBAAK,KAAK,EAAC,6BAA6B,IACtCA,uBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;GACH;;;;;;;","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 &__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: 10px;\n padding-bottom: 10px;\n }\n\n &__title {\n @include font('heavy');\n @include fontSize('centi', 'heading');\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 --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 <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\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 CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-92254d32.js');
 const utils = require('./utils-d091c010.js');
 require('./string-utils-5dd70320.js');
-const stzhCardSearchresultCss = ".sc-stzh-card-searchresult-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description image\"\n      \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description description\"\n      \"meta meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{grid-area:meta}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult,.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--stzh-color-secondary30);color:var(--stzh-color-primary70);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__service.sc-stzh-card-searchresult{background-color:var(--service-background-color);color:var(--service-color)}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}@media screen and (min-width: 900px){.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-tag.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-service.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-searchresult--has-service.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__topic.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}";
+const stzhCardSearchresultCss = ".sc-stzh-card-searchresult-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description image\"\n      \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description description\"\n      \"meta meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{grid-area:meta}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult,.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--stzh-color-secondary30);color:var(--stzh-color-primary70);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__service.sc-stzh-card-searchresult{background-color:var(--service-background-color);color:var(--service-color)}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}@media screen and (min-width: 900px){.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-tag.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-service.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-searchresult--has-service.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__topic.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult--hyphens.sc-stzh-card-searchresult .stzh-card-searchresult__heading.sc-stzh-card-searchresult{-webkit-hyphens:auto;hyphens:auto}";
 const StzhCardSearchresult = class {
   constructor(hostRef) {
@@ -41,6 +41,7 @@ const StzhCardSearchresult = class {
     this.downloadHeading = undefined;
     this.downloadMeta = undefined;
     this.dateAdapter = undefined;
+    this.hyphensEnabled = false;
   }
   metaWatcher(newValue) {
     if (!newValue) {
@@ -114,6 +115,7 @@ const StzhCardSearchresult = class {
       "stzh-card-searchresult--has-meta": this._meta.length > 0,
       "stzh-card-searchresult--has-download": !!this.downloadHeading || this._downloadMeta.length > 0,
       "stzh-card-searchresult--has-breadcrumb": !!this.breadcrumbItems,
+      "stzh-card-searchresult--hyphens": this.hyphensEnabled,
     };
     const Heading = `h${this.headingLevel}`;
     const HeadingLink = this.href ? "a" : "div";