@oiz/stzh-components 2.10.0-beta → 2.10.0

package/dist/stzh-components/p-0dcbb483.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","exports","class_1","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_2","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","class_3","iconId","role","a11yTitle","focusable","id"],"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=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\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\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: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"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>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding: Padding 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 --floating-position: Position when floating variant is used\n * @prop --floating-float: Floating direction when floating variant is used\n * @prop --floating-top: Space to the top when floating variant is used\n * @prop --floating-bottom: Space to the bottom when floating variant is used\n * @prop --floating-left: Space to the left when floating variant is used\n * @prop --floating-right: Space to the right when floating variant is used\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:host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-top: auto;\n  --floating-bottom: #{space('medium')};\n  --floating-left: auto;\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    --box-shadow: #{$boxShadowOverlay};\n\n    position: var(--floating-position);\n    top: var(--floating-top);\n    bottom: var(--floating-bottom);\n    left: var(--floating-left);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\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:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\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: var(--padding);\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-width: var(--height);\n  min-height: var(--height);\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    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\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: $colorPrimaryHover;\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: $colorPrimaryHover;\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  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\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 {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\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  /* Focus */\n\n  &.has-focus {\n    outline-offset: 3px;\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  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\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: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"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  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\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: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"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  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is 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  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: 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 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  /** 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  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\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.setFocus();\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  }\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          <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 class=\"stzh-button__text\">\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        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\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    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-floating\": this.floating,\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--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--size-${this.size}`]: !!this.size,\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            accessKey={this.linkAccesskey}\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                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                accessKey={this.linkAccesskey}\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              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              accessKey={this.linkAccesskey}\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: Border color\n *\n * @prop --stzh-icon-size-default: **Global**: Default icon size (default `var(--stzh-icon-size-small)`). [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n */\n\n:host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: 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  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhBadgeCss","StzhBadge","exports","class_1","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_2","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","class_3","iconId","role","a11yTitle","focusable","id"],"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=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\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\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: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"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>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding: Padding 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 --floating-position: Position when floating variant is used\n * @prop --floating-float: Floating direction when floating variant is used\n * @prop --floating-top: Space to the top when floating variant is used\n * @prop --floating-bottom: Space to the bottom when floating variant is used\n * @prop --floating-left: Space to the left when floating variant is used\n * @prop --floating-right: Space to the right when floating variant is used\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:host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-top: auto;\n  --floating-bottom: #{space('medium')};\n  --floating-left: auto;\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    --box-shadow: #{$boxShadowOverlay};\n\n    position: var(--floating-position);\n    top: var(--floating-top);\n    bottom: var(--floating-bottom);\n    left: var(--floating-left);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\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:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\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: var(--padding);\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-width: var(--height);\n  min-height: var(--height);\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    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\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: $colorPrimaryHover;\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: $colorPrimaryHover;\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  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\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 {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\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  /* Focus */\n\n  &.has-focus {\n    outline-offset: 3px;\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  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\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: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"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  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\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: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"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  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is 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  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: 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 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  /** 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  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\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.setFocus();\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  }\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          <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 class=\"stzh-button__text\">\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        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\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    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-floating\": this.floating,\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--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--size-${this.size}`]: !!this.size,\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            accessKey={this.linkAccesskey}\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                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                accessKey={this.linkAccesskey}\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              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              accessKey={this.linkAccesskey}\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: Border color\n *\n * @prop --stzh-icon-size-default: **Global**: Default icon size (default `var(--stzh-icon-size-small)`). [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n */\n\n:host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: 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  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"4sDAAA,IAAMA,EAAe,27D,ICeRC,EAASC,EAAA,wB,mCAEI,G,UAG8D,S,CAEtFC,EAAAC,UAAAC,OAAA,W,MACE,IAAMC,GAAOC,EAAA,CACX,aAAc,MACdA,EAAC,oBAAAC,OAAoBC,KAAKC,SAAWD,KAAKC,K,GAG5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOP,GACTG,KAAKK,O,WAhBM,I,UCftB,IAAMC,EAAgB,yna,IC8BTC,EAAUd,EAAA,yB,kJA+HbO,KAAAQ,eAA0B,MAE1BR,KAAAS,QAAU,SAACC,GACjBC,EAAKC,QAAUD,EAAKE,MAAMD,QAC1BD,EAAKG,WAAWC,KAAK,CACnBC,UAAW,cACXC,cAAeP,EACfQ,MAAOP,EAAKO,MACZN,QAASD,EAAKC,S,EAIVZ,KAAAmB,YAAc,WACpB,IAAKR,EAAKH,eAAgB,CACxBG,EAAKS,U,CAGPT,EAAKH,eAAiB,K,EAGhBR,KAAAqB,QAAU,SAACX,GACjBC,EAAKH,eAAiB,KAEtB,IAAMc,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdhB,EAAKiB,QAAQC,cAAcP,GAC3BX,EAAKmB,UAAUf,KAAK,CAClBC,UAAW,cACXC,cAAeP,G,EAIXV,KAAA+B,OAAS,SAACrB,GAChB,IAAMsB,EAAY,IAAIT,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdhB,EAAKiB,QAAQC,cAAcG,GAC3BrB,EAAKsB,SAASlB,KAAK,CACjBC,UAAW,cACXC,cAAeP,G,EAIXV,KAAAkC,QAAU,SAACxB,GACjB,GAAIC,EAAKwB,SAAU,CACjBzB,EAAM0B,kBACN1B,EAAM2B,gB,0CA/Kc,G,eAGmE,U,mBAG/B,S,gBAGb,M,eAGD,M,aAGF,M,cAGC,M,UAGiB,U,eAGkC,U,aAGb,U,UAG5D,G,kBAGmC,O,aAGC,M,UAGnB,G,WAGC,G,UAGlB,G,+BAME,G,kCAM+B,S,cAGX,M,YAGF,M,WAGnB,G,YAGY,U,cAGS,M,2EASsB,G,2IAyB7DC,EAAA3C,UAAAyB,SAAN,W,qFACEpB,KAAKuC,OAAOC,Q,iBAwENF,EAAA3C,UAAA8C,WAAA,SAAWC,GACjB,OACExC,EAAA,OAAKE,MAAM,6BACRJ,KAAK2C,KACJzC,EAAA,aAAWE,MAAM,oBAAoBwC,KAAM5C,KAAK2C,OAEhDzC,EAAA,QAAM0C,KAAK,UAEX5C,KAAK6C,OAAS7C,KAAK8C,aAAe9C,KAAK+C,gBAAkB,QAAUL,GACnExC,EAAA,cAAYE,MAAM,qBAAqBC,MAAOL,KAAK6C,MAAO5C,KAAMD,KAAKgD,Y,EAMrEV,EAAA3C,UAAAsD,cAAA,eAAAtC,EAAAX,KACN,OACEE,EAAA,OAAKE,MAAM,qBACRJ,KAAKkD,KAAOlD,KAAKkD,IAAIC,SAAS,aAAejD,EAAA,OAAKE,MAAM,wBAAwBJ,KAAKoD,aAAaC,SAASC,mBAC3GtD,KAAKuD,UAAYrD,EAAA,OAAKE,MAAM,wBAAwBJ,KAAKoD,aAAaC,SAASG,mBAChFtD,EAAA,OAAKuD,IAAK,SAACC,GAAE,OAAM/C,EAAKgD,KAAOD,CAAlB,GAA0C1D,KAAKK,MAAQL,KAAKK,MAAQH,EAAA,c,EAK/EoC,EAAA3C,UAAAiE,YAAA,SAAYlB,GAClB,OACExC,EAAC2D,EAAQ,KACP3D,EAAA,OACEE,MAAM,qBACN8B,QAASlC,KAAKkC,SAEblC,KAAKC,OAAS,SACbC,EAAA,OAAKE,MAAM,qBACTF,EAAA,OAAKE,MAAM,wBAGdJ,KAAK8D,eAAiB,QAAU9D,KAAKyC,WAAWC,GAChD1C,KAAKiD,gBACLjD,KAAK8D,eAAiB,SAAW9D,KAAKyC,WAAWC,KAElD1C,KAAK6C,OAAS7C,KAAK8C,cAAgB9C,KAAK+C,gBAAkB,WAAaL,IACvExC,EAAA,cACEE,MAAM,qBACNC,MAAOL,KAAK6C,MACZ5C,KAAMD,KAAKgD,UACXd,QAASlC,KAAKkC,U,EAOlBI,EAAA3C,UAAAoE,kBAAN,W,uHACO/D,KAAKoD,aAAN,YACFtD,EAAAE,KAAoB,SAAMyB,OAAOuC,eAAeC,MAAMC,kBAAkBlE,KAAK4B,QAAS,W,OAAtF9B,EAAKsD,aAAee,EAAAC,O,mCAIxB9B,EAAA3C,UAAA0E,mBAAA,eAAA1D,EAAAX,KACEsE,uBAAsB,WACpB3D,EAAK4B,OAAOgC,aAAa,cAAe5D,EAAK6D,aAAe7D,EAAKgD,KAAKc,U,KAI1EnC,EAAA3C,UAAAC,OAAA,W,MAAA,IAAAe,EAAAX,KACE,IAAM0C,EAAoBgC,EAAQ1E,KAAK4B,QAAS,WAAa5B,KAAK2C,KAClE,IAAM9C,GAAOC,EAAA,CACX,cAAe,KACf,wBAAyB4C,EACzB,6BAA8B1C,KAAK2E,SACnC,2BAA4B3E,KAAK6C,MACjC,2BAA4B7C,KAAK4E,SACjC,0BAA2B5E,KAAK6E,QAChC,4BAA6B7E,KAAK8E,UAClC,2BAA4B9E,KAAKmC,UAAYnC,KAAK+E,aAClD,yBAA0B/E,KAAKgF,QAC/BlF,EAAC,uBAAAC,OAAuBC,KAAKiF,WAAajF,KAAKiF,OAC/CnF,EAAC,+BAAAC,OAA+BC,KAAK+C,kBAAoB/C,KAAK+C,cAC9DjD,EAAC,sBAAAC,OAAsBC,KAAKkF,cAAgBlF,KAAKkF,UACjDpF,EAAC,qBAAAC,OAAqBC,KAAKmF,SAAWnF,KAAKmF,KAC3CrF,EAAC,qBAAAC,OAAqBC,KAAKC,SAAWD,KAAKC,KAC3CH,EAAC,gBAAAC,OAAgBC,KAAKoF,YAAcpF,KAAKoF,Q,GAG3C,OACElF,EAACC,EAAI,CAACkF,SAAUrF,KAAKmC,SAAW,KAAO,KAAMd,QAASrB,KAAKmB,aACxDnB,KAAKsF,KACJpF,EAAA,KACEuD,IAAK,SAACC,GAAE,OAAM/C,EAAK4B,OAASmB,CAApB,EACR4B,KAAMtF,KAAKmC,SAAW,KAAOnC,KAAKsF,KAClCpC,IAAKlD,KAAKkD,IACVK,SAAUvD,KAAKuD,SACfgC,OAAQvF,KAAKuF,OACbnF,MAAOP,EAAO,aACFG,KAAKwF,WAAa,KAAI,mBAChBxF,KAAKyF,iBAAmB,KAAI,uBACxBzF,KAAK+E,eAAiB,YACvC/E,KAAK+E,aAAe,OAAS,QAAW,KAAI,uBAC3B/E,KAAK0F,eAAiB,YACvC1F,KAAK0F,aAAe,OAAS,QAAW,KAAI,gBAClC1F,KAAK2F,cAAgB,KACpCC,UAAW5F,KAAK6F,cAChBR,SAAUrF,KAAK8F,aACfzE,QAASrB,KAAKqB,QACdU,OAAQ/B,KAAK+B,OACbG,QAASlC,KAAKkC,SAEblC,KAAK4D,YAAYlB,IAGpB1C,KAAKC,OAAS,QACZC,EAAA,SACEuD,IAAK,SAACC,GAAE,OAAM/C,EAAK4B,OAASmB,CAApB,EACRtD,MAAOP,EACPqC,QAASlC,KAAKkC,SAEdhC,EAAA,SACEuD,IAAK,SAACC,GAAE,OAAM/C,EAAKE,MAAQ6C,CAAnB,EACRzD,KAAK,QACLG,MAAM,qBACNwC,KAAM5C,KAAK4C,KACX1B,MAAOlB,KAAKkB,MACZN,QAASZ,KAAKY,QACduB,SAAUnC,KAAKmC,SAAQ,aACXnC,KAAKwF,WAAa,KAAI,mBAChBxF,KAAKyF,iBAAmB,KAAI,uBACxBzF,KAAK+E,eAAiB,YACvC/E,KAAK+E,aAAe,OAAS,QAAW,KAAI,uBAC3B/E,KAAK0F,eAAiB,YACvC1F,KAAK0F,aAAe,OAAS,QAAW,KAAI,gBAClC1F,KAAK2F,cAAgB,KACpCC,UAAW5F,KAAK6F,cAChBR,SAAUrF,KAAK8F,aACfzE,QAASrB,KAAKqB,QACdU,OAAQ/B,KAAK+B,OACbG,QAASlC,KAAKkC,QACdzB,QAAST,KAAKS,UAEfT,KAAK4D,YAAYlB,IAGpBxC,EAAA,UACEuD,IAAK,SAACC,GAAE,OAAM/C,EAAK4B,OAASmB,CAApB,EACRtD,MAAOP,EACPI,KAAMD,KAAKC,KACXkC,SAAUnC,KAAKmC,SAAQ,aACXnC,KAAKwF,WAAa,KAAI,mBAChBxF,KAAKyF,iBAAmB,KAAI,uBACxBzF,KAAK+E,eAAiB,YACvC/E,KAAK+E,aAAe,OAAS,QAAW,KAAI,uBAC3B/E,KAAK0F,eAAiB,YACvC1F,KAAK0F,aAAe,OAAS,QAAW,KAAI,gBAClC1F,KAAK2F,cAAgB,KACpCC,UAAW5F,KAAK6F,cAChBR,SAAUrF,KAAK8F,aACfzE,QAASrB,KAAKqB,QACdU,OAAQ/B,KAAK+B,OACbG,QAASlC,KAAKkC,SAEblC,KAAK4D,YAAYlB,I,4HAxVT,I,UC9BvB,IAAMqD,EAAc,4mCCOpB,IAAIC,EAAc,E,IAOLC,EAAQxG,EAAA,uB,kCAKI,G,eAMgC,E,CAIvDyG,EAAAvG,UAAAoE,kBAAA,WACE/D,KAAKmG,OAAS,aAAApG,OAAaiG,I,EAG7BE,EAAAvG,UAAAC,OAAA,WACE,OACEM,EAACC,EAAI,KACFH,KAAK4C,MACJ1C,EAAA,OACEE,MAAM,YACNgG,KAAMpG,KAAKqG,UAAY,MAAQ,eAAc,cAChCrG,KAAKqG,UAAY,KAAO,OACrCC,UAAWtG,KAAKqG,UAAY,OAAS,QAAO,kBAC3BrG,KAAKqG,UAAY,GAAAtG,OAAGC,KAAKmG,OAAM,UAAW,MAE1DnG,KAAKqG,WACJnG,EAAA,SAAOqG,GAAI,GAAAxG,OAAGC,KAAKmG,OAAM,WACtBnG,KAAKqG,WAGVnG,EAAA,OAAKoF,KAAM,cAAAvF,OAAcC,KAAK4C,S,WAnCrB,I"}

package/dist/stzh-components/p-0f3f22c8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,a}from"./p-c92165bd.js";const e=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{}:host ::slotted(stzh-input),:host ::slotted(stzh-datepicker),:host ::slotted(stzh-dropdown),:host ::slotted(stzh-langnav),:host ::slotted(stzh-fieldset),:host ::slotted(stzh-actions),:host ::slotted(stzh-upload),:host ::slotted(stzh-saptcha),:host ::slotted(stzh-checkboxgroup),:host ::slotted(stzh-radiogroup),:host ::slotted(stzh-message){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(h1),:host ::slotted(stzh-heading[level="1"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level="2"]){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level="1"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level="2"]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level="1"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level="2"]){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level="1"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level="2"]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level="1"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level="2"]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(h3),:host ::slotted(stzh-heading[level="3"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level="4"]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h3),:host ::slotted(stzh-heading[level="3"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level="4"]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h3),:host ::slotted(stzh-heading[level="3"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level="4"]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-large)}}:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-iframe),:host ::slotted(stzh-youtube),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-panorama),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr),:host ::slotted(stzh-vbz-ticker){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xbig)}}:host ::slotted(stzh-pagination){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(stzh-actions){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-actions)[variant=process]{margin-top:var(--stzh-space-large)}:host ::slotted(stzh-fieldset){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(stzh-fieldset)[legend]{margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-heading[level="4"]+stzh-datalist),:host ::slotted(stzh-heading[curve=h4]+stzh-datalist){margin-top:0}:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-tiny){margin-top:var(--stzh-space-medium)}}:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-tiny){margin-bottom:var(--stzh-space-medium)}}:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-small){margin-top:var(--stzh-space-large)}}:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-small){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-regular){margin-top:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-regular){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-medium){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-medium){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-large){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-large){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-big){margin-top:var(--stzh-space-xbig)}}:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-big){margin-bottom:var(--stzh-space-xbig)}}:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-y-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-t-curve-huge){margin-top:var(--stzh-space-huge)}}:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host ::slotted(.cspace-b-curve-huge){margin-bottom:var(--stzh-space-huge)}}:host ::slotted(.small\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.small\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.small\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.small\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.small\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.small\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.small\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.small\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.small\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.small\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.small\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.small\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.small\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.small\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.small\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.small\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.small\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.smallheader\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.smallheader\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.smallheader\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.smallheader\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.smallheader\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.smallheader\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.smallheader\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.smallheader\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.smallheader\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.smallheader\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.smallheader\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.smallheader\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.smallheader\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.smallheader\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.smallheader\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.medium\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.medium\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.medium\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.medium\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.medium\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.medium\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.medium\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.medium\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.medium\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.medium\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.medium\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.medium\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.medium\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.medium\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.medium\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.medium\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.large\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.large\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.large\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.large\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.large\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.large\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.large\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.large\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.large\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.large\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.large\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.large\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.large\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.large\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.large\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.large\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-y-xxxsmall){margin-top:var(--stzh-space-xxxsmall);margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-t-xxxsmall){margin-top:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-b-xxxsmall){margin-bottom:var(--stzh-space-xxxsmall)}:host ::slotted(.ultra\\:cspace-y-xxsmall){margin-top:var(--stzh-space-xxsmall);margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-t-xxsmall){margin-top:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-b-xxsmall){margin-bottom:var(--stzh-space-xxsmall)}:host ::slotted(.ultra\\:cspace-y-xsmall){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-t-xsmall){margin-top:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-b-xsmall){margin-bottom:var(--stzh-space-xsmall)}:host ::slotted(.ultra\\:cspace-y-small){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-t-small){margin-top:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-b-small){margin-bottom:var(--stzh-space-small)}:host ::slotted(.ultra\\:cspace-y-medium){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-t-medium){margin-top:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-b-medium){margin-bottom:var(--stzh-space-medium)}:host ::slotted(.ultra\\:cspace-y-large){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-t-large){margin-top:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-b-large){margin-bottom:var(--stzh-space-large)}:host ::slotted(.ultra\\:cspace-y-xlarge){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-t-xlarge){margin-top:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-b-xlarge){margin-bottom:var(--stzh-space-xlarge)}:host ::slotted(.ultra\\:cspace-y-xxlarge){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-t-xxlarge){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-b-xxlarge){margin-bottom:var(--stzh-space-xxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxlarge){margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxlarge){margin-top:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxlarge){margin-bottom:var(--stzh-space-xxxlarge)}:host ::slotted(.ultra\\:cspace-y-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge);margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-t-xxxxlarge){margin-top:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-b-xxxxlarge){margin-bottom:var(--stzh-space-xxxxlarge)}:host ::slotted(.ultra\\:cspace-y-big){margin-top:var(--stzh-space-big);margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-t-big){margin-top:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-b-big){margin-bottom:var(--stzh-space-big)}:host ::slotted(.ultra\\:cspace-y-xbig){margin-top:var(--stzh-space-xbig);margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-t-xbig){margin-top:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-b-xbig){margin-bottom:var(--stzh-space-xbig)}:host ::slotted(.ultra\\:cspace-y-huge){margin-top:var(--stzh-space-huge);margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-t-huge){margin-top:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-b-huge){margin-bottom:var(--stzh-space-huge)}:host ::slotted(.ultra\\:cspace-y-xhuge){margin-top:var(--stzh-space-xhuge);margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-t-xhuge){margin-top:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-b-xhuge){margin-bottom:var(--stzh-space-xhuge)}:host ::slotted(.ultra\\:cspace-y-none){margin-top:var(--stzh-space-none);margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-t-none){margin-top:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-b-none){margin-bottom:var(--stzh-space-none)}:host ::slotted(.ultra\\:cspace-y-default){margin-top:var(--stzh-space-default);margin-bottom:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-t-default){margin-top:var(--stzh-space-default)}:host ::slotted(.ultra\\:cspace-b-default){margin-bottom:var(--stzh-space-default)}:host ::slotted(.cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.cspace-t-0),:host ::slotted([no-cspace-top]){margin-top:0}:host ::slotted(.cspace-b-0),:host ::slotted([no-cspace-bottom]){margin-bottom:0}:host ::slotted(.small\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.small\\:cspace-t-0){margin-top:0}:host ::slotted(.small\\:cspace-b-0){margin-bottom:0}:host ::slotted(.smallheader\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.smallheader\\:cspace-t-0){margin-top:0}:host ::slotted(.smallheader\\:cspace-b-0){margin-bottom:0}:host ::slotted(.medium\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.medium\\:cspace-t-0){margin-top:0}:host ::slotted(.medium\\:cspace-b-0){margin-bottom:0}:host ::slotted(.large\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.large\\:cspace-t-0){margin-top:0}:host ::slotted(.large\\:cspace-b-0){margin-bottom:0}:host ::slotted(.ultra\\:cspace-y-0){margin-top:0;margin-bottom:0}:host ::slotted(.ultra\\:cspace-t-0){margin-top:0}:host ::slotted(.ultra\\:cspace-b-0){margin-bottom:0}:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted(:first-child){margin-top:0 !important}:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted(:last-child){margin-bottom:0 !important}';const o=class{constructor(s){t(this,s);this.removeFirstMargin=true;this.removeLastMargin=true}render(){const t={"stzh-cspace":true};return s(a,null,s("div",{class:t},s("slot",null)))}};o.style=e;export{o as stzh_cspace};
+//# sourceMappingURL=p-0f3f22c8.entry.js.map

package/dist/stzh-components/p-0f3f22c8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhCspaceCss","StzhCspace","render","classes","h","Host","class"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace&encapsulation=shadow","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-input),\n  ::slotted(stzh-datepicker),\n  ::slotted(stzh-dropdown),\n  ::slotted(stzh-langnav),\n  ::slotted(stzh-fieldset),\n  ::slotted(stzh-actions),\n  ::slotted(stzh-upload),\n  ::slotted(stzh-saptcha),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(stzh-message) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n  }\n\n  ::slotted(h1),\n  ::slotted(stzh-heading[level=\"1\"]),\n  ::slotted(h2),\n  ::slotted(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(h3),\n  ::slotted(stzh-heading[level=\"3\"]),\n  ::slotted(h4),\n  ::slotted(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(p),\n  ::slotted(stzh-text),\n  ::slotted(ul),\n  ::slotted(ol),\n  ::slotted(dl),\n  ::slotted(stzh-list) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(stzh-text[curve=\"hero\"]),\n  ::slotted(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n  }\n\n  ::slotted(stzh-text[curve=\"h3\"]),\n  ::slotted(stzh-heading[curve=\"h3\"]),\n  ::slotted(stzh-text[curve=\"h4\"]),\n  ::slotted(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"p1\"]),\n  ::slotted(stzh-text[curve=\"p2\"]),\n  ::slotted(stzh-heading[curve=\"p1\"]),\n  ::slotted(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(.section),\n  ::slotted(stzh-accordion), // TODO: design missing default spacing, we gonna use the most common one\n  ::slotted(stzh-anchornav),\n  ::slotted(stzh-audio), // TOOD: design is using small curve as default spacing, but large looks better\n  ::slotted(stzh-iframe),\n  ::slotted(stzh-youtube),\n  ::slotted(stzh-microsite-teaserlist),\n  ::slotted(stzh-textandimage),\n  ::slotted(stzh-figure),\n  ::slotted(stzh-panorama),\n  ::slotted(stzh-chart),\n  ::slotted(stzh-sitemap),\n  ::slotted(stzh-section),\n  ::slotted(stzh-hr),\n  ::slotted(stzh-vbz-ticker) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(stzh-olmap),\n  ::slotted(stzh-anchornav) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-contact),\n  ::slotted(stzh-card) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  ::slotted(stzh-table),\n  ::slotted(stzh-datatable) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagetitle) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagebottom) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-progressbar) {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  ::slotted(stzh-pagination) {\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  ::slotted(stzh-actions) {\n    margin-top: space('xxlarge');\n\n    &[variant=\"process\"] {\n      margin-top: space('large');\n    }\n  }\n\n  ::slotted(stzh-fieldset) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n\n    &[legend] {\n      margin-top: space('xxlarge');\n    }\n  }\n\n  ::slotted(stzh-heading[level=\"4\"] + stzh-datalist),\n  ::slotted(stzh-heading[curve=\"h4\"] + stzh-datalist) {\n    margin-top: 0;\n  }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    ::slotted(.cspace-y-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    ::slotted(.cspace-t-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    ::slotted(.cspace-b-curve-#{$spaceCurve}) {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        ::slotted(.#{$breakpoint}\\:cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.#{$breakpoint}\\:cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        ::slotted(.cspace-y-#{$space}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        ::slotted(.cspace-t-#{$space}) {\n          margin-top: #{$value};\n        }\n\n        ::slotted(.cspace-b-#{$space}) {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  ::slotted(.cspace-y-0) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  ::slotted(.cspace-t-0),\n  ::slotted([no-cspace-top]) { // TODO: remove attribute\n    margin-top: 0;\n  }\n\n  ::slotted(.cspace-b-0),\n  ::slotted([no-cspace-bottom]) { // TODO: remove attribute\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    ::slotted(.#{$breakpoint}\\:cspace-y-0) {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-t-0) {\n      margin-top: 0;\n    }\n\n    ::slotted(.#{$breakpoint}\\:cspace-b-0) {\n      margin-bottom: 0;\n    }\n  }\n}\n\n// Remove edge margin\n\n:host([remove-first-margin]:not([remove-first-margin=\"false\"])) {\n  ::slotted(:first-child) {\n    margin-top: 0 !important;\n  }\n}\n\n:host([remove-last-margin]:not([remove-last-margin=\"false\"])) {\n  ::slotted(:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\",\n  shadow: true\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAgB,sk7C,MCeTC,EAAU,M,gDAEiC,K,sBAGD,I,CAErD,MAAAC,GACE,MAAMC,EAAU,CACd,cAAe,MAGjB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c"}

package/dist/stzh-components/p-25bfad8b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as o,g as n}from"./p-c92165bd.js";import{w as s}from"./p-54bd842e.js";import{s as r,a,b as h}from"./p-7e2354d0.js";const c=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size-small)}:host ::slotted(stzh-icon),.stzh-accordion-item__icon{--size:var(--icon-size)}.stzh-accordion-item{}.stzh-accordion-item__heading{position:relative;margin:0}.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-default-heading-letter-spacing);font-family:inherit;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:3.75rem;border:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-align:left;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 1024px){.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-heading-letter-spacing)}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button{-webkit-transition:none;transition:none}}.stzh-accordion-item__button:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xlarge)}}.stzh-accordion-item__button-text{-ms-flex-positive:1;flex-grow:1}.stzh-accordion-item__button-icon{position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon::before,.stzh-accordion-item__button-icon::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.0625rem;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s;-webkit-transform-origin:top left;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-accordion-item__button-icon::before,.stzh-accordion-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon::before,.stzh-accordion-item__button-icon::after{-webkit-transition:none;transition:none}}.stzh-accordion-item__button-icon::before{-webkit-transform:rotate(180deg) translate(-50%, -50%);transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon::after{-webkit-transform:rotate(90deg) translate(-50%, -50%);transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__content{overflow:hidden;background-color:var(--content-background)}@media print{.stzh-accordion-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-accordion-item__icon-wrapper{-ms-flex-item-align:start;align-self:flex-start}.stzh-accordion-item__icon-wrapper:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item__badge{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description,.stzh-accordion-item__subtitle{color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__description,.stzh-accordion-item__subtitle{-webkit-transition:none;transition:none}}.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-accordion-item__heading-text,.stzh-accordion-item__description,.stzh-accordion-item__subtitle{display:block}.stzh-accordion-item--has-description .stzh-accordion-item__button,.stzh-accordion-item--has-subtitle .stzh-accordion-item__button{padding:var(--stzh-space-medium)}.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{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)}@media screen and (min-width: 600px){.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{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: 1024px){.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{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: 1440px){.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{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-accordion-item--is-open .stzh-accordion-item__button{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-accordion-item--is-open .stzh-accordion-item__button{border-color:SelectedItem}}.stzh-accordion-item--is-open .stzh-accordion-item__description,.stzh-accordion-item--is-open .stzh-accordion-item__subtitle{color:var(--stzh-color-white)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon::before,.stzh-accordion-item--is-open .stzh-accordion-item__button-icon::after{-webkit-transform:rotate(0) translate(-50%, -50%);transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-disabled .stzh-accordion-item__button{cursor:not-allowed;color:var(--stzh-color-grey61);border-color:transparent;background-color:var(--stzh-color-black8)}';const d={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const l={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let m=0;const z=class{constructor(e){t(this,e);this.stzhOpen=i(this,"stzhOpen",7);this.stzhOpened=i(this,"stzhOpened",7);this.stzhClose=i(this,"stzhClose",7);this.stzhClosed=i(this,"stzhClosed",7);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.toggledByMethod=false;this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.accordion||this.accordion.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onFocus=t=>{this.stzhFocus.emit({component:"stzh-accordion-item",originalEvent:t})};this.onBlur=t=>{this.stzhBlur.emit({component:"stzh-accordion-item",originalEvent:t})};this.onButtonKeydown=t=>{let i=null;if(t.key==="ArrowDown"){i="next"}else if(t.key==="ArrowUp"){i="prev"}else if(t.key==="Home"){i="first"}else if(t.key==="End"){i="last"}else if(t.key==="PageDown"&&t.ctrlKey){i="next"}else if(t.key==="PageUp"&&t.ctrlKey){i="prev"}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let i=null;if(t.key==="PageDown"){i="next"}else if(t.key==="PageUp"){i="prev"}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.collapsible=undefined;this.open=false;this.disabled=false;this.heading="";this.subtitle="";this.description="";this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await r(this.bodyElement);this.bodyElement.hidden=false;await a(this.bodyElement,h(d.keyframes,{height:this.bodyElement.scrollHeight}),d.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await r(this.bodyElement);this.bodyElement.style.overflow="hidden";await a(this.bodyElement,h(l.keyframes,{height:this.bodyElement.scrollHeight}),l.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open||this.disabled){return}this.toggledByMethod=true;this.open=true;return s(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled){return}this.toggledByMethod=true;this.open=false;return s(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async setFocus(){this.buttonElement.focus()}componentWillLoad(){this.accordionItemId=`stzh-accordion-item-${m++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden"}async connectedCallback(){this.accordion=this.element.closest("stzh-accordion")}disconnectedCallback(){if(this.accordion){this.accordion=null}}render(){const t=`h${this.headingLevel}`;const i={"stzh-accordion-item":true,"stzh-accordion-item--has-description":!!this.description,"stzh-accordion-item--has-subtitle":!!this.subtitle,"stzh-accordion-item--is-open":this.open,"stzh-accordion-item--is-disabled":this.disabled};return e(o,null,e("stzh-icon-sprite",null),e("div",{class:i},e(t,{id:`${this.accordionItemId}-header`,class:"stzh-accordion-item__heading",onClick:this.handleHeaderClick},e("button",{ref:t=>this.buttonElement=t,class:"stzh-accordion-item__button","aria-controls":`${this.accordionItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},e("span",{class:"stzh-accordion-item__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-accordion-item__icon",name:this.icon}):e("slot",{name:"icon"})),e("span",{class:"stzh-accordion-item__button-text"},e("span",{class:"stzh-accordion-item__subtitle"},this.subtitle),e("span",{class:"stzh-accordion-item__heading-text"},this.heading),e("span",{class:"stzh-accordion-item__description"},this.description)),e("span",{class:"stzh-accordion-item__button-icon"}),(this.badge||this.badgeEmpty)&&e("stzh-badge",{class:"stzh-accordion-item__badge",label:this.badge,type:this.badgeType}))),e("div",{id:`${this.accordionItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-accordion-item__content","aria-labelledby":`${this.accordionItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},e("div",{class:"stzh-accordion-item__content-inner"},e("slot",null)))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"]}}};z.style=c;export{z as stzh_accordion_item};
+//# sourceMappingURL=p-25bfad8b.entry.js.map

package/dist/stzh-components/p-25bfad8b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhAccordionItemCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","accordionItemCounter","StzhAccordionItem","this","toggledByMethod","handleHeaderClick","collapsible","toggle","open","show","accordion","onFocus","event","stzhFocus","emit","component","originalEvent","onBlur","stzhBlur","onButtonKeydown","action","key","ctrlKey","preventDefault","setItemFocus","element","onContentKeydown","openWatcher","newValue","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","disabled","waitForEvent","hide","setFocus","buttonElement","focus","componentWillLoad","accordionItemId","componentDidLoad","connectedCallback","closest","disconnectedCallback","render","Heading","headingLevel","classes","description","subtitle","h","Host","class","id","onClick","ref","el","onKeyDown","type","analyticsId","heading","icon","name","badge","badgeEmpty","label","badgeType","role"],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n */\n\n:host {\n  --trigger-size: 18px;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize('small')};\n}\n\n:host ::slotted(stzh-icon),\n.stzh-accordion-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve('p1', 'heading');\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    background-color: transparent;\n    padding-top: space('medium');\n    padding-bottom: space('medium');\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    border: 1px solid $baseBorderColor;\n    color: $colorPrimary;\n    text-align: left;\n    transition-property: color, background-color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    position: relative;\n    display: block;\n    width: var(--trigger-size);\n    height: var(--trigger-size);\n    margin-left: space('medium');\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--trigger-size);\n      height: 1px;\n      transition: transform .5s;\n      transform-origin: top left;\n      background-color: currentColor;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\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  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n  }\n\n  &__icon-wrapper {\n    align-self: flex-start;\n\n    &:not(:empty) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description,\n  &__subtitle {\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__description {\n    @include fontCurve('caption');\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  /* Subtitle / Description */\n\n  &--has-description &__button,\n  &--has-subtitle &__button {\n    padding: space('medium');\n  }\n\n  &--has-subtitle &__heading {\n    @include font('heavy');\n  }\n\n  &--has-subtitle &__heading-text {\n    @include fontCurve('h2', 'heading');\n  }\n\n  /* Open */\n\n  &--is-open &__button {\n    color: $colorWhite;\n    background-color: $colorPrimary;\n    border-color: $colorPrimary;\n\n    @include highContrast() {\n      border-color: SelectedItem;\n    }\n  }\n\n  &--is-open &__description,\n  &--is-open &__subtitle {\n    color: $colorWhite;\n  }\n\n  &--is-open &__button-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n    color: $formDisabledColor;\n    border-color: $formDisabledBorderColor;\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemBlurEvent\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true\n})\nexport class StzhAccordionItem {\n  /** Whether fold is collapsible (overwrites collapsible from timeline parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Set focus to button */\n  @Method()\n  async setFocus() {\n    this.buttonElement.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n    };\n\n    return (\n      <Host>\n        <stzh-icon-sprite></stzh-icon-sprite>\n\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={(el) => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-accordion-item__icon-wrapper\">\n                {this.icon ?\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                  :\n                  <slot name=\"icon\"></slot>\n                }\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">\n                  {this.subtitle}\n                </span>\n                <span class=\"stzh-accordion-item__heading-text\">\n                  {this.heading}\n                </span>\n                <span class=\"stzh-accordion-item__description\">\n                  {this.description}\n                </span>\n              </span>\n              <span class=\"stzh-accordion-item__button-icon\"></span>\n\n              {(this.badge || this.badgeEmpty) &&\n                <stzh-badge\n                  class=\"stzh-accordion-item__badge\"\n                  label={this.badge}\n                  type={this.badgeType}\n                ></stzh-badge>\n              }\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-28ae4569.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,a as e,g as h}from"./p-c92165bd.js";import{i as a}from"./p-ba8c574b.js";import{a as o,r,m as l}from"./p-cc8c83a8.js";import"./p-9b063923.js";const c=".sc-stzh-carousel-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-carousel-h{display:none}.sc-stzh-carousel-h *.sc-stzh-carousel,.sc-stzh-carousel-h *.sc-stzh-carousel::before,.sc-stzh-carousel-h *.sc-stzh-carousel::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-carousel-h .has-focus.sc-stzh-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel{outline-style:none !important}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-carousel-h{--peek:calc(var(--peek-in, 0px) + var(--peek-out, 0px));--peek-out:1.25rem;--padding-top:0px;--padding-bottom:0px;--gutter:var(--stzh-space-xxxsmall);--snap-stop:always;--slides:1;--slide-size:calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides))}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--peek-out:2rem}}@media screen and (min-width: 1024px){.sc-stzh-carousel-h{--peek-out:0px}}.sc-stzh-carousel-h .sc-stzh-carousel-s>*{width:100%;height:100%;-ms-flex-negative:0;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:var(--snap-stop)}.sc-stzh-carousel-h .sc-stzh-carousel-s img{-webkit-user-drag:none;user-drag:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{position:absolute;top:0;left:0;z-index:1;pointer-events:none;padding:0 var(--peek)}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-text{width:auto}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button{pointer-events:all}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-space,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-hspace,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-vspace{padding:var(--stzh-space-xsmall)}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions]{--background-color:transparent}[variant=cards].sc-stzh-carousel-h{--padding-top:0.25rem;--padding-bottom:0.25rem;--gutter:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){[variant=cards].sc-stzh-carousel-h{--peek-out:2.5rem;--gutter:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--peek-out:5.5rem;--gutter:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){[variant=cards].sc-stzh-carousel-h{--peek-out:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.sc-stzh-carousel-h[variant=cards] .sc-stzh-carousel-s>[slot=actions]{position:relative;-ms-flex-order:1;order:1;margin-top:calc(var(--stzh-space-medium) - var(--padding-bottom))}[no-peek].sc-stzh-carousel-h:not([no-peek=false]){--peek-out:0px;--peek-in:0px}.stzh-carousel.sc-stzh-carousel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:calc(100% + var(--peek-out) * 2);margin-left:calc(var(--peek-out) / -1);margin-right:calc(var(--peek-out) / -1)}.stzh-carousel__vhidden.sc-stzh-carousel{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-carousel__scroll.sc-stzh-carousel{position:relative;grid-area:slides;display:grid;width:100%;height:100%;place-items:center;overflow-x:auto;overflow-y:visible;grid-auto-flow:column;grid-auto-columns:var(--slide-size);grid-auto-rows:100%;-moz-column-gap:var(--gutter);-webkit-column-gap:var(--gutter);column-gap:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-padding:0 var(--peek);padding:var(--padding-top) var(--peek) var(--padding-bottom)}@media (prefers-reduced-motion: reduce){.stzh-carousel__scroll.sc-stzh-carousel{scroll-behavior:auto}}.stzh-carousel__scroll.sc-stzh-carousel::-webkit-scrollbar{display:none}.stzh-carousel--is-draggable.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grab;cursor:grab}.stzh-carousel--is-dragging.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grabbing;cursor:grabbing}.stzh-carousel--is-disabled.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:not-allowed;overflow:hidden}.stzh-carousel--is-non-interactive.sc-stzh-carousel{pointer-events:none;-ms-touch-action:none;touch-action:none}";const n=window.matchMedia("(prefers-reduced-motion: reduce)");let u=0;const d=class{constructor(i){s(this,i);this.stzhSlideStart=t(this,"stzhSlideStart",7);this.stzhSlidePassed=t(this,"stzhSlidePassed",7);this.stzhSlideEnd=t(this,"stzhSlideEnd",7);this.slideScrollLeft=0;this.scrolledByAutoplay=false;this.scrollTimeoutId=null;this.lastX=null;this.startX=null;this.startScrollLeft=null;this.disableTimeoutId=null;this.stoppedDragging=false;this.onReducedMotionMediaChange=()=>{this.autoplayDisabledByMotionMedia=n.matches};this.onMouseenter=()=>{if(!this.preventAutoplayPause){this.autoplayDisabledByMouse=true}};this.onMouseleave=()=>{this.autoplayDisabledByMouse=false};this.onFocusin=()=>{if(!this.preventAutoplayPause){this.autoplayDisabledByFocus=true}};this.onFocusout=()=>{this.autoplayDisabledByFocus=false};this.onPreviousClick=()=>{this.scrollToPreviousSnapPoint()};this.onNextClick=()=>{this.scrollToNextSnapPoint()};this.onSlideResize=()=>{if(this.scrollElement){this.itemSize=this.sizingMethod()}};this.onMutation=()=>{if(!this.scrollElement){return}this.slideElements=Array.from(this.scrollElement.children);this.slideElements.forEach(((s,t)=>{s.setAttribute("role","group");s.setAttribute("aria-roledescription","slide");s.setAttribute("aria-label",this.localization.slideLabel.replace(/\{current\}/gi,(t+1).toString()).replace(/\{total\}/gi,this.slideElements.length.toString()))}));this.previousElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-previous]"));this.nextElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-next]"));this.navigationTextElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-navigation-text]"))};this.onScroll=()=>{if(this.scrollTimeoutId===null){const s=this.scrollElement.scrollLeft>this.slideScrollLeft?1:-1;this.scrolling=true;if(!this.scrolledByAutoplay){if(this.preventAutoplayStop){this.autoplayDisabledByScroll=true}else{this.autoplay=false}}this.stzhSlideStart.emit({component:"stzh-carousel",index:this.slide+s})}if(this.slide!==this.calculateSlide()){this.update();this.stzhSlidePassed.emit({component:"stzh-carousel",index:this.slide})}this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=window.setTimeout(this.onScrollEnd,this.scrollTimeout)};this.onScrollEnd=()=>{this.scrollTimeoutId=null;this.update();this.scrolling=false;this.scrolledByAutoplay=false;this.autoplayDisabledByScroll=false;if(this.stoppedDragging){this.stoppedDragging=false;this.scrollElement.style.removeProperty("scroll-behavior");this.scrollElement.style.removeProperty("scroll-snap-type")}if(this.tabThrough||this.variant==="cards"){this.ariaLive=""}else{this.ariaLive=(this.currentSlides>1?this.localization.slidesLabel:this.localization.slideLabel).replace(/\{(current|from)\}/gi,(this.slide+1).toString()).replace(/\{to\}/gi,(this.slide+this.currentSlides).toString()).replace(/\{total\}/gi,this.slideElements.length.toString())}this.stzhSlideEnd.emit({component:"stzh-carousel",index:this.slide})};this.onMediaChange=()=>{const s=l("ultra").matches;const t=l("large").matches;const i=l("medium").matches;const e=l("small").matches;if(s&&this.slidesUltra!==0){this.currentSlides=this.slidesUltra}else if(t&&this.slidesLarge!==0){this.currentSlides=this.slidesLarge}else if(i&&this.slidesMedium!==0){this.currentSlides=this.slidesMedium}else if(e&&this.slidesSmall!==0){this.currentSlides=this.slidesSmall}else{this.currentSlides=this.slides}this.currentSwipeSlides=this.currentSlides};this.mouseMove=s=>{const t=this.lastX-s.clientX;this.lastX=s.clientX;this.scrollElement.scrollLeft+=t};this.startDragging=s=>{s.preventDefault();this.disableTimeoutId&&window.clearTimeout(this.disableTimeoutId);this.disableTimeoutId=null;this.startX=this.lastX=s.clientX;this.startScrollLeft=this.scrollElement.scrollLeft;this.scrollElement.style.setProperty("scroll-behavior","auto");this.scrollElement.style.setProperty("scroll-snap-type","unset");this.dragging=true;if(this.preventAutoplayStop){this.autoplayDisabledByDrag=true}else{this.autoplay=false}window.addEventListener("mousemove",this.mouseMove);window.addEventListener("mouseup",this.stopDragging,{capture:true});window.addEventListener("click",this.checkClick,{capture:true})};this.stopDragging=s=>{s.preventDefault();const t=Math.abs(this.startX-this.lastX);const i=t>this.distanceQuickSwipe;const e=this.lastX>this.startX?1:-1;this.dragging=false;this.autoplayDisabledByDrag=false;const h=this.scrollElement.scrollLeft;this.scrollElement.style.removeProperty("scroll-snap-type");const a=this.scrollElement.scrollLeft;this.scrollElement.style.setProperty("scroll-snap-type","unset");this.scrollElement.scrollTo({left:h,behavior:"auto"});if(a!==this.startScrollLeft||!i){this.scrollElement.scrollTo({left:a,behavior:n.matches?"auto":"smooth"})}else if(e===1){this.slideToPrevious()}else{this.slideToNext()}window.removeEventListener("mousemove",this.mouseMove);window.removeEventListener("mouseup",this.stopDragging,{capture:true});this.stoppedDragging=true};this.checkClick=s=>{const t=Math.abs(this.startX-this.lastX);const i=t>this.distancePreventClick;if(i){s.preventDefault()}this.lastX=null;window.removeEventListener("click",this.checkClick,{capture:true})};this.autoplayInterval=()=>{this.scrolledByAutoplay=true;if(this.hasReachedLastSlide()){this.slideTo(0)}else{this.slideToNext()}};this.localization=undefined;this.variant="default";this.disabled=false;this.noPeek=false;this.slides=1;this.slidesSmall=0;this.slidesMedium=0;this.slidesLarge=0;this.slidesUltra=0;this.slide=0;this.autoplay=false;this.autoplayTimeout=3e3;this.nonInteractive=false;this.preventMouseDrag=false;this.preventAutoplayPause=false;this.preventAutoplayStop=false;this.tabThrough=false;this.scrollTimeout=100;this.distanceQuickSwipe=40;this.distancePreventClick=6;this.autoplayRunning=false;this.autoplayDisabledByMotionMedia=false;this.autoplayDisabledByMouse=false;this.autoplayDisabledByFocus=false;this.autoplayDisabledByScroll=false;this.autoplayDisabledByDrag=false;this.dragging=false;this.scrolling=false;this.ariaLive="";this.currentSlides=1;this.currentSwipeSlides=1;this.slideElements=[];this.previousElements=[];this.nextElements=[];this.navigationTextElements=[]}async slideTo(s,t="smooth"){this.scrollToSlide(s,t)}async slideToPrevious(s="smooth"){this.scrollToPreviousSnapPoint(s)}async slideToNext(s="smooth"){this.scrollToNextSnapPoint(s)}disabledWatcher(){if(this.disabled){this.scrollElement&&this.scrollElement.removeEventListener("scroll",this.onScroll);this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=null;this.element.removeEventListener("mouseenter",this.onMouseenter);this.element.removeEventListener("mouseleave",this.onMouseleave);this.element.removeEventListener("focusin",this.onFocusin);this.element.removeEventListener("focusout",this.onFocusout);this.onReducedMotionMediaChange();n&&n.removeEventListener("change",this.onReducedMotionMediaChange)}else{this.scrollElement&&this.scrollElement.addEventListener("scroll",this.onScroll,{passive:true});this.element.addEventListener("mouseenter",this.onMouseenter);this.element.addEventListener("mouseleave",this.onMouseleave);this.element.addEventListener("focusin",this.onFocusin);this.element.addEventListener("focusout",this.onFocusout);n&&n.addEventListener("change",this.onReducedMotionMediaChange)}}preventMouseDragWatcher(){if(this.preventMouseDrag||this.disabled){this.disableTimeoutId&&window.clearTimeout(this.disableTimeoutId);this.disableTimeoutId=null;this.scrollElement&&this.scrollElement.removeEventListener("mousedown",this.startDragging);this.lastX=null}else{this.scrollElement&&this.scrollElement.addEventListener("mousedown",this.startDragging)}}autoplayRunningWatcher(){if(!this.autoplay||this.disabled||this.autoplayDisabledByMotionMedia||this.autoplayDisabledByMouse||this.autoplayDisabledByFocus||this.autoplayDisabledByScroll||this.autoplayDisabledByDrag){this.autoplayIntervalId&&window.clearInterval(this.autoplayIntervalId);this.autoplayIntervalId=null;this.autoplayRunning=false}else{this.autoplayIntervalId&&window.clearInterval(this.autoplayIntervalId);this.autoplayIntervalId=window.setInterval(this.autoplayInterval,this.autoplayTimeout);this.autoplayRunning=true}}snapAlignWatcher(){this.slideElements.forEach(((s,t)=>{const i=(t-this.currentSwipeSlides)%this.currentSwipeSlides===0;if(i){s.style.removeProperty("scroll-snap-align")}else{s.style.setProperty("scroll-snap-align","none")}}))}inertWatcher(){this.slideElements.forEach(((s,t)=>{const i=this.tabThrough||this.variant==="cards"||t>=this.slide&&t<this.slide+this.currentSlides;s.inert=!i;if(i){s.removeAttribute("aria-hidden")}else{s.setAttribute("aria-hidden",i?"false":"true")}}))}prevNextNavigationWatcher(){const s=this.tabThrough||this.variant==="cards";const t=t=>{const i=a(t);if(s){t.setAttribute("aria-hidden","true");t.setAttribute(i?"a11y-tabindex":"tabindex","-1")}else{t.removeAttribute("aria-hidden");t.removeAttribute(i?"a11y-tabindex":"tabindex")}};this.nextElements.forEach(t);this.previousElements.forEach(t)}prevNextHiddenWatcher(){const s=this.slideElements.length<=this.currentSlides;const t=t=>{if(s){t.setAttribute("hidden","")}else{t.removeAttribute("hidden")}};this.navigationTextElements.forEach(t);this.nextElements.forEach(t);this.previousElements.forEach(t)}nextPrevDisabledWatcher(){if(!this.scrollElement){return}const s=this.slide===0;const t=this.hasReachedLastSlide();this.nextElements.forEach((s=>{const i=a(s);s.setAttribute(i?"a11y-disabled":"aria-disabled",t?"true":"false")}));this.previousElements.forEach((t=>{const i=a(t);t.setAttribute(i?"a11y-disabled":"aria-disabled",s?"true":"false")}))}nextElementsWatcher(){this.nextElements.forEach((s=>{const t=a(s);s.addEventListener("click",this.onNextClick);s.setAttribute(t?"a11y-controls":"aria-controls",`${this.carouselId}-scroll`)}))}previousElementsWatcher(){this.previousElements.forEach((s=>{const t=a(s);s.addEventListener("click",this.onPreviousClick);s.setAttribute(t?"a11y-controls":"aria-controls",`${this.carouselId}-scroll`)}))}scrollToSlide(s,t="smooth"){if(this.disabled){return}this.scrollElement.scrollTo({left:s*this.itemSize,behavior:n.matches?"auto":t})}sizingMethod(){const s=window.getComputedStyle(this.scrollElement);return(this.scrollElement.firstElementChild||this.scrollElement).offsetWidth+parseInt(s.getPropertyValue("column-gap"),10)}calculateSlide(){return Math.floor(this.scrollElement.scrollLeft/this.itemSize)}scrollToPreviousSnapPoint(s="smooth"){if(this.disabled){return}let t=this.slide;let i=false;while(!i&&t>0){t=t-1;i=(t-this.currentSwipeSlides)%this.currentSwipeSlides===0}this.slideTo(t,s)}scrollToNextSnapPoint(s="smooth"){if(this.disabled){return}this.slideTo(this.slide+this.currentSwipeSlides,s)}update(){this.slide=this.calculateSlide();this.slideScrollLeft=this.slide*this.itemSize;this.onMutation()}hasReachedLastSlide(){const{scrollLeft:s,offsetWidth:t,scrollWidth:i}=this.scrollElement;return Math.ceil(s+t)>=i}async componentWillLoad(){this.carouselId=`stzh-carousel-${u++}`;this.onMediaChange();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"carousel")}}componentDidLoad(){this.itemSize=this.sizingMethod();this.update();this.disabledWatcher();this.preventMouseDragWatcher();this.autoplayRunningWatcher()}connectedCallback(){o(this.onMediaChange);this.resizeObserver=new ResizeObserver(this.onSlideResize);this.resizeObserver.observe(this.element);this.mutationObserver=new MutationObserver(this.onMutation);this.mutationObserver.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=null;this.disabled=true;r(this.onMediaChange);if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}}render(){const s={"stzh-carousel":true,"stzh-carousel--is-disabled":this.disabled,"stzh-carousel--is-draggable":!this.preventMouseDrag,"stzh-carousel--is-non-interactive":this.nonInteractive,"stzh-carousel--is-dragging":this.dragging,"stzh-carousel--is-scrolling":this.scrolling,"stzh-carousel--has-autoplay":this.autoplay,"stzh-carousel--is-autoplay-running":this.autoplayRunning};return i(e,{"aria-roledescription":"carousel",style:{"--slides":this.currentSlides.toString()}},i("div",{class:s},i("slot",{name:"actions"}),i("div",{class:"stzh-carousel__vhidden","aria-live":this.autoplayDisabledByFocus||this.autoplayDisabledByMouse?"polite":"off"},this.ariaLive),i("div",{ref:s=>this.scrollElement=s,id:`${this.carouselId}-scroll`,class:"stzh-carousel__scroll"},i("slot",null))))}get element(){return h(this)}static get watchers(){return{disabled:["disabledWatcher","preventMouseDragWatcher","autoplayRunningWatcher"],preventMouseDrag:["preventMouseDragWatcher"],autoplay:["autoplayRunningWatcher"],autoplayDisabledByMotionMedia:["autoplayRunningWatcher"],autoplayDisabledByMouse:["autoplayRunningWatcher"],autoplayDisabledByFocus:["autoplayRunningWatcher"],autoplayDisabledByScroll:["autoplayRunningWatcher"],autoplayDisabledByDrag:["autoplayRunningWatcher"],autoplayTimeout:["autoplayRunningWatcher"],slideElements:["snapAlignWatcher","inertWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher"],currentSwipeSlides:["snapAlignWatcher"],slide:["inertWatcher","nextPrevDisabledWatcher"],variant:["inertWatcher","prevNextNavigationWatcher"],currentSlides:["inertWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher"],tabThrough:["inertWatcher","prevNextNavigationWatcher"],nextElements:["prevNextNavigationWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher","nextElementsWatcher"],previousElements:["prevNextNavigationWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher","previousElementsWatcher"],navigationTextElements:["prevNextHiddenWatcher"]}}};d.style=c;export{d as stzh_carousel};
+//# sourceMappingURL=p-28ae4569.entry.js.map

package/dist/stzh-components/p-28ae4569.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhCarouselCss","reducedMotionMedia","window","matchMedia","carouselCounter","StzhCarousel","this","slideScrollLeft","scrolledByAutoplay","scrollTimeoutId","lastX","startX","startScrollLeft","disableTimeoutId","stoppedDragging","onReducedMotionMediaChange","autoplayDisabledByMotionMedia","matches","onMouseenter","preventAutoplayPause","autoplayDisabledByMouse","onMouseleave","onFocusin","autoplayDisabledByFocus","onFocusout","onPreviousClick","scrollToPreviousSnapPoint","onNextClick","scrollToNextSnapPoint","onSlideResize","scrollElement","itemSize","sizingMethod","onMutation","slideElements","Array","from","children","forEach","slide","index","setAttribute","localization","slideLabel","replace","toString","length","previousElements","element","querySelectorAll","nextElements","navigationTextElements","onScroll","direction","scrollLeft","scrolling","preventAutoplayStop","autoplayDisabledByScroll","autoplay","stzhSlideStart","emit","component","calculateSlide","update","stzhSlidePassed","clearTimeout","setTimeout","onScrollEnd","scrollTimeout","style","removeProperty","tabThrough","variant","ariaLive","currentSlides","slidesLabel","stzhSlideEnd","onMediaChange","ultra","media","large","medium","small","slidesUltra","slidesLarge","slidesMedium","slidesSmall","slides","currentSwipeSlides","mouseMove","event","distance","clientX","startDragging","preventDefault","setProperty","dragging","autoplayDisabledByDrag","addEventListener","stopDragging","capture","checkClick","Math","abs","minimumReached","distanceQuickSwipe","endDraddingLeft","finalLeft","scrollTo","left","behavior","slideToPrevious","slideToNext","removeEventListener","distancePreventClick","autoplayInterval","hasReachedLastSlide","slideTo","behaviour","scrollToSlide","disabledWatcher","disabled","passive","preventMouseDragWatcher","preventMouseDrag","autoplayRunningWatcher","autoplayIntervalId","clearInterval","autoplayRunning","setInterval","autoplayTimeout","snapAlignWatcher","shouldSnap","inertWatcher","isActive","inert","removeAttribute","prevNextNavigationWatcher","setAriaAttributes","isStzh","isStzhElement","prevNextHiddenWatcher","hideElements","setHiddenAttribute","nextPrevDisabledWatcher","reachedFirstSlide","reachedLastSlide","nextElementsWatcher","nextElement","carouselId","previousElementsWatcher","previousElement","css","getComputedStyle","firstElementChild","offsetWidth","parseInt","getPropertyValue","floor","previousIndex","canSnap","scrollWidth","ceil","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidLoad","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","mutationObserver","MutationObserver","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","render","classes","nonInteractive","h","Host","class","name","ref","el","id"],"sources":["src/components/stzh-carousel/stzh-carousel.scss?tag=stzh-carousel&encapsulation=scoped","src/components/stzh-carousel/stzh-carousel.tsx"],"sourcesContent":["/**\n * @prop --padding-top: Padding Top of scroll container\n * @prop --padding-bottom: Padding Bottom of scroll container\n * @prop --peek-in: Peek size (inside container) showing the next/previous slides\n * @prop --peek-out: Negative peek size (breakout of container) showing the next/previous slides\n * @prop --gutter: Space between the slides\n * @prop --snap-stop: Snap stop of scroll container\n */\n\n:host {\n  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));\n  --peek-out: #{$containerMargin};\n  --padding-top: 0px;\n  --padding-bottom: 0px;\n  --gutter: #{space('xxxsmall')};\n  --snap-stop: always;\n  --slides: 1;\n  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));\n\n  @include mq($from: small) {\n    --peek-out: #{$containerMarginSmall};\n  }\n\n  @include mq($from: medium) {\n    --peek-out: 0px;\n  }\n\n  ::slotted(*) {\n    width: 100%;\n    height: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: start;\n    scroll-snap-stop: var(--snap-stop);\n\n    img {\n      -webkit-user-drag: none;\n      user-drag: none;\n      -ms-user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  }\n\n  ::slotted([slot=\"actions\"]) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    pointer-events: none;\n    padding: 0 var(--peek);\n\n    stzh-text {\n      width: auto;\n    }\n\n    stzh-button {\n      pointer-events: all;\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    stzh-space,\n    stzh-hspace,\n    stzh-vspace {\n      padding: space('xsmall');\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    --background-color: transparent;\n  }\n\n  /* Card */\n\n  &[variant=\"cards\"] {\n    --padding-top: 4px;\n    --padding-bottom: 4px;\n\n    --gutter: #{spaceCurveValue('tiny')};\n\n    @include mq($from: medium) {\n      --peek-out: #{$containerMarginMedium};\n      --gutter: #{spaceCurveValue('tiny', 'medium')};\n    }\n\n    @include mq($from: large) {\n      --peek-out: #{$containerMarginLarge};\n      --gutter: #{spaceCurveValue('tiny', 'large')};\n    }\n\n    @include mq($from: ultra) {\n      --peek-out: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    }\n  }\n\n  &[variant=\"cards\"] ::slotted([slot=\"actions\"]) {\n    position: relative;\n    order: 1;\n    margin-top: calc(#{space('medium')} - var(--padding-bottom));\n  }\n\n  /* No peek */\n\n  &[no-peek]:not([no-peek=\"false\"]) {\n    --peek-out: 0px;\n    --peek-in: 0px;\n  }\n}\n\n.stzh-carousel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% + var(--peek-out) * 2);\n  margin-left: calc(var(--peek-out) / -1);\n  margin-right: calc(var(--peek-out) / -1);\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__scroll {\n    position: relative;\n    grid-area: slides;\n    display: grid;\n    width: 100%;\n    height: 100%;\n    place-items: center;\n    overflow-x: auto;\n    overflow-y: visible;\n    grid-auto-flow: column;\n    grid-auto-columns: var(--slide-size);\n    grid-auto-rows: 100%;\n    column-gap: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-behavior: smooth;\n    overscroll-behavior-x: contain;\n    scroll-snap-type: x mandatory;\n    scroll-padding: 0 var(--peek);\n    padding: var(--padding-top) var(--peek) var(--padding-bottom);\n\n    @media (prefers-reduced-motion: reduce) {\n      scroll-behavior: auto;\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--is-draggable &__scroll {\n    cursor: grab;\n  }\n\n  &--is-dragging &__scroll {\n    cursor: grabbing;\n  }\n\n  &--is-disabled &__scroll {\n    cursor: not-allowed;\n    overflow: hidden;\n  }\n\n  &--is-non-interactive {\n    pointer-events: none;\n    touch-action: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCarouselSlideStartEvent,\n  StzhCarouselSlidePassedEvent,\n  StzhCarouselSlideEndEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { StzhCarouselLocalizedText } from \"./stzh-carousel.localization\"\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nconst reducedMotionMedia = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\nlet carouselCounter = 0;\n\n/*\n* Inspired by:\n*\n* - https://github.com/barthy-koeln/scroll-snap-slider\n* - https://tannerhodges.github.io/snap-slider/\n* - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/\n* - https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp\n* - http://web-accessibility.carnegiemuseums.org/code/carousels/\n*/\n\n/**\n * @slot - Slot any element\n * @slot actions - Slot for `stzh-actions` element\n */\n@Component({\n  tag: \"stzh-carousel\",\n  styleUrl: \"stzh-carousel.scss\",\n  scoped: true\n})\nexport class StzhCarousel {\n  /** Translation strings */\n  @Prop() localization: StzhCarouselLocalizedText;\n\n  /** Carousel variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"cards\" = \"default\";\n\n  /** Whether carousel is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to remove inside/outside peek. */\n  @Prop({ reflect: true }) noPeek: boolean = false;\n\n  /** Slides number */\n  @Prop() slides: number = 1;\n  /** Slides number above small breakpoint */\n  @Prop() slidesSmall: number = 0;\n  /** Slides number above medium breakpoint */\n  @Prop() slidesMedium: number = 0;\n  /** Slides number above large breakpoint */\n  @Prop() slidesLarge: number = 0;\n  /** Slides number above ultra breakpoint */\n  @Prop() slidesUltra: number = 0;\n\n  // /** How many slides per swipe */\n  // @Prop() swipeSlides: number = 1;\n  // /** How many slides per swipe above small breakpoint */\n  // @Prop() swipeSlidesSmall: number = 0;\n  // /** How many slides per swipe above medium breakpoint */\n  // @Prop() swipeSlidesMedium: number = 0;\n  // /** How many slides per swipe above large breakpoint */\n  // @Prop() swipeSlidesLarge: number = 0;\n  // /** How many slides per swipe above ultra breakpoint */\n  // @Prop() swipeSlidesUltra: number = 0;\n\n  /** Active slide (readonly) */\n  @Prop() slide: number = 0;\n\n  /**\n   * Whether autoplay is enabled.\n   * Gets paused, when user has focus inside carousel element or hovers over it.\n   * Also when reduced motion media query is active or carousel is set disabled.\n   * Gets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)\n   */\n  @Prop({ mutable: true }) autoplay: boolean = false;\n\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 3000;\n\n  /** Whether scrolling & dragging should be disabled */\n  @Prop() nonInteractive: boolean = false;\n\n  /** Whether drag with mouse should be disabled (still will be able to scroll with wheeling or arrow keys) */\n  @Prop() preventMouseDrag: boolean = false;\n\n  /** Whether autoplay pause should be prevented when user hovers/focuses carousel */\n  @Prop() preventAutoplayPause: boolean = false;\n\n  /** Whether autoplay stop should be prevented when user scroll or drags carousel */\n  @Prop() preventAutoplayStop: boolean = false;\n\n  /**\n   * Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).\n   * By default only the visible slides will be tabbable and the prev/next can be used to change slides\n   * (enabled when `variant` is set to `cards`).\n   */\n  @Prop() tabThrough: boolean = false;\n\n\n  /** Timeout delay in milliseconds used to catch the end of scroll events */\n  @State() scrollTimeout: number = 100;\n\n  /** Minimum drag distance that needs to be reached to swipe to next/previous slide(s). */\n  @State() distanceQuickSwipe: number = 40;\n\n  /** Minimum drag distance that neeeds to be reached to prevent click on slide elements. */\n  @State() distancePreventClick: number = 6;\n\n  @Element() element: HTMLStzhCarouselElement;\n\n  /** Slide start event */\n  @Event() stzhSlideStart: EventEmitter<StzhCarouselSlideStartEvent>;\n\n  /** Slide passed event */\n  @Event() stzhSlidePassed: EventEmitter<StzhCarouselSlidePassedEvent>;\n\n  /** Slide end event */\n  @Event() stzhSlideEnd: EventEmitter<StzhCarouselSlideEndEvent>;\n\n  /** Scroll to a slide by index */\n  @Method()\n  async slideTo(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToSlide(index, behaviour);\n  }\n\n  /** Scroll to previous snap point */\n  @Method()\n  async slideToPrevious(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToPreviousSnapPoint(behaviour);\n  }\n\n  /** Scroll to next snap point */\n  @Method()\n  async slideToNext(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToNextSnapPoint(behaviour);\n  }\n\n  @Watch(\"disabled\")\n  disabledWatcher() {\n    if (this.disabled) {\n      this.scrollElement && this.scrollElement.removeEventListener(\"scroll\", this.onScroll);\n      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n      this.scrollTimeoutId = null;\n      this.element.removeEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.removeEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.removeEventListener(\"focusin\", this.onFocusin);\n      this.element.removeEventListener(\"focusout\", this.onFocusout);\n      this.onReducedMotionMediaChange();\n      reducedMotionMedia && reducedMotionMedia.removeEventListener(\"change\", this.onReducedMotionMediaChange);\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"scroll\", this.onScroll, { passive: true });\n      this.element.addEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.addEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.addEventListener(\"focusin\", this.onFocusin);\n      this.element.addEventListener(\"focusout\", this.onFocusout);\n      reducedMotionMedia && reducedMotionMedia.addEventListener(\"change\", this.onReducedMotionMediaChange);\n    }\n  }\n\n  @Watch(\"disabled\")\n  @Watch(\"preventMouseDrag\")\n  preventMouseDragWatcher() {\n    if (this.preventMouseDrag || this.disabled) {\n      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n      this.disableTimeoutId = null;\n      this.scrollElement && this.scrollElement.removeEventListener(\"mousedown\", this.startDragging);\n      this.lastX = null;\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"mousedown\", this.startDragging);\n    }\n  }\n\n  @Watch(\"autoplay\")\n  @Watch(\"autoplayDisabledByMotionMedia\")\n  @Watch(\"autoplayDisabledByMouse\")\n  @Watch(\"autoplayDisabledByFocus\")\n  @Watch(\"autoplayDisabledByScroll\")\n  @Watch(\"autoplayDisabledByDrag\")\n  @Watch(\"autoplayTimeout\")\n  @Watch(\"disabled\")\n  autoplayRunningWatcher() {\n    if (\n      !this.autoplay\n      || this.disabled\n      || this.autoplayDisabledByMotionMedia\n      || this.autoplayDisabledByMouse\n      || this.autoplayDisabledByFocus\n      || this.autoplayDisabledByScroll\n      || this.autoplayDisabledByDrag\n    ) {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = null;\n      this.autoplayRunning = false;\n    } else {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);\n      this.autoplayRunning = true;\n    }\n  }\n\n  @Watch(\"slideElements\")\n  @Watch(\"currentSwipeSlides\")\n  snapAlignWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n\n      if (shouldSnap) {\n        slide.style.removeProperty(\"scroll-snap-align\");\n      } else {\n        slide.style.setProperty(\"scroll-snap-align\", \"none\");\n      }\n    });\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"variant\")\n  @Watch(\"slideElements\")\n  @Watch(\"currentSlides\")\n  @Watch(\"tabThrough\")\n  inertWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const isActive = this.tabThrough\n        || this.variant === \"cards\"\n        || index >= this.slide && index < this.slide + this.currentSlides;\n\n      slide.inert = !isActive;\n\n      if (isActive) {\n        slide.removeAttribute(\"aria-hidden\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", isActive ? \"false\" : \"true\");\n      }\n    });\n  }\n\n  @Watch(\"variant\")\n  @Watch(\"tabThrough\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  prevNextNavigationWatcher() {\n    const tabThrough = this.tabThrough || this.variant === \"cards\";\n\n    const setAriaAttributes = (element) => {\n      const isStzh = isStzhElement(element);\n\n      if (tabThrough) {\n        element.setAttribute(\"aria-hidden\", \"true\");\n        element.setAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\", \"-1\");\n      } else {\n        element.removeAttribute(\"aria-hidden\");\n        element.removeAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\");\n      }\n    }\n\n    this.nextElements.forEach(setAriaAttributes);\n    this.previousElements.forEach(setAriaAttributes);\n  }\n\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  @Watch(\"navigationTextElements\")\n  prevNextHiddenWatcher() {\n    const hideElements = this.slideElements.length <= this.currentSlides;\n\n    const setHiddenAttribute = (element) => {\n      if (hideElements) {\n        element.setAttribute(\"hidden\", \"\");\n      } else {\n        element.removeAttribute(\"hidden\");\n      }\n    };\n\n    this.navigationTextElements.forEach(setHiddenAttribute);\n    this.nextElements.forEach(setHiddenAttribute);\n    this.previousElements.forEach(setHiddenAttribute);\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  nextPrevDisabledWatcher() {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    const reachedFirstSlide = this.slide === 0;\n    const reachedLastSlide = this.hasReachedLastSlide();\n\n    this.nextElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedLastSlide ? \"true\" : \"false\");\n    });\n\n    this.previousElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedFirstSlide ? \"true\" : \"false\");\n    });\n  }\n\n  @Watch(\"nextElements\")\n  nextElementsWatcher() {\n    this.nextElements.forEach((nextElement) => {\n      const isStzh = isStzhElement(nextElement);\n\n      nextElement.addEventListener(\"click\", this.onNextClick);\n      nextElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  @Watch(\"previousElements\")\n  previousElementsWatcher() {\n    this.previousElements.forEach((previousElement) => {\n      const isStzh = isStzhElement(previousElement);\n\n      previousElement.addEventListener(\"click\", this.onPreviousClick);\n      previousElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  /** Whether autoplay is currently running */\n  @State() autoplayRunning: boolean = false;\n\n  /** Whether autoplay is currently disabled by reduced motion media */\n  @State() autoplayDisabledByMotionMedia: boolean = false;\n\n  /** Whether autoplay is currently disabled by mouse */\n  @State() autoplayDisabledByMouse: boolean = false;\n\n  /** Whether autoplay is currently disabled by focus */\n  @State() autoplayDisabledByFocus: boolean = false;\n\n  /** Whether autoplay is currently disabled by scroll */\n  @State() autoplayDisabledByScroll: boolean = false;\n\n  /** Whether autoplay is currently disabled by drag */\n  @State() autoplayDisabledByDrag: boolean = false;\n\n  /** Whether user is currently dragging with mouse */\n  @State() dragging: boolean = false;\n\n  /** Whether user is currently scrolling */\n  @State() scrolling: boolean = false;\n\n  /** Aria live text */\n  @State() ariaLive: string = \"\";\n\n  /** Currently shown slides */\n  @State() currentSlides: number = 1;\n\n  /** How many slides should be moved currently */\n  @State() currentSwipeSlides: number = 1;\n\n  /** Slide elements */\n  @State() slideElements: HTMLElement[] = [];\n\n  /** Previous elements */\n  @State() previousElements: HTMLElement[] = [];\n\n  /** Next elements */\n  @State() nextElements: HTMLElement[] = [];\n\n  /** Navigation text elements */\n  @State() navigationTextElements: HTMLElement[] = [];\n\n  private scrollElement: HTMLElement;\n\n  /** Unique generated id */\n  private carouselId: string;\n\n  /** Current scroll position */\n  private slideScrollLeft: number = 0;\n\n  /** Flag whether scrolling was done by user or not */\n  private scrolledByAutoplay: boolean = false;\n\n  /** Timeout ID used to catch the end of scroll events */\n  private scrollTimeoutId: number = null;\n\n  /** Interval ID for autoplay */\n  private autoplayIntervalId: number;\n\n  /** Last drag event position */\n  private lastX: number = null;\n\n  /** Where the dragging started */\n  private startX: number = null;\n\n  /** Where the dragging started scroll position */\n  private startScrollLeft: number = null;\n\n  /** Timeout ID for a smooth drag release */\n  private disableTimeoutId: number = null;\n\n  /** Calculated size of a single item */\n  private itemSize: number;\n\n  /** Resize observer used to update item size */\n  private resizeObserver: ResizeObserver;\n\n  /** Mutation observer used to keep track of slides */\n  private mutationObserver: MutationObserver;\n\n  /** Whether user has just stopped dragging */\n  private stoppedDragging: boolean = false;\n\n  private scrollToSlide(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.scrollElement.scrollTo({\n      left: index * this.itemSize,\n      behavior: reducedMotionMedia.matches ? \"auto\" : behaviour\n    });\n  }\n\n  /** Width of a slide  */\n  private sizingMethod() {\n    const css = window.getComputedStyle(this.scrollElement);\n\n    return ((this.scrollElement.firstElementChild as HTMLElement) || this.scrollElement).offsetWidth\n      + parseInt(css.getPropertyValue(\"column-gap\"), 10);\n  }\n\n  /**\n   * Calculates the active slide.\n   * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.\n   */\n  private calculateSlide() {\n    // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide\n    // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible\n    // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible\n    return Math.floor(this.scrollElement.scrollLeft / this.itemSize);\n  }\n\n  private scrollToPreviousSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    let previousIndex = this.slide;\n    let canSnap = false;\n\n    while (!canSnap && previousIndex > 0) {\n      previousIndex = previousIndex - 1;\n      canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n    }\n\n    this.slideTo(previousIndex, behaviour);\n  }\n\n  private scrollToNextSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.slideTo(this.slide + this.currentSwipeSlides, behaviour);\n  }\n\n  private update() {\n    this.slide = this.calculateSlide();\n    this.slideScrollLeft = this.slide * this.itemSize;\n\n    this.onMutation();\n  }\n\n  private hasReachedLastSlide() {\n    const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;\n    return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;\n  }\n\n  private onReducedMotionMediaChange = () => {\n    this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;\n  }\n\n  private onMouseenter = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByMouse = true;\n    }\n  }\n\n  private onMouseleave = () => {\n    this.autoplayDisabledByMouse = false;\n  }\n\n  private onFocusin = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByFocus = true;\n    }\n  }\n\n  private onFocusout = () => {\n    this.autoplayDisabledByFocus = false;\n  }\n\n  private onPreviousClick = () => {\n    this.scrollToPreviousSnapPoint();\n  }\n\n  private onNextClick = () => {\n    this.scrollToNextSnapPoint();\n  }\n\n  private onSlideResize = () => {\n    if (this.scrollElement) {\n      this.itemSize = this.sizingMethod();\n    }\n  }\n\n  private onMutation = () => {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    this.slideElements = Array.from(this.scrollElement.children) as HTMLElement[];\n\n    this.slideElements.forEach((slide, index) => {\n      slide.setAttribute(\"role\", \"group\");\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"aria-label\", this.localization.slideLabel\n        .replace(/\\{current\\}/gi, (index + 1).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString())\n      );\n    });\n\n    this.previousElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-previous]\"));\n    this.nextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-next]\"));\n    this.navigationTextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-navigation-text]\"));\n  }\n\n  private onScroll = () => {\n    if (this.scrollTimeoutId === null) {\n      const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;\n\n      this.scrolling = true;\n\n      if (!this.scrolledByAutoplay) {\n        if (this.preventAutoplayStop) {\n          this.autoplayDisabledByScroll = true;\n        } else {\n          this.autoplay = false;\n        }\n      }\n\n      this.stzhSlideStart.emit({\n        component: \"stzh-carousel\",\n        index: this.slide + direction\n      });\n    }\n\n    if (this.slide !== this.calculateSlide()) {\n      this.update();\n      this.stzhSlidePassed.emit({\n        component: \"stzh-carousel\",\n        index: this.slide\n      });\n    }\n\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);\n  }\n\n  private onScrollEnd = () => {\n    this.scrollTimeoutId = null;\n    this.update();\n\n    this.scrolling = false;\n    this.scrolledByAutoplay = false;\n    this.autoplayDisabledByScroll = false;\n\n    if (this.stoppedDragging) {\n      this.stoppedDragging = false;\n      this.scrollElement.style.removeProperty(\"scroll-behavior\");\n      this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    }\n\n    if (this.tabThrough || this.variant === \"cards\") {\n      this.ariaLive = \"\";\n    } else {\n      this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)\n        .replace(/\\{(current|from)\\}/gi, (this.slide + 1).toString())\n        .replace(/\\{to\\}/gi, (this.slide + this.currentSlides).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString());\n    }\n\n    this.stzhSlideEnd.emit({\n      component: \"stzh-carousel\",\n      index: this.slide\n    });\n  }\n\n  private onMediaChange = () => {\n    const ultra = media(\"ultra\").matches;\n    const large = media(\"large\").matches;\n    const medium = media(\"medium\").matches;\n    const small = media(\"small\").matches;\n\n    if (ultra && this.slidesUltra !== 0) {\n      this.currentSlides = this.slidesUltra;\n    } else if (large && this.slidesLarge !== 0) {\n      this.currentSlides = this.slidesLarge;\n    } else if (medium && this.slidesMedium !== 0) {\n      this.currentSlides = this.slidesMedium;\n    } else if (small && this.slidesSmall !== 0) {\n      this.currentSlides = this.slidesSmall;\n    } else {\n      this.currentSlides = this.slides;\n    }\n\n    // if (ultra && this.swipeSlidesUltra !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesUltra;\n    // } else if (large && this.swipeSlidesLarge !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesLarge;\n    // } else if (medium && this.swipeSlidesMedium !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesMedium;\n    // } else if (small && this.swipeSlidesSmall !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesSmall;\n    // } else {\n    //   this.currentSwipeSlides = this.swipeSlides;\n    // }\n\n    this.currentSwipeSlides = this.currentSlides;\n  }\n\n  /** Scroll the slider the appropriate amount of pixels and update the last event position */\n  private mouseMove = (event: MouseEvent) => {\n    const distance = this.lastX - event.clientX;\n    this.lastX = event.clientX;\n\n    this.scrollElement.scrollLeft += distance;\n  }\n\n  /** Clear disable timeout, set up variables and styles and attach the listener. */\n  private startDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n    this.disableTimeoutId = null;\n\n    this.startX = this.lastX = event.clientX;\n    this.startScrollLeft = this.scrollElement.scrollLeft;\n    this.scrollElement.style.setProperty(\"scroll-behavior\", \"auto\");\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n\n    this.dragging = true;\n\n    if (this.preventAutoplayStop) {\n      this.autoplayDisabledByDrag = true;\n    } else {\n      this.autoplay = false;\n    }\n\n    window.addEventListener(\"mousemove\", this.mouseMove);\n    window.addEventListener(\"mouseup\", this.stopDragging, { capture: true });\n    window.addEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  /** User stopped dragging */\n  private stopDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distanceQuickSwipe;\n    const direction = (this.lastX > this.startX) ? 1 : -1;\n\n    this.dragging = false;\n    this.autoplayDisabledByDrag = false;\n\n    const endDraddingLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    const finalLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n    this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: \"auto\" });\n\n    if (finalLeft !== this.startScrollLeft || !minimumReached) {\n      this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? \"auto\" : \"smooth\" });\n    } else if (direction === 1) {\n      this.slideToPrevious();\n    } else {\n      this.slideToNext();\n    }\n\n    window.removeEventListener(\"mousemove\", this.mouseMove);\n    window.removeEventListener(\"mouseup\", this.stopDragging, { capture: true });\n\n    this.stoppedDragging = true;\n  }\n\n  private checkClick = (event: MouseEvent) => {\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distancePreventClick;\n\n    if (minimumReached) {\n      event.preventDefault();\n    }\n\n    this.lastX = null;\n\n    window.removeEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  private autoplayInterval = () => {\n    this.scrolledByAutoplay = true;\n\n    if (this.hasReachedLastSlide()) {\n      this.slideTo(0);\n    } else {\n      this.slideToNext();\n    }\n  }\n\n  async componentWillLoad() {\n    this.carouselId = `stzh-carousel-${carouselCounter++}`;\n    this.onMediaChange();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"carousel\");\n    }\n  }\n\n  componentDidLoad() {\n    this.itemSize = this.sizingMethod();\n    this.update();\n\n    this.disabledWatcher();\n    this.preventMouseDragWatcher();\n    this.autoplayRunningWatcher();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.onMediaChange);\n\n    this.resizeObserver = new ResizeObserver(this.onSlideResize)\n    this.resizeObserver.observe(this.element)\n\n    this.mutationObserver = new MutationObserver(this.onMutation);\n    this.mutationObserver.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = null;\n    this.disabled = true;\n\n    removeMediaChangeListener(this.onMediaChange);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-carousel\": true,\n      \"stzh-carousel--is-disabled\": this.disabled,\n      \"stzh-carousel--is-draggable\": !this.preventMouseDrag,\n      \"stzh-carousel--is-non-interactive\": this.nonInteractive,\n      \"stzh-carousel--is-dragging\": this.dragging,\n      \"stzh-carousel--is-scrolling\": this.scrolling,\n      \"stzh-carousel--has-autoplay\": this.autoplay,\n      \"stzh-carousel--is-autoplay-running\": this.autoplayRunning,\n    };\n\n    return (\n      <Host\n        aria-roledescription=\"carousel\"\n        style={{\n          '--slides': this.currentSlides.toString()\n        }}\n      >\n        <div class={classes}>\n          <slot name=\"actions\"></slot>\n          <div\n            class=\"stzh-carousel__vhidden\"\n            aria-live={this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? \"polite\" : \"off\"}\n          >\n            {this.ariaLive}\n          </div>\n          <div\n            ref={(el) => (this.scrollElement = el as HTMLDivElement)}\n            id={`${this.carouselId}-scroll`}\n            class=\"stzh-carousel__scroll\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}