@oiz/stzh-components 2.10.0-beta → 2.10.0

package/dist/esm/stzh-badge_3.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":"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","names":[],"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"],"version":3}

package/dist/esm/stzh-carousel.entry.js

@@ -3,7 +3,7 @@ import { i as isStzhElement } from './utils-107fad0f.js';
 import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils-ee5a59fa.js';
 import './string-utils-e252977e.js';
 
-const stzhCarouselCss = ".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}}[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 .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}.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))}.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}";
+const stzhCarouselCss = ".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 reducedMotionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
 let carouselCounter = 0;
@@ -33,13 +33,17 @@ const StzhCarousel = class {
       this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;
     };
     this.onMouseenter = () => {
-      this.autoplayDisabledByMouse = true;
+      if (!this.preventAutoplayPause) {
+        this.autoplayDisabledByMouse = true;
+      }
     };
     this.onMouseleave = () => {
       this.autoplayDisabledByMouse = false;
     };
     this.onFocusin = () => {
-      this.autoplayDisabledByFocus = true;
+      if (!this.preventAutoplayPause) {
+        this.autoplayDisabledByFocus = true;
+      }
     };
     this.onFocusout = () => {
       this.autoplayDisabledByFocus = false;
@@ -76,7 +80,12 @@ const StzhCarousel = class {
         const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;
         this.scrolling = true;
         if (!this.scrolledByAutoplay) {
-          this.autoplay = false;
+          if (this.preventAutoplayStop) {
+            this.autoplayDisabledByScroll = true;
+          }
+          else {
+            this.autoplay = false;
+          }
         }
         this.stzhSlideStart.emit({
           component: "stzh-carousel",
@@ -98,6 +107,7 @@ const StzhCarousel = class {
       this.update();
       this.scrolling = false;
       this.scrolledByAutoplay = false;
+      this.autoplayDisabledByScroll = false;
       if (this.stoppedDragging) {
         this.stoppedDragging = false;
         this.scrollElement.style.removeProperty("scroll-behavior");
@@ -166,7 +176,12 @@ const StzhCarousel = class {
       this.scrollElement.style.setProperty("scroll-behavior", "auto");
       this.scrollElement.style.setProperty("scroll-snap-type", "unset");
       this.dragging = true;
-      this.autoplay = false;
+      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 });
@@ -178,6 +193,7 @@ const StzhCarousel = class {
       const minimumReached = distance > this.distanceQuickSwipe;
       const direction = (this.lastX > this.startX) ? 1 : -1;
       this.dragging = false;
+      this.autoplayDisabledByDrag = false;
       const endDraddingLeft = this.scrollElement.scrollLeft;
       this.scrollElement.style.removeProperty("scroll-snap-type");
       const finalLeft = this.scrollElement.scrollLeft;
@@ -217,6 +233,7 @@ const StzhCarousel = class {
     this.localization = undefined;
     this.variant = "default";
     this.disabled = false;
+    this.noPeek = false;
     this.slides = 1;
     this.slidesSmall = 0;
     this.slidesMedium = 0;
@@ -224,16 +241,21 @@ const StzhCarousel = class {
     this.slidesUltra = 0;
     this.slide = 0;
     this.autoplay = false;
-    this.tabThrough = false;
+    this.autoplayTimeout = 3000;
+    this.nonInteractive = false;
     this.preventMouseDrag = false;
+    this.preventAutoplayPause = false;
+    this.preventAutoplayStop = false;
+    this.tabThrough = false;
     this.scrollTimeout = 100;
-    this.autoplayTimeout = 3000;
     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 = "";
@@ -293,7 +315,9 @@ const StzhCarousel = class {
       || this.disabled
       || this.autoplayDisabledByMotionMedia
       || this.autoplayDisabledByMouse
-      || this.autoplayDisabledByFocus) {
+      || this.autoplayDisabledByFocus
+      || this.autoplayDisabledByScroll
+      || this.autoplayDisabledByDrag) {
       this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);
       this.autoplayIntervalId = null;
       this.autoplayRunning = false;
@@ -481,13 +505,11 @@ const StzhCarousel = class {
       "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,
-      "stzh-carousel--is-autoplay-disabled-by-motion-media": this.autoplayDisabledByMotionMedia,
-      "stzh-carousel--is-autoplay-disabled-by-mouse": this.autoplayDisabledByMouse,
-      "stzh-carousel--is-autoplay-disabled-by-focus": this.autoplayDisabledByFocus
     };
     return (h(Host, { "aria-roledescription": "carousel", style: {
         '--slides': this.currentSlides.toString()
@@ -501,6 +523,8 @@ const StzhCarousel = class {
     "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
     "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
     "autoplayDisabledByFocus": ["autoplayRunningWatcher"],
+    "autoplayDisabledByScroll": ["autoplayRunningWatcher"],
+    "autoplayDisabledByDrag": ["autoplayRunningWatcher"],
     "autoplayTimeout": ["autoplayRunningWatcher"],
     "slideElements": ["snapAlignWatcher", "inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
     "currentSwipeSlides": ["snapAlignWatcher"],

package/dist/esm/stzh-carousel.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-carousel.entry.js","mappings":"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","names":[],"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: Peek size showing the slides\n * @prop --peek-out: Negative peek size (breakout of container) showing the 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  &[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  ::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  &[variant=\"cards\"] ::slotted([slot=\"actions\"]) {\n    position: relative;\n    order: 1;\n    margin-top: calc(#{space('medium')} - var(--padding-bottom));\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","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  /** 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  /**\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  /** Whether drag with mouse should be disabled */\n  @State() preventMouseDrag = false;\n\n  /** Timeout delay in milliseconds used to catch the end of scroll events */\n  @State() scrollTimeout: number = 100;\n\n  /** Timeout delay in milliseconds used for autoplay */\n  @State() autoplayTimeout: number = 3000;\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(\"autoplayTimeout\")\n  @Watch(\"disabled\")\n  autoplayRunningWatcher() {\n    if (\n      !this.autoplay\n      || this.disabled\n      || this.autoplayDisabledByMotionMedia\n      || this.autoplayDisabledByMouse\n      || this.autoplayDisabledByFocus\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 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    this.autoplayDisabledByMouse = true;\n  }\n\n  private onMouseleave = () => {\n    this.autoplayDisabledByMouse = false;\n  }\n\n  private onFocusin = () => {\n    this.autoplayDisabledByFocus = true;\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        this.autoplay = false;\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\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    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    this.autoplay = false;\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\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-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      \"stzh-carousel--is-autoplay-disabled-by-motion-media\": this.autoplayDisabledByMotionMedia,\n      \"stzh-carousel--is-autoplay-disabled-by-mouse\": this.autoplayDisabledByMouse,\n      \"stzh-carousel--is-autoplay-disabled-by-focus\": this.autoplayDisabledByFocus\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"],"version":3}
+{"file":"stzh-carousel.entry.js","mappings":"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","names":[],"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"],"version":3}