npm - @oiz/stzh-components - Versions diffs - 4.5.0 → 4.6.0-beta2 - Mend

@oiz/stzh-components 4.5.0 → 4.6.0-beta2

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 (1006) hide show

package/dist/components/{p-e42121d1.js.map → p-b84d0233.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-e42121d1.js","mappings":"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","names":[],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/*\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(\n --stzh-button-hover-background-color,\n #{$colorSecondary60}\n );\n --hover-border-color: transparent;\n\n display: inline-flex;\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 flex: 0 0 100%;\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(\n --stzh-button-secondary-background-color,\n #{$colorSecondary30}\n );\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-tertiary-background-color,\n transparent\n );\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\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(\n --stzh-button-active-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: transparent;\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(\n --stzh-button-disabled-background-color,\n #{$colorGrey70}\n );\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(\n --stzh-button-secondary-disabled-background-color,\n #{$colorGrey20}\n );\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(\n --stzh-button-input-disabled-background-color,\n #{$colorGrey20}\n );\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(\n --stzh-button-tertiary-disabled-background-color,\n transparent\n );\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 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateX(0);\n }\n\n 40% {\n transform: translateX(-8px);\n }\n\n 60% {\n transform: translateX(-4px);\n }\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 min-height: 100%;\n margin: 0;\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 &--not-hyphenated &__text {\n hyphens: none;\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\n &__icon-wrapper:not(:empty)\n + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge\n &__text:not(:empty)\n + &__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 animation: 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 { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n StzhBadgeType,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonClickEvent,\n StzhButtonFocusEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/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 /* Disable hyphenation for text inside button /\n @Prop() noHyphenation: boolean = false;\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 to disable the button on click or not /\n @Prop() disableOnClick: 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 } else {\n if (this.disableOnClick) {\n this.disabled = true;\n }\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 && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\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 && <slot name=\"icon\"></slot>}\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 class=\"stzh-button__text\" ref={el => (this.text = el as HTMLDivElement)}>\n {this.rel && this.rel.includes(\"external\") && (\n <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\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 class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></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--not-hyphenated\": this.noHyphenation,\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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 ) : this.type === \"radio\" ? (\n <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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"],"version":3}
1	+ {"file":"p-b84d0233.js","mappings":"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","names":[],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/*\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(\n --stzh-button-hover-background-color,\n #{$colorSecondary60}\n );\n --hover-border-color: transparent;\n\n display: inline-flex;\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 flex: 0 0 100%;\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(\n --stzh-button-secondary-background-color,\n #{$colorSecondary30}\n );\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-tertiary-background-color,\n transparent\n );\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\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(\n --stzh-button-active-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: transparent;\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(\n --stzh-button-disabled-background-color,\n #{$colorGrey70}\n );\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(\n --stzh-button-secondary-disabled-background-color,\n #{$colorGrey20}\n );\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(\n --stzh-button-input-disabled-background-color,\n #{$colorGrey20}\n );\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(\n --stzh-button-tertiary-disabled-background-color,\n transparent\n );\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 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateX(0);\n }\n\n 40% {\n transform: translateX(-8px);\n }\n\n 60% {\n transform: translateX(-4px);\n }\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 min-height: 100%;\n margin: 0;\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 &--not-hyphenated &__text {\n hyphens: none;\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\n &__icon-wrapper:not(:empty)\n + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge\n &__text:not(:empty)\n + &__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 animation: 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 { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n StzhBadgeType,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonClickEvent,\n StzhButtonFocusEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/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 /* Disable hyphenation for text inside button /\n @Prop() noHyphenation: boolean = false;\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 to disable the button on click or not /\n @Prop() disableOnClick: 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 } else {\n if (this.disableOnClick) {\n this.disabled = true;\n }\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 && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\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 && <slot name=\"icon\"></slot>}\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 class=\"stzh-button__text\" ref={el => (this.text = el as HTMLDivElement)}>\n {this.rel && this.rel.includes(\"external\") && (\n <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\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 class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></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--not-hyphenated\": this.noHyphenation,\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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 ) : this.type === \"radio\" ? (\n <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (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"],"version":3}

package/dist/components/{p-019721d4.js → p-b8f2532a.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { s as setPropsIfNull } from './p-289f5de2.js';
-import { d as defineCustomElement$3 } from './p-17efbc57.js';
-import { d as defineCustomElement$2 } from './p-e42121d1.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$3 } from './p-42e86bbd.js';
+import { d as defineCustomElement$2 } from './p-b84d0233.js';
+import { d as defineCustomElement$1 } from './p-a2659715.js';
 const stzhGhettoboxCss = ".sc-stzh-ghettobox-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-ghettobox-h,[stzh-hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::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-ghettobox-h .has-focus.sc-stzh-ghettobox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox{outline-style:none !important}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox::-moz-focus-inner{border:0 !important}.sc-stzh-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--stzh-button-color:var(--stzh-color-primary);--stzh-button-background-color:var(--stzh-base-invert-color);--stzh-button-hover-color:var(--stzh-color-primary);--stzh-button-hover-background-color:var(--stzh-color-white80op);--stzh-button-disabled-color:var(--stzh-color-primary);--stzh-button-disabled-background-color:var(--stzh-color-white40op);--stzh-button-secondary-color:var(--stzh-base-invert-color);--stzh-button-secondary-background-color:var(--stzh-color-white40op);--stzh-button-secondary-hover-color:var(--stzh-base-invert-color);--stzh-button-secondary-hover-background-color:var(--stzh-color-white30op);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op);--stzh-button-tertiary-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-background-color:var(--stzh-color-white20op);--stzh-button-tertiary-disabled-color:var(--stzh-color-white70op);--stzh-button-active-color:var(--stzh-color-primary);--stzh-button-active-background-color:var(--stzh-color-white80op);--stzh-button-active-hover-color:var(--stzh-color-primary);--stzh-button-active-hover-background-color:var(--stzh-color-white80op);--background-color:var(--stzh-color-error60);--color:var(--stzh-base-invert-color);--richtext-color:var(--color)}.stzh-ghettobox.sc-stzh-ghettobox{position:relative;color:var(--color);box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);--stzh-button-secondary-color:var(--stzh-color-error60);--stzh-button-secondary-background-color:var(--stzh-color-white90op);--stzh-button-secondary-hover-color:var(--stzh-color-error60);--stzh-button-secondary-hover-background-color:var(--stzh-color-white);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op)}.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-medium);display:flex;flex-direction:column}@media screen and (min-width: 600px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xxlarge)}}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);margin:0;color:inherit}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-ghettobox__description.sc-stzh-ghettobox{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);--stzh-base-color:var(--richtext-color)}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox{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-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-ghettobox__button.sc-stzh-ghettobox{display:grid}@media screen and (min-width: 600px){.stzh-ghettobox__button.sc-stzh-ghettobox{justify-content:start}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{top:0.625rem;right:0.625rem}}";
 const StzhGhettoboxStyle0 = stzhGhettoboxCss;
@@ -72,7 +72,7 @@ const StzhGhettobox = /*@__PURE__*/ proxyCustomElement(class StzhGhettobox exten
             "stzh-ghettobox--has-close-button": !this.hideClose,
         };
         // TODO: Temporary workaround/bugfix for readspeaker class "rs_skip" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).
-        return (h(Host, { key: '260b6f595622a23d0d63c0ed4909ee7ce7c82f9a', hidden: !this.open }, h("div", { key: 'b6ec42b74b41a6ac7ecaa9c128e1660c81e26fe2', class: Object.assign(Object.assign({}, classes), { rs_skip: !this.open }), "aria-hidden": this.open ? "false" : "true" }, h("div", { key: 'cd03d71dfa508e05300ca331d3203d511f8cd7ec', class: "stzh-ghettobox__container" }, h("h1", { key: '0c911250edb44d040088cceeccdfd0418f103fbd', class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { key: '0ed9ce039ce4939f5fbcd2cdcfd3131772a6a3b5', class: "stzh-ghettobox__message" }, h("div", { key: '403ce4334cc501e6b192c689e07c3c9f120e649a', class: "stzh-ghettobox__text" }, h("h2", { key: 'e64e302980396b0ebaa4f7ffbee4ac93bde171db', class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { key: 'b5837c1135e83d135446bda0b524a4ddbbbc759d', class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null))), h("div", { key: 'b2c72af66cfdd690ac40a894816ff3cff70839e4', class: "stzh-ghettobox__button" }, h("slot", { key: '741012309a402094ab8dcc1e3bfa86bc211b28ac', name: "button" }))), !this.hideClose && (h("stzh-button", { key: '1d2382acf8262559f425b8a0958ec4dae8a1f20e', class: "stzh-ghettobox__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
+        return (h(Host, { key: '07b9486204d24f9ffd8ac926f12d6b168376e2c2', hidden: !this.open }, h("div", { key: 'e728b4c2339592d95d78c7cfa53092027daff317', class: Object.assign(Object.assign({}, classes), { rs_skip: !this.open }), "aria-hidden": this.open ? "false" : "true" }, h("div", { key: 'e713155dbe1b06a1a161220c1d73f399f2b8c83a', class: "stzh-ghettobox__container" }, h("h1", { key: 'a548827bee4ded14960a55ed618dd802e8a3a8da', class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { key: '1992031874d92412fbd9b198885e445d7f8cf1ef', class: "stzh-ghettobox__message" }, h("div", { key: '05f7ace8f802ca10ab744fcdd37c921b92e3fed9', class: "stzh-ghettobox__text" }, h("h2", { key: '099223e2e06622718fc26126cf98e190ab346f41', class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { key: 'a1ee6b0178bdead7a5be7a71200d5f9b6cae18ff', class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null))), h("div", { key: '17a6094801cf5b8893c2caef3598b11138b86218', class: "stzh-ghettobox__button" }, h("slot", { key: '861af9a79943f7af4eedae7f6eef47173141536f', name: "button" }))), !this.hideClose && (h("stzh-button", { key: '77c36fa8edc07bfed825861e7030e3319fccc1c9', class: "stzh-ghettobox__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
     }
     get element() { return this; }
     static get style() { return StzhGhettoboxStyle0; }
@@ -117,4 +117,4 @@ function defineCustomElement() {
 export { StzhGhettobox as S, defineCustomElement as d };
-//# sourceMappingURL=p-019721d4.js.map
+//# sourceMappingURL=p-b8f2532a.js.map

package/dist/components/{p-019721d4.js.map → p-b8f2532a.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~019721d4~~.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":["/\n @prop --background-color: Background color of ghettobox\n /\n\n:host {\n @include base-invert;\n @include button-invert;\n\n --background-color: #{$colorError60};\n --color: #{$baseInvertColor};\n --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n position: relative;\n color: var(--color);\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n\n --stzh-button-secondary-color: #{$colorError60};\n --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n --stzh-button-secondary-hover-color: #{$colorError60};\n --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n &__container {\n @include container;\n @include spaceCurve(\"padding-top\", \"large\");\n @include spaceCurve(\"padding-bottom\", \"large\");\n }\n\n &__hidden-title {\n @include visuallyhidden;\n }\n\n &__message {\n @include spaceCurve(\"gap\", \"regular\");\n display: flex;\n flex-direction: column;\n }\n\n &__main-title {\n @include font(\"title\");\n @include fontCurve(\"h2\", \"heading\");\n margin: 0;\n color: inherit;\n\n &:not(:empty) {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n }\n\n &__description {\n @include fontCurve(\"p1\");\n --stzh-base-color: var(--richtext-color);\n\n &:not(:empty) {\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n }\n\n &__button {\n display: grid;\n\n @include mq($from: small) {\n justify-content: start;\n }\n }\n\n &__close {\n position: absolute;\n top: 0;\n right: 0;\n\n @include mq($from: small) {\n top: 10px;\n right: 10px;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/\n @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n /\n@Component({\n tag: \"stzh-ghettobox\",\n styleUrl: \"stzh-ghettobox.scss\",\n scoped: true,\n})\nexport class StzhGhettobox {\n /* Overwrite hidden h1 title /\n @Prop() hiddenTitle: string = \"\";\n\n /* Main title /\n @Prop() mainTitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings /\n @Prop() localization: StzhGhettoboxLocalizedText;\n\n /* Ghettobox open event /\n @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n /* Ghettobox close event /\n @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n @Element() element: HTMLStzhGhettoboxElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-ghettobox\",\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-ghettobox\",\n });\n }\n\n private observer: MutationObserver;\n\n private onCloseButtonClick = () => {\n this.hide();\n };\n\n private init = () => {\n const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n if (button) {\n setPropsIfNull(button, {\n size: \"small\",\n sizeMedium: \"default\",\n variant: \"secondary\",\n effect: \"cta\",\n icon: \"arrow-right\",\n iconPosition: \"right\",\n } as HTMLStzhButtonElement);\n }\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-ghettobox\": true,\n \"stzh-ghettobox--has-close-button\": !this.hideClose,\n };\n\n // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n return (\n <Host hidden={!this.open}>\n <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n <div class=\"stzh-ghettobox__container\">\n <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle \|\| this.localization.hiddenTitle}</h1>\n <div class=\"stzh-ghettobox__message\">\n <div class=\"stzh-ghettobox__text\">\n <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n </div>\n <div class=\"stzh-ghettobox__button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n {!this.hideClose && (\n <stzh-button\n class=\"stzh-ghettobox__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-b8f2532a.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":["/\n @prop --background-color: Background color of ghettobox\n /\n\n:host {\n @include base-invert;\n @include button-invert;\n\n --background-color: #{$colorError60};\n --color: #{$baseInvertColor};\n --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n position: relative;\n color: var(--color);\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n\n --stzh-button-secondary-color: #{$colorError60};\n --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n --stzh-button-secondary-hover-color: #{$colorError60};\n --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n &__container {\n @include container;\n @include spaceCurve(\"padding-top\", \"large\");\n @include spaceCurve(\"padding-bottom\", \"large\");\n }\n\n &__hidden-title {\n @include visuallyhidden;\n }\n\n &__message {\n @include spaceCurve(\"gap\", \"regular\");\n display: flex;\n flex-direction: column;\n }\n\n &__main-title {\n @include font(\"title\");\n @include fontCurve(\"h2\", \"heading\");\n margin: 0;\n color: inherit;\n\n &:not(:empty) {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n }\n\n &__description {\n @include fontCurve(\"p1\");\n --stzh-base-color: var(--richtext-color);\n\n &:not(:empty) {\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n }\n\n &__button {\n display: grid;\n\n @include mq($from: small) {\n justify-content: start;\n }\n }\n\n &__close {\n position: absolute;\n top: 0;\n right: 0;\n\n @include mq($from: small) {\n top: 10px;\n right: 10px;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/\n @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n /\n@Component({\n tag: \"stzh-ghettobox\",\n styleUrl: \"stzh-ghettobox.scss\",\n scoped: true,\n})\nexport class StzhGhettobox {\n /* Overwrite hidden h1 title /\n @Prop() hiddenTitle: string = \"\";\n\n /* Main title /\n @Prop() mainTitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings /\n @Prop() localization: StzhGhettoboxLocalizedText;\n\n /* Ghettobox open event /\n @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n /* Ghettobox close event /\n @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n @Element() element: HTMLStzhGhettoboxElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-ghettobox\",\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-ghettobox\",\n });\n }\n\n private observer: MutationObserver;\n\n private onCloseButtonClick = () => {\n this.hide();\n };\n\n private init = () => {\n const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n if (button) {\n setPropsIfNull(button, {\n size: \"small\",\n sizeMedium: \"default\",\n variant: \"secondary\",\n effect: \"cta\",\n icon: \"arrow-right\",\n iconPosition: \"right\",\n } as HTMLStzhButtonElement);\n }\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-ghettobox\": true,\n \"stzh-ghettobox--has-close-button\": !this.hideClose,\n };\n\n // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n return (\n <Host hidden={!this.open}>\n <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n <div class=\"stzh-ghettobox__container\">\n <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle \|\| this.localization.hiddenTitle}</h1>\n <div class=\"stzh-ghettobox__message\">\n <div class=\"stzh-ghettobox__text\">\n <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n </div>\n <div class=\"stzh-ghettobox__button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n {!this.hideClose && (\n <stzh-button\n class=\"stzh-ghettobox__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-1e6ceaab.js → p-ba8edf1e.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { c as commonjsGlobal } from './p-1ab64d01.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$1 } from './p-a2659715.js';
 var tinycolor$1 = {exports: {}};
@@ -2083,4 +2083,4 @@ function defineCustomElement() {
 export { StzhVbzLinechip as S, defineCustomElement as d };
-//# sourceMappingURL=p-1e6ceaab.js.map
+//# sourceMappingURL=p-ba8edf1e.js.map