@oiz/stzh-components 2.6.0-beta → 2.6.0

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

@@ -1 +1 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_1","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","iconId","role","a11yTitle","focusable","id"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n",":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  --border-radius: #{$buttonBorderRadius};\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-bottom: #{space('medium')};\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    position: var(--floating-position);\n    bottom: var(--floating-bottom);\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    --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    --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: pointer;\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\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  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\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","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 { fetchTranslations, 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 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,\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}\n            aria-describedby={this.a11yDescribedby}\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}\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}\n                aria-describedby={this.a11yDescribedby}\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}\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}\n              aria-describedby={this.a11yDescribedby}\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}\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",":host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhBadgeCss","StzhBadge","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_1","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","iconId","role","a11yTitle","focusable","id"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n",":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  --border-radius: #{$buttonBorderRadius};\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-bottom: #{space('medium')};\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    position: var(--floating-position);\n    bottom: var(--floating-bottom);\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: pointer;\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\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  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\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","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 { fetchTranslations, 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 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}\n            aria-describedby={this.a11yDescribedby}\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}\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}\n                aria-describedby={this.a11yDescribedby}\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}\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}\n              aria-describedby={this.a11yDescribedby}\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}\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",":host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","this","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","componentWillLoad","inputId","concat","error","localization","_a","fetchTranslations","_b","sent","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-checkbox {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 1px solid $formBorderColor;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: $colorPrimary;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey70;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\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-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkbox');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-checkbox\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","this","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","componentWillLoad","inputId","concat","error","localization","_a","fetchTranslations","_b","sent","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-checkbox {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 1px solid $formBorderColor;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: $colorPrimary;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey70;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\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-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkbox');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-checkbox\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qhEAAA,IAAMA,gBAAkB,i2OCyBxB,IAAIC,gBAAkB,E,IAaTC,aAAY,W,+LAiFfC,KAAAC,eAA0B,MAE1BD,KAAAE,QAAU,SAACC,GACjBC,EAAKC,QAAUD,EAAKE,MAAMD,QAC1BD,EAAKG,WAAWC,KAAK,CACnBC,UAAW,gBACXC,cAAeP,EACfQ,MAAOP,EAAKO,MACZN,QAASD,EAAKC,S,EAIVL,KAAAY,YAAc,WACpB,IAAKR,EAAKH,eAAgB,CACxBG,EAAKS,U,CAGPT,EAAKH,eAAiB,K,EAGhBD,KAAAc,QAAU,SAACX,GACjBC,EAAKH,eAAiB,KAEtB,IAAMc,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdhB,EAAKiB,QAAQC,cAAcP,GAC3BX,EAAKmB,UAAUf,KAAK,CAClBC,UAAW,gBACXC,cAAeP,G,EAIXH,KAAAwB,OAAS,SAACrB,GAChB,IAAMsB,EAAY,IAAIT,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdhB,EAAKiB,QAAQC,cAAcG,GAC3BrB,EAAKsB,SAASlB,KAAK,CACjBC,UAAW,gBACXC,cAAeP,G,4CA1H0B,M,UAGL,G,WAGC,G,aAGG,M,cAGC,M,aAGc,M,WAGnC,G,0EASuB,M,0CAOoB,E,CAI7DwB,EAAAC,UAAAf,SAAN,W,qFACEb,KAAKM,MAAMuB,Q,iBAabF,EAAAC,UAAAE,aAAA,SAAaC,GACX,UAAWA,IAAa,SAAU,CAChC,IACE/B,KAAKgC,OAASC,KAAKC,MAAMH,E,CACzB,MAAOI,GACP,GAAIJ,EAAU,CACZ/B,KAAKgC,OAAS,CAACD,E,KACV,CACL/B,KAAKgC,OAAS,E,QAGb,GAAID,EAAU,CACnB/B,KAAKgC,OAASD,C,KACT,CACL/B,KAAKgC,OAAS,E,CAGhBhC,KAAKoC,QAAUpC,KAAKgC,OAAOK,OAAS,C,EAyDhCV,EAAAC,UAAAU,kBAAN,W,kHACEtC,KAAKuC,QAAU,iBAAAC,OAAiB1C,mBAChCE,KAAK8B,aAAa9B,KAAKyC,O,KAElBzC,KAAK0C,aAAN,YACFC,EAAA3C,KAAoB,SAAM4C,kBAAkB5C,KAAKqB,QAAS,a,OAA1DsB,EAAKD,aAAeG,EAAAC,O,mCAIxBnB,EAAAC,UAAAmB,OAAA,eAAA3C,EAAAJ,KACE,IAAMgD,EAAkBC,QAAQjD,KAAKqB,QAAS,kBAAoBrB,KAAKkD,YACvE,IAAMC,EAAsBF,QAAQjD,KAAKqB,QAAS,uBAAyBrB,KAAKoD,gBAChF,IAAMC,EAAYJ,QAAQjD,KAAKqB,QAAS,YAAcrB,KAAKyC,MAE3D,IAAMa,EAAU,CACd,gBAAiB,KACjB,iCAAkCN,EAClC,sCAAuCG,EACvC,2BAA4BE,EAC5B,6BAA8BrD,KAAKuD,SACnC,4BAA6BvD,KAAKoC,QAClC,6BAA8BpC,KAAKwD,UAGrC,OACEC,EAACC,KAAI,CAACC,SAAU3D,KAAKwD,SAAW,KAAO,KAAM1C,QAASd,KAAKY,aACzD6C,EAAA,OAAKG,MAAON,GACVG,EAAA,SAAOG,MAAM,gCACXH,EAAA,SACEG,MAAM,uBACNC,IAAK,SAACC,GAAE,OAAM1D,EAAKE,MAAQwD,CAAnB,EACRC,KAAK,WACLC,GAAIhE,KAAKuC,QACT0B,KAAMjE,KAAKiE,KACXtD,MAAOX,KAAKW,MACZ6C,SAAUxD,KAAKwD,SAAQ,mBACL,GAAAhB,OAAGxC,KAAKuC,QAAO,iBAAAC,OAAgBxC,KAAKkE,iBAAiB,gBACxDlE,KAAKuD,SAAW,OAAS,QAAO,eACjCvD,KAAKoC,QAAU,OAAS,QACtC/B,QAASL,KAAKK,QACdH,QAASF,KAAKE,QACdY,QAASd,KAAKc,QACdU,OAAQxB,KAAKwB,SAEfiC,EAAA,OAAKG,MAAM,uBACTH,EAAA,OAAKG,MAAM,uBAAuBO,UAAWC,SAE/CX,EAAA,OAAKG,MAAM,wBACR5D,KAAKqE,MAAQrE,KAAKqE,MAAQZ,EAAA,aAC1BzD,KAAKsE,YACJb,EAAA,QAAMG,MAAM,yBACVH,EAAA,QAAMG,MAAM,+BAA8B,cAAa,QACpD5D,KAAKuD,SACFvD,KAAK0C,aAAa6B,SAASC,oBAC3BxE,KAAK0C,aAAa6B,SAASE,qBAGjChB,EAAA,QAAMG,MAAM,8BACT5D,KAAKuD,SACFvD,KAAK0C,aAAa6B,SAASG,kBAC3B1E,KAAK0C,aAAa6B,SAASI,sBAOzClB,EAACmB,qBAAoB,CACnBC,YAAY,gBACZb,GAAI,GAAAxB,OAAGxC,KAAKuC,QAAO,gBACnBE,MAAOzC,KAAKgC,OACZkB,YAAalD,KAAKkD,YAClBE,gBAAiBpD,KAAKoD,gBACtBD,oBAAqBA,EACrB2B,oBAAqB9E,KAAK0C,aAAa6B,SAASO,uB,6PA7MnC,G"}

package/dist/esm-es5/stzh-checkboxgroup.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCheckboxgroupCss","checkboxgroupCounter","StzhCheckboxgroup","this","_value","_preventUpdateProperties","init","_this","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","concat","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","class_1","prototype","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","componentWillLoad","error","preventUpdateProperties","localization","_a","fetchTranslations","_b","sent","componentShouldUpdate","_newValue","_oldValue","componentDidRender","connectedCallback","map","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","hideLegend","direction","h","class","legend","StzhInputDescription","classPrefix","id","moreInfoButtonLabel","$globals"],"sources":["src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host([direction=\"vertical\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-checkboxgroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input checkbox elements */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a checkbox by value */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _value: string[] = [];\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateCheckboxesProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"showMarker\")\n  watchShowMarker(newValue: boolean) {\n    this.updateCheckboxesProperty(\"showMarker\", newValue)\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n    if (event.detail.checked) {\n      this._value.push(event.detail.value);\n    } else {\n      this._value = this._value.filter(value => value !== event.detail.value);\n    }\n\n    this.value = this._value;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private init = () => {\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchShowMarker(this.showMarker);\n  }\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkboxgroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-checkboxgroup__legend\">\n            {this.legend}\n          </legend>\n        }\n        <div class=\"stzh-checkboxgroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-checkboxgroup\"\n          id={`${this.checkboxgroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"4wDAAA,IAAMA,qBAAuB,q0ICiB7B,IAAIC,qBAAuB,E,IAadC,kBAAiB,W,kDAwBpBC,KAAAC,OAAmB,GAoBnBD,KAAAE,yBAAqC,GA+FrCF,KAAAG,KAAO,WACbC,EAAKC,WAAaC,MAAMC,KAAKH,EAAKI,QAAQC,iBAAiB,kBAC3DL,EAAKM,yBAAyB,mBAAoB,GAAAC,OAAGP,EAAKQ,gBAAe,iBAEzER,EAAKS,WAAWT,EAAKU,OACrBV,EAAKW,UAAUX,EAAKY,MACpBZ,EAAKa,cAAcb,EAAKc,UACxBd,EAAKe,aAAaf,EAAKgB,SACvBhB,EAAKiB,gBAAgBjB,EAAKkB,W,4CA9IiB,M,0DASE,M,aAGH,M,gBAGG,M,WAGK,G,eAIY,W,oGAaJ,K,6BAGP,E,CAOrDC,EAAAC,UAAAT,UAAA,SAAUU,GACRzB,KAAKU,yBAAyB,OAAQe,E,EAIxCF,EAAAC,UAAAP,cAAA,SAAcQ,GACZzB,KAAKU,yBAAyB,WAAYe,E,EAI5CF,EAAAC,UAAAL,aAAA,SAAaM,GACXzB,KAAKU,yBAAyB,UAAWe,E,EAI3CF,EAAAC,UAAAH,gBAAA,SAAgBI,GACdzB,KAAKU,yBAAyB,aAAce,E,EAI9CF,EAAAC,UAAAX,WAAA,SAAWY,GACT,UAAWA,IAAa,SAAU,CAChCzB,KAAKC,OAASyB,KAAKC,MAAMF,E,KACpB,CACLzB,KAAKC,OAASwB,C,CAGhBzB,KAAK4B,6BAA6B5B,KAAKC,O,EAIzCsB,EAAAC,UAAAK,aAAA,SAAaJ,GACX,UAAWA,IAAa,SAAU,CAChC,IACEzB,KAAK8B,OAASJ,KAAKC,MAAMF,E,CACzB,MAAOM,GACP,GAAIN,EAAU,CACZzB,KAAK8B,OAAS,CAACL,E,KACV,CACLzB,KAAK8B,OAAS,E,QAGb,GAAIL,EAAU,CACnBzB,KAAK8B,OAASL,C,KACT,CACLzB,KAAK8B,OAAS,E,CAGhB9B,KAAKoB,QAAUpB,KAAK8B,OAAOE,OAAS,C,EAItCT,EAAAC,UAAAS,+BAAA,SAA+BR,GAC7B,UAAWA,IAAa,SAAU,CAChCzB,KAAKE,yBAA2BwB,KAAKC,MAAMF,E,KACtC,CACLzB,KAAKE,yBAA2BuB,C,GAKpCF,EAAAC,UAAAU,SAAA,SAASC,GACP,GAAIA,EAAMC,OAAOC,QAAS,CACxBrC,KAAKC,OAAOqC,KAAKH,EAAMC,OAAOtB,M,KACzB,CACLd,KAAKC,OAASD,KAAKC,OAAOsC,QAAO,SAAAzB,GAAS,OAAAA,IAAUqB,EAAMC,OAAOtB,KAAvB,G,CAG5Cd,KAAKc,MAAQd,KAAKC,M,EAQZsB,EAAAC,UAAAd,yBAAA,SAAyB8B,EAAc1B,GAAvC,IAAAV,EAAAJ,KACNA,KAAKK,WAAWoC,SAAQ,SAACC,GACvB,GAAIF,IAAS,QAAWpC,EAAKF,yBAAyByC,QAAQH,MAAW,EAAI,CAC3EE,EAASE,UAAUJ,IAAS1B,C,MAK1BS,EAAAC,UAAAI,6BAAA,SAA6Bd,GACnCd,KAAK6C,gBAAkB7C,KAAKK,WAAWkC,QAAO,SAAAG,GAAY,OAAA5B,EAAM6B,QAAQD,EAAS5B,QAAU,CAAjC,IAC1Dd,KAAKK,WAAWoC,SAAQ,SAAAC,GAAY,OAAAA,EAASL,QAAUvB,EAAM6B,QAAQD,EAAS5B,QAAU,CAApD,G,EAchCS,EAAAC,UAAAsB,kBAAN,W,kHACE9C,KAAKY,gBAAkB,sBAAAD,OAAsBb,wBAC7CE,KAAK6B,aAAa7B,KAAK+C,OACvB/C,KAAKiC,+BAA+BjC,KAAKgD,yB,KAEpChD,KAAKiD,aAAN,YACFC,EAAAlD,KAAoB,SAAMmD,kBAAkBnD,KAAKQ,QAAS,kB,OAA1D0C,EAAKD,aAAeG,EAAAC,O,mCAIxB9B,EAAAC,UAAA8B,sBAAA,SAAsBC,EAAWC,EAAWhB,GAC1C,OAAOA,IAAS,iB,EAGlBjB,EAAAC,UAAAiC,mBAAA,WACEzD,KAAKG,M,EAGPoB,EAAAC,UAAAkC,kBAAA,WACE,IAAK1D,KAAKc,MAAMkB,OAAQ,CACtBhC,KAAKK,WAAaC,MAAMC,KAAKP,KAAKQ,QAAQC,iBAAiB,kBAG3DT,KAAKc,MAAQd,KAAKK,WACfkC,QAAO,SAAAG,GAAY,OAAAA,EAASL,OAAT,IACnBsB,KAAI,SAAAjB,GAAY,OAAAA,EAAS5B,KAAT,G,CAGrBd,KAAK4D,SAAW,IAAIC,iBAAiB7D,KAAKG,MAC1CH,KAAK4D,SAASE,QAAQ9D,KAAKQ,QAAS,CAClCuD,UAAW,KACXC,QAAS,M,EAIbzC,EAAAC,UAAAyC,qBAAA,WACE,GAAIjE,KAAK4D,SAAU,CACjB5D,KAAK4D,SAASM,Y,GAIlB3C,EAAAC,UAAA2C,OAAA,W,MACE,IAAMC,EAAkBC,QAAQrE,KAAKQ,QAAS,kBAAoBR,KAAKsE,YACvE,IAAMC,EAAsBF,QAAQrE,KAAKQ,QAAS,uBAAyBR,KAAKwE,gBAChF,IAAMC,EAAYJ,QAAQrE,KAAKQ,QAAS,YAAcR,KAAK+C,MAE3D,IAAM2B,GAAOxB,EAAA,CACX,qBAAsB,KACtB,sCAAuCkB,EACvC,2CAA4CG,EAC5C,gCAAiCE,EACjC,kCAAmCzE,KAAKkB,SACxC,iCAAkClB,KAAKoB,QACvC,kCAAmCpB,KAAK2E,YACxCzB,EAAC,iCAAAvC,OAAiCX,KAAK4E,cAAgB5E,KAAK4E,U,GAG9D,OACEC,EAAA,YAAUC,MAAOJ,GACd1E,KAAK+E,QACJF,EAAA,UAAQC,MAAM,8BACX9E,KAAK+E,QAGVF,EAAA,OAAKC,MAAM,8BACTD,EAAA,cAEFA,EAACG,qBAAoB,CACnBC,YAAY,qBACZC,GAAI,GAAAvE,OAAGX,KAAKY,gBAAe,gBAC3BmC,MAAO/C,KAAK8B,OACZwC,YAAatE,KAAKsE,YAClBE,gBAAiBxE,KAAKwE,gBACtBD,oBAAqBA,EACrBY,oBAAqBnF,KAAKiD,aAAamC,SAASD,sB,mbAhO5B,G"}
+{"version":3,"names":["stzhCheckboxgroupCss","checkboxgroupCounter","StzhCheckboxgroup","this","_value","_preventUpdateProperties","init","_this","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","concat","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","class_1","prototype","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","componentWillLoad","error","preventUpdateProperties","localization","_a","fetchTranslations","_b","sent","componentShouldUpdate","_newValue","_oldValue","componentDidRender","connectedCallback","map","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","hideLegend","direction","h","class","legend","StzhInputDescription","classPrefix","id","moreInfoButtonLabel","$globals"],"sources":["src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host([direction=\"vertical\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-checkboxgroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input checkbox elements */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a checkbox by value */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _value: string[] = [];\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateCheckboxesProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"showMarker\")\n  watchShowMarker(newValue: boolean) {\n    this.updateCheckboxesProperty(\"showMarker\", newValue)\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n    if (event.detail.checked) {\n      this._value.push(event.detail.value);\n    } else {\n      this._value = this._value.filter(value => value !== event.detail.value);\n    }\n\n    this.value = this._value;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private init = () => {\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchShowMarker(this.showMarker);\n  }\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkboxgroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-checkboxgroup__legend\">\n            {this.legend}\n          </legend>\n        }\n        <div class=\"stzh-checkboxgroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-checkboxgroup\"\n          id={`${this.checkboxgroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-components.js

@@ -1,2 +1,2 @@
-import{d as doc,N as NAMESPACE,p as promiseResolve,H,b as bootstrapLazy}from"./index-67fd55c9.js";export{s as setNonce}from"./index-67fd55c9.js";import{g as globalScripts}from"./app-globals-0c7feedc.js";var patchBrowser=function(){{patchCloneNodeFix(H.prototype)}var e=Array.from(doc.querySelectorAll("script")).find((function(e){return new RegExp("/".concat(NAMESPACE,"(\\.esm)?\\.js($|\\?|#)")).test(e.src)||e.getAttribute("data-stencil-namespace")===NAMESPACE}));var t=import.meta.url;var a=(e||{})["data-opts"]||{};if(t!==""){a.resourcesUrl=new URL(".",t).href}return promiseResolve(a)};var patchCloneNodeFix=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var a=t.call(this,false);var i=this.childNodes;if(e){for(var s=0;s<i.length;s++){if(i[s].nodeType!==2){a.appendChild(i[s].cloneNode(true))}}}return a}};patchBrowser().then((function(e){globalScripts();return bootstrapLazy(JSON.parse('[["stzh-microsite-teaserlist",[[2,"stzh-microsite-teaserlist",{"localization":[16],"api":[1],"tags":[1],"stepItems":[2,"step-items"],"showItems":[32],"activeFilter":[32]}]]],["stzh-appointments",[[2,"stzh-appointments",{"localization":[16],"sortBy":[1025,"sort-by"],"appointments":[1],"currentDate":[1025,"current-date"],"value":[1025],"name":[513],"showItems":[1026,"show-items"],"stepItems":[2,"step-items"],"calendarTitle":[1,"calendar-title"],"appointmentsTitle":[1,"appointments-title"],"dateAdapter":[16]}]]],["stzh-datamessagelist-item",[[2,"stzh-datamessagelist-item",{"localization":[16],"heading":[1],"unread":[4],"href":[1],"rel":[1],"target":[1],"description":[1],"icon":[1],"loadingStatus":[1,"loading-status"],"meta":[1],"actions":[1],"tags":[1],"analyticsId":[1,"analytics-id"],"external":[32]}]]],["stzh-contact",[[6,"stzh-contact",{"type":[1],"heading":[1],"mainHeading":[1,"main-heading"],"name":[1],"street":[1],"streetInfo":[1,"street-info"],"postalCode":[1,"postal-code"],"location":[1],"numbers":[1],"poBoxHeading":[1,"po-box-heading"],"poboxTitle":[1,"pobox-title"],"poboxPostalCode":[1,"pobox-postal-code"],"poboxLocation":[1,"pobox-location"],"availabilityTitle":[1,"availability-title"],"availability":[1],"withBorder":[4,"with-border"]}]]],["stzh-sitemap",[[0,"stzh-sitemap",{"items":[1]}]]],["stzh-amount",[[4,"stzh-amount",{"minValue":[514,"min-value"],"maxValue":[514,"max-value"],"minValueDropdown":[514,"min-value-dropdown"],"maxValueDropdown":[514,"max-value-dropdown"],"value":[513],"step":[514],"name":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"invalid":[516],"required":[516],"clearable":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"localization":[16]}]]],["stzh-datatable",[[4,"stzh-datatable",{"localization":[16],"label":[1],"sortBy":[1025,"sort-by"],"sortDirection":[1025,"sort-direction"],"tokenize":[1],"idField":[1,"id-field"],"disableMinWidth":[516,"disable-min-width"],"rows":[1],"columns":[1],"query":[32],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32],"toggleSort":[64]}]]],["stzh-saptcha",[[2,"stzh-saptcha",{"localization":[16],"numbers":[1],"value":[1],"name":[513],"error":[1],"invalid":[516],"disabled":[516]}]]],["stzh-vbz-majorticker",[[2,"stzh-vbz-majorticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16],"ghettoboxCloseTimeKey":[1,"ghettobox-close-time-key"],"ghettoboxShown":[32],"getGhettoboxShown":[64],"getDisturbance":[64]}]]],["stzh-vbz-ticker",[[6,"stzh-vbz-ticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16]}]]],["stzh-anchornav",[[2,"stzh-anchornav",{"columns":[514],"columnsSmall":[514,"columns-small"],"columnsMedium":[514,"columns-medium"],"columnsLarge":[514,"columns-large"],"columnsUltra":[514,"columns-ultra"],"items":[1],"withBorder":[516,"with-border"]}]]],["stzh-audio",[[6,"stzh-audio",{"localization":[16],"src":[1],"preload":[1],"transcript":[1],"transcriptShown":[1028,"transcript-shown"],"downloadAnalyticsId":[1,"download-analytics-id"],"transcriptAnalyticsId":[1,"transcript-analytics-id"],"play":[64],"pause":[64]}]]],["stzh-upload",[[4,"stzh-upload",{"existingFiles":[1,"existing-files"],"label":[1],"description":[1],"button":[1],"url":[1],"method":[1],"withCredentials":[4,"with-credentials"],"disabled":[516],"invalid":[516],"downloadDisabled":[4,"download-disabled"],"error":[1],"acceptedFiles":[1,"accepted-files"],"autoProcessQueue":[4,"auto-process-queue"],"maxFiles":[2,"max-files"],"maxFilesize":[2,"max-filesize"],"parallelUploads":[2,"parallel-uploads"],"uploadMultiple":[4,"upload-multiple"],"chunking":[4],"forceChunking":[4,"force-chunking"],"chunkSize":[2,"chunk-size"],"parallelChunkUploads":[4,"parallel-chunk-uploads"],"retryChunks":[4,"retry-chunks"],"retryChunksLimit":[2,"retry-chunks-limit"],"filesizeBase":[2,"filesize-base"],"headers":[16],"defaultHeaders":[4,"default-headers"],"accept":[16],"chunksUploaded":[16],"hiddenInputContainer":[1,"hidden-input-container"],"localization":[16],"processQueue":[64]}]]],["stzh-footer",[[4,"stzh-footer",{"localization":[16],"copyright":[1],"variant":[1],"mainUrl":[1,"main-url"],"withBorder":[4,"with-border"]}]]],["stzh-langnav",[[2,"stzh-langnav",{"languageActive":[1,"language-active"],"languages":[1],"popoverPlacement":[513,"popover-placement"],"preventUrlchange":[4,"prevent-urlchange"]}]]],["stzh-message",[[6,"stzh-message",{"label":[1],"description":[1],"closeKey":[1,"close-key"],"type":[513],"hideClose":[4,"hide-close"],"localization":[16],"open":[32],"show":[64],"hide":[64]}]]],["stzh-pagebottom",[[6,"stzh-pagebottom",{"shareTitle":[1,"share-title"],"shareUrl":[1,"share-url"],"shareServices":[1,"share-services"],"shareDisabled":[4,"share-disabled"],"logoHref":[1,"logo-href"],"logoAnalyticsId":[1,"logo-analytics-id"],"withBorder":[4,"with-border"]}]]],["stzh-accordion-item",[[6,"stzh-accordion-item",{"open":[1540],"disabled":[516],"heading":[1],"subtitle":[1],"description":[1],"icon":[1],"badge":[1],"badgeEmpty":[516,"badge-empty"],"badgeType":[513,"badge-type"],"headingLevel":[513,"heading-level"],"analyticsId":[1,"analytics-id"],"show":[64],"hide":[64],"toggle":[64],"setFocus":[64]}]]],["stzh-checkbox",[[6,"stzh-checkbox",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"showMarker":[516,"show-marker"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["stzh-checkboxgroup",[[6,"stzh-checkboxgroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedCheckbox":[16],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["stzh-dialog",[[6,"stzh-dialog",{"localization":[16],"closeOnEscapeKey":[4,"close-on-escape-key"],"closeOnBackdropClick":[4,"close-on-backdrop-click"],"open":[1028],"stay":[4],"size":[513],"hideClose":[4,"hide-close"],"heading":[1],"a11yRole":[1,"a11y-role"],"a11yLabel":[1,"a11y-label"],"closeAnalyticsId":[1,"close-analytics-id"],"show":[64],"hide":[64]},[[6,"click","handleOutsideClick"],[4,"keydown","handleKeydown"],[4,"click","handleOpenTriggerClick"]]]]],["stzh-progressbar",[[2,"stzh-progressbar",{"localization":[16],"data":[1],"index":[2],"steps":[2],"stepsSmall":[2,"steps-small"],"stepsMedium":[2,"steps-medium"],"stepsLarge":[2,"steps-large"],"stepsUltra":[2,"steps-ultra"],"currentSteps":[32]}]]],["stzh-toggle",[[6,"stzh-toggle",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"labelPosition":[513,"label-position"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["stzh-fieldset",[[6,"stzh-fieldset",{"legend":[1],"hideLegend":[4,"hide-legend"],"legendLevel":[1,"legend-level"],"legendCurve":[1,"legend-curve"]}]]],["stzh-olmap",[[0,"stzh-olmap",{"localization":[16],"hostname":[1],"scaleControl":[4,"scale-control"],"layerControl":[4,"layer-control"],"printControl":[4,"print-control"],"locationControl":[4,"location-control"],"layer":[1025],"zoom":[2],"zoomLocation":[2,"zoom-location"],"center":[16],"centerMarker":[4,"center-marker"],"resolutions":[16],"layers":[1],"getMap":[64],"addIconMarker":[64],"removeIconMarker":[64],"setIconMarkerActive":[64],"setIconMarkerInactive":[64],"enableLocationTracking":[64],"disableLocationTracking":[64],"getDistance":[64]},[[8,"load","handleLoad"],[8,"deviceorientation","handleLoad"],[8,"pageshow","handleLoad"]]]]],["stzh-accordion",[[6,"stzh-accordion",{"collapsible":[4],"multiselectable":[4],"setItemFocus":[64]},[[0,"stzhOpen","openListener"]]]]],["stzh-actions",[[6,"stzh-actions",{"variant":[513],"withBorder":[516,"with-border"]}]]],["stzh-appnav",[[6,"stzh-appnav",{"appTitle":[1,"app-title"],"appStatus":[1,"app-status"],"appHref":[1,"app-href"],"appAnalyticsId":[1,"app-analytics-id"]}]]],["stzh-buttongroup",[[6,"stzh-buttongroup"]]],["stzh-carousel",[[6,"stzh-carousel",{"localization":[16],"variant":[513],"disabled":[516],"slides":[2],"slidesSmall":[2,"slides-small"],"slidesMedium":[2,"slides-medium"],"slidesLarge":[2,"slides-large"],"slidesUltra":[2,"slides-ultra"],"slide":[2],"autoplay":[1028],"tabThrough":[4,"tab-through"],"preventMouseDrag":[32],"scrollTimeout":[32],"autoplayTimeout":[32],"distanceQuickSwipe":[32],"distancePreventClick":[32],"autoplayRunning":[32],"autoplayDisabledByMotionMedia":[32],"autoplayDisabledByMouse":[32],"autoplayDisabledByFocus":[32],"dragging":[32],"scrolling":[32],"ariaLive":[32],"currentSlides":[32],"currentSwipeSlides":[32],"slideElements":[32],"previousElements":[32],"nextElements":[32],"navigationTextElements":[32],"slideTo":[64],"slideToPrevious":[64],"slideToNext":[64]}]]],["stzh-cell",[[1,"stzh-cell",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justifySelf":[513,"justify-self"],"alignSelf":[513,"align-self"]}]]],["stzh-chart",[[0,"stzh-chart",{"chartId":[1,"chart-id"],"create":[16]}]]],["stzh-container",[[6,"stzh-container"]]],["stzh-cspace",[[6,"stzh-cspace"]]],["stzh-datamessagelist",[[6,"stzh-datamessagelist"]]],["stzh-details",[[6,"stzh-details",{"open":[1540],"show":[64],"hide":[64],"toggle":[64]}]]],["stzh-figure",[[6,"stzh-figure",{"caption":[1],"copyright":[1],"fullwidth":[516]}]]],["stzh-flyingfocus",[[2,"stzh-flyingfocus",{"style":[32],"position":[32],"enabled":[32],"visible":[32],"helper":[32],"moving":[32],"reposition":[64]},[[4,"keydown","handleKeydown"],[5,"mousedown","handleMousedown"],[6,"focus","handleFocus"],[6,"stzhFocus","handleFocus"],[6,"blur","handleBlur"],[7,"scroll","handleScrollResize"],[11,"resize","handleScrollResize"]]]]],["stzh-header",[[6,"stzh-header",{"href":[1],"metabarStay":[4,"metabar-stay"],"stickyDisabled":[4,"sticky-disabled"],"preventAppnavPlaceholder":[4,"prevent-appnav-placeholder"],"logoAnalyticsId":[1,"logo-analytics-id"],"hideLogo":[32],"paddingTop":[32],"metabarTransform":[32],"sticky":[32],"stickyClosing":[32],"stickyMetabar":[32],"stickyMetabarEnd":[32],"updatePosition":[64]},[[9,"scroll","scrollListener"]]]]],["stzh-hr",[[2,"stzh-hr"]]],["stzh-hspace",[[1,"stzh-hspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-icon-sprite",[[0,"stzh-icon-sprite"]]],["stzh-invert",[[6,"stzh-invert"]]],["stzh-list",[[1,"stzh-list",{"variant":[513]}]]],["stzh-list-item",[[1,"stzh-list-item"]]],["stzh-loadingbar",[[2,"stzh-loadingbar",{"percent":[2],"hidePercent":[4,"hide-percent"],"label":[1]}]]],["stzh-metanav",[[6,"stzh-metanav"]]],["stzh-overlay",[[6,"stzh-overlay",{"open":[1028],"stay":[4],"a11yLabel":[1,"a11y-label"],"show":[64],"hide":[64]}]]],["stzh-page-skiplinks",[[6,"stzh-page-skiplinks"]]],["stzh-pagetitle",[[6,"stzh-pagetitle"]]],["stzh-pagetitle-hero",[[6,"stzh-pagetitle-hero",{"heading":[1],"leadAuthor":[1,"lead-author"],"subtitle":[1]}]]],["stzh-ratio",[[6,"stzh-ratio",{"ratio":[513],"portrait":[516],"fit":[513]}]]],["stzh-readspeaker",[[4,"stzh-readspeaker",{"href":[1],"eventId":[1,"event-id"]},[[8,"DOMContentLoaded","addClickEvents"],[8,"load","addClickEvents"]]]]],["stzh-row",[[1,"stzh-row",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justify":[513],"items":[513],"content":[513]}]]],["stzh-section",[[6,"stzh-section",{"variant":[1]}]]],["stzh-show",[[1,"stzh-show",{"mikro":[4],"small":[4],"medium":[4],"large":[4],"ultra":[4],"hideFromDate":[1,"hide-from-date"]}]]],["stzh-skin-portal-mitwirken",[[0,"stzh-skin-portal-mitwirken"]]],["stzh-skin-storybook-preview",[[0,"stzh-skin-storybook-preview"]]],["stzh-skiplink",[[6,"stzh-skiplink",{"label":[1],"href":[1],"linkAccesskey":[1,"link-accesskey"],"linkTitle":[1,"link-title"],"analyticsId":[1,"analytics-id"],"focused":[32]},[[0,"focusin","focusinHandler"],[0,"focusout","focusoutHandler"]]]]],["stzh-space",[[1,"stzh-space",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-sticky",[[6,"stzh-sticky",{"disableStickyTop":[516,"disable-sticky-top"],"disableStickyBottom":[516,"disable-sticky-bottom"],"breakout":[516],"isStuckTop":[32],"isStuckBottom":[32]}]]],["stzh-table",[[4,"stzh-table",{"fixedLeft":[2,"fixed-left"],"fixedRight":[2,"fixed-right"],"disableMinWidth":[516,"disable-min-width"],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32]}]]],["stzh-textandimage",[[1,"stzh-textandimage",{"floating":[516],"fullwidth":[516],"size":[513]}]]],["stzh-visuallyhidden",[[6,"stzh-visuallyhidden"]]],["stzh-vspace",[[1,"stzh-vspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-badge_3",[[6,"stzh-button",{"localization":[16],"badge":[1],"badgeType":[513,"badge-type"],"badgePosition":[513,"badge-position"],"badgeEmpty":[516,"badge-empty"],"fullwidth":[516],"rounded":[516],"floating":[516],"size":[513],"textAlign":[513,"text-align"],"variant":[513],"icon":[1],"iconPosition":[513,"icon-position"],"checked":[1540],"name":[513],"value":[1025],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"disabled":[516],"active":[516],"label":[1],"effect":[1],"iconOnly":[516,"icon-only"],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[2,"stzh-badge",{"label":[1],"type":[513]}],[2,"stzh-icon",{"name":[1],"a11yTitle":[1,"a11y-title"]}]]],["stzh-share",[[2,"stzh-share",{"localization":[16],"url":[1],"services":[1]}]]],["stzh-progressbar-item",[[6,"stzh-progressbar-item",{"label":[513],"disabled":[516],"first":[516],"last":[516],"passed":[516],"current":[516],"hide":[516],"dotted":[516],"step":[514],"icon":[513],"analyticsId":[1,"analytics-id"]}]]],["stzh-vbz-linechip",[[2,"stzh-vbz-linechip",{"line":[1],"active":[516],"alert":[516],"global":[516],"disabled":[516],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["stzh-loader",[[6,"stzh-loader",{"size":[1],"label":[1],"hideLabel":[4,"hide-label"]}]]],["stzh-actionset",[[2,"stzh-actionset",{"localization":[16],"variant":[513],"popoverButtonVariant":[513,"popover-button-variant"],"popoverButtonSize":[513,"popover-button-size"],"popoverPlacement":[513,"popover-placement"],"actions":[1],"actionsCollapsed":[32],"dynamicActions":[32],"isSmall":[32],"isMedium":[32]}]]],["stzh-ghettobox_2",[[6,"stzh-ghettobox",{"hiddenTitle":[1,"hidden-title"],"mainTitle":[1,"main-title"],"description":[1],"hideClose":[4,"hide-close"],"publishDate":[1,"publish-date"],"closeTimeKey":[1,"close-time-key"],"localization":[16],"open":[32],"show":[64],"hide":[64]}],[6,"stzh-richtext",{"localization":[16],"externalLinkSelector":[1,"external-link-selector"],"externalLinkIcon":[1,"external-link-icon"]}]]],["stzh-calendar",[[2,"stzh-calendar",{"value":[1025],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"isDateDisabled":[16],"prevMonthAnalyticsId":[1,"prev-month-analytics-id"],"nextMonthAnalyticsId":[1,"next-month-analytics-id"],"activeFocus":[32],"focusedDay":[32],"setFocusedDay":[64],"setDate":[64]}]]],["stzh-sortable",[[6,"stzh-sortable",{"localization":[16],"disabled":[516],"dataIdAttribute":[1,"data-id-attribute"],"container":[16],"ghostClone":[16],"filterElements":[1,"filter-elements"],"toArray":[64],"sort":[64],"moveItem":[64]}]]],["stzh-text",[[6,"stzh-text",{"font":[1],"curve":[513],"lead":[516],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"]}]]],["stzh-heading",[[6,"stzh-heading",{"level":[513],"curve":[513],"withBorder":[516,"with-border"]}]]],["stzh-popover",[[6,"stzh-popover",{"open":[1540],"placement":[513],"variant":[513],"skidding":[2],"distance":[2],"label":[1],"strategy":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleOutsideClick"]]]]],["stzh-dropdown",[[4,"stzh-dropdown",{"options":[1],"optgroups":[1],"items":[1],"searchField":[1,"search-field"],"multiple":[516],"inline":[516],"maxOptions":[2,"max-options"],"searchConjunction":[1,"search-conjunction"],"allowEmptyOption":[4,"allow-empty-option"],"openOnFocus":[4,"open-on-focus"],"closeAfterSelect":[4,"close-after-select"],"load":[16],"minCharacters":[2,"min-characters"],"loadThrottle":[2,"load-throttle"],"preload":[8],"labelField":[1,"label-field"],"valueField":[1,"value-field"],"optgroupField":[1,"optgroup-field"],"optgroupLabelField":[1,"optgroup-label-field"],"optgroupValueField":[1,"optgroup-value-field"],"lockOptgroupOrder":[4,"lock-optgroup-order"],"name":[513],"open":[4],"isOpen":[516,"is-open"],"variant":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"icon":[1],"noSearch":[4,"no-search"],"noBackspaceDelete":[4,"no-backspace-delete"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"localization":[16],"a11yDescribedby":[1,"a11y-describedby"],"getValue":[64],"setValue":[64],"setFocus":[64],"resetLoadedSearches":[64],"getLoadedSearches":[64],"getItems":[64],"loadItems":[64],"show":[64],"hide":[64]}]]],["stzh-chip_2",[[6,"stzh-chip",{"label":[1],"icon":[1],"href":[1],"target":[1],"nonInteractive":[516,"non-interactive"],"removable":[516],"variant":[513],"size":[513],"type":[513],"counter":[1],"removeLabel":[1,"remove-label"],"active":[516],"disabled":[516],"a11yTabindex":[1,"a11y-tabindex"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"analyticsId":[1,"analytics-id"],"removeAnalyticsId":[1,"remove-analytics-id"],"setFocus":[64]}],[4,"stzh-clamp",{"localization":[16],"lines":[2],"linesSmall":[2,"lines-small"],"linesMedium":[2,"lines-medium"],"linesLarge":[2,"lines-large"],"linesUltra":[2,"lines-ultra"],"showExpandLink":[4,"show-expand-link"],"expanded":[1540],"clamped":[1540],"update":[64]}]]],["stzh-card_3",[[6,"stzh-card",{"localization":[16],"collapsed":[1540],"starred":[1540],"starrable":[516],"selectable":[516],"checked":[516],"name":[513],"href":[513],"target":[1],"value":[1025],"disabled":[516],"withArrow":[516,"with-arrow"],"heading":[1],"subtitle":[1],"headerActions":[1,"header-actions"],"footerActions":[1,"footer-actions"],"subtitleInteractive":[4,"subtitle-interactive"],"sortableDisabled":[516,"sortable-disabled"],"collapsible":[516],"hideHeaderBorder":[516,"hide-header-border"],"hideFooterBorder":[516,"hide-footer-border"],"hideElevation":[516,"hide-elevation"],"hideMovementActions":[4,"hide-movement-actions"],"analyticsId":[1,"analytics-id"]}],[6,"stzh-chip-select",{"localization":[16],"data":[1],"name":[513],"label":[1],"value":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"disabled":[516],"a11yDescribedby":[1,"a11y-describedby"],"activeFocusOptionIndex":[32]}],[6,"stzh-card-list",{"localization":[16],"layout":[513],"description":[1],"showToggleLink":[516,"show-toggle-link"],"sortableEnabled":[4,"sortable-enabled"],"sortableDataIdAttribute":[1,"sortable-data-id-attribute"],"allCollapsed":[32]},[[0,"stzhCollapse","collapseListener"]]]]],["stzh-input",[[6,"stzh-input",{"localization":[16],"multiline":[4],"rows":[2],"type":[1],"step":[2],"min":[2],"max":[2],"showSpin":[516,"show-spin"],"readonly":[516],"disabled":[516],"clearable":[516],"showMarker":[516,"show-marker"],"minlength":[2],"maxlength":[2],"name":[513],"value":[1025],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"inputmode":[1],"autocomplete":[1],"noAutocomplete":[4,"no-autocomplete"],"label":[1],"size":[513],"a11yDescribedby":[1,"a11y-describedby"],"filled":[32],"setFocus":[64]}]]],["stzh-datepicker_3",[[6,"stzh-datepicker",{"calendarMin":[1,"calendar-min"],"calendarMax":[1,"calendar-max"],"calendarIsDateDisabled":[16],"name":[513],"value":[1025],"label":[1],"readonly":[516],"disabled":[516],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"size":[513],"inline":[4],"dateAdapter":[16],"localization":[16],"buttonLabel":[32],"setDate":[64],"getPopover":[64]}],[6,"stzh-radio",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}],[6,"stzh-radiogroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedRadio":[8,"checked-radio"],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["stzh-status",[[2,"stzh-status",{"percent":[2],"withLoadingbar":[516,"with-loadingbar"],"label":[1],"type":[513]}]]],["stzh-datalist_2",[[6,"stzh-datalist",{"direction":[513],"directionSmall":[513,"direction-small"],"directionMedium":[513,"direction-medium"],"directionLarge":[513,"direction-large"],"directionUltra":[513,"direction-ultra"],"hideBorder":[516,"hide-border"],"disableLabelMinWidth":[516,"disable-label-min-width"],"currentDirection":[513,"current-direction"],"items":[1]}],[6,"stzh-datalist-item",{"localization":[16],"direction":[513],"href":[513],"rel":[1],"target":[1],"download":[1],"leadingIcon":[1,"leading-icon"],"icon":[1],"iconLabel":[1,"icon-label"],"iconTooltip":[1,"icon-tooltip"],"label":[1],"value":[1],"meta":[1],"statusLabel":[1,"status-label"],"statusType":[1,"status-type"],"hideBorder":[516,"hide-border"],"a11yExpanded":[516,"a11y-expanded"],"a11yControls":[1,"a11y-controls"],"external":[32]}]]],["stzh-menu_2",[[6,"stzh-menu-item",{"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"disabled":[516],"active":[516],"icon":[1],"label":[1],"href":[1],"target":[1],"a11yLabel":[1,"a11y-label"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[6,"stzh-menu"]]],["stzh-link",[[6,"stzh-link",{"localization":[16],"icon":[1],"iconPosition":[513,"icon-position"],"size":[513],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"variant":[513],"fullwidth":[516],"textAlign":[513,"text-align"],"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"badgePosition":[513,"badge-position"],"disabled":[516],"active":[516],"iconOnly":[516,"icon-only"],"label":[1],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["stzh-tooltip",[[6,"stzh-tooltip",{"open":[1028],"label":[1],"content":[1],"placement":[1],"strategy":[1],"skidding":[2],"distance":[2],"interactive":[4],"trigger":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleDocumentClick"]]]]]]'),e)}));
+import{d as doc,N as NAMESPACE,p as promiseResolve,H,b as bootstrapLazy}from"./index-67fd55c9.js";export{s as setNonce}from"./index-67fd55c9.js";import{g as globalScripts}from"./app-globals-91875913.js";var patchBrowser=function(){{patchCloneNodeFix(H.prototype)}var e=Array.from(doc.querySelectorAll("script")).find((function(e){return new RegExp("/".concat(NAMESPACE,"(\\.esm)?\\.js($|\\?|#)")).test(e.src)||e.getAttribute("data-stencil-namespace")===NAMESPACE}));var t=import.meta.url;var a=(e||{})["data-opts"]||{};if(t!==""){a.resourcesUrl=new URL(".",t).href}return promiseResolve(a)};var patchCloneNodeFix=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var a=t.call(this,false);var i=this.childNodes;if(e){for(var s=0;s<i.length;s++){if(i[s].nodeType!==2){a.appendChild(i[s].cloneNode(true))}}}return a}};patchBrowser().then((function(e){globalScripts();return bootstrapLazy(JSON.parse('[["stzh-microsite-teaserlist",[[2,"stzh-microsite-teaserlist",{"localization":[16],"api":[1],"tags":[1],"stepItems":[2,"step-items"],"showItems":[32],"activeFilter":[32]}]]],["stzh-appointments",[[2,"stzh-appointments",{"localization":[16],"sortBy":[1025,"sort-by"],"appointments":[1],"currentDate":[1025,"current-date"],"value":[1025],"name":[513],"showItems":[1026,"show-items"],"stepItems":[2,"step-items"],"calendarTitle":[1,"calendar-title"],"appointmentsTitle":[1,"appointments-title"],"dateAdapter":[16]}]]],["stzh-datamessagelist-item",[[2,"stzh-datamessagelist-item",{"localization":[16],"heading":[1],"unread":[4],"href":[1],"rel":[1],"target":[1],"description":[1],"icon":[1],"loadingStatus":[1,"loading-status"],"meta":[1],"actions":[1],"tags":[1],"analyticsId":[1,"analytics-id"],"external":[32]}]]],["stzh-contact",[[6,"stzh-contact",{"type":[1],"heading":[1],"mainHeading":[1,"main-heading"],"name":[1],"street":[1],"streetInfo":[1,"street-info"],"postalCode":[1,"postal-code"],"location":[1],"numbers":[1],"poBoxHeading":[1,"po-box-heading"],"poboxTitle":[1,"pobox-title"],"poboxPostalCode":[1,"pobox-postal-code"],"poboxLocation":[1,"pobox-location"],"availabilityTitle":[1,"availability-title"],"availability":[1],"withBorder":[4,"with-border"]}]]],["stzh-sitemap",[[0,"stzh-sitemap",{"items":[1]}]]],["stzh-amount",[[0,"stzh-amount",{"minValue":[2,"min-value"],"maxValue":[2,"max-value"],"minValueDropdown":[2,"min-value-dropdown"],"maxValueDropdown":[2,"max-value-dropdown"],"value":[1025],"step":[2],"name":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"invalid":[516],"required":[516],"clearable":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1025],"a11yDescribedby":[1,"a11y-describedby"],"localization":[16]}]]],["stzh-datatable",[[4,"stzh-datatable",{"localization":[16],"label":[1],"sortBy":[1025,"sort-by"],"sortDirection":[1025,"sort-direction"],"tokenize":[1],"idField":[1,"id-field"],"disableMinWidth":[516,"disable-min-width"],"rows":[1],"columns":[1],"query":[32],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32],"toggleSort":[64]}]]],["stzh-saptcha",[[2,"stzh-saptcha",{"localization":[16],"numbers":[1],"value":[1],"name":[513],"error":[1],"invalid":[516],"disabled":[516]}]]],["stzh-vbz-majorticker",[[2,"stzh-vbz-majorticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16],"ghettoboxCloseTimeKey":[1,"ghettobox-close-time-key"],"ghettoboxShown":[32],"getGhettoboxShown":[64],"getDisturbance":[64]}]]],["stzh-vbz-ticker",[[6,"stzh-vbz-ticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16]}]]],["stzh-anchornav",[[2,"stzh-anchornav",{"columns":[514],"columnsSmall":[514,"columns-small"],"columnsMedium":[514,"columns-medium"],"columnsLarge":[514,"columns-large"],"columnsUltra":[514,"columns-ultra"],"items":[1],"withBorder":[516,"with-border"]}]]],["stzh-audio",[[6,"stzh-audio",{"localization":[16],"src":[1],"preload":[1],"transcript":[1],"transcriptShown":[1028,"transcript-shown"],"downloadAnalyticsId":[1,"download-analytics-id"],"transcriptAnalyticsId":[1,"transcript-analytics-id"],"play":[64],"pause":[64]}]]],["stzh-upload",[[4,"stzh-upload",{"existingFiles":[1,"existing-files"],"label":[1],"description":[1],"button":[1],"url":[1],"method":[1],"withCredentials":[4,"with-credentials"],"disabled":[516],"invalid":[516],"downloadDisabled":[4,"download-disabled"],"error":[1],"acceptedFiles":[1,"accepted-files"],"autoProcessQueue":[4,"auto-process-queue"],"maxFiles":[2,"max-files"],"maxFilesize":[2,"max-filesize"],"parallelUploads":[2,"parallel-uploads"],"uploadMultiple":[4,"upload-multiple"],"chunking":[4],"forceChunking":[4,"force-chunking"],"chunkSize":[2,"chunk-size"],"parallelChunkUploads":[4,"parallel-chunk-uploads"],"retryChunks":[4,"retry-chunks"],"retryChunksLimit":[2,"retry-chunks-limit"],"filesizeBase":[2,"filesize-base"],"headers":[16],"defaultHeaders":[4,"default-headers"],"accept":[16],"chunksUploaded":[16],"hiddenInputContainer":[1,"hidden-input-container"],"localization":[16],"processQueue":[64],"removeFile":[64],"removeAllFiles":[64]}]]],["stzh-footer",[[4,"stzh-footer",{"localization":[16],"copyright":[1],"variant":[1],"mainUrl":[1,"main-url"],"withBorder":[4,"with-border"]}]]],["stzh-langnav",[[2,"stzh-langnav",{"languageActive":[1,"language-active"],"languages":[1],"popoverPlacement":[513,"popover-placement"],"preventUrlchange":[4,"prevent-urlchange"]}]]],["stzh-message",[[6,"stzh-message",{"label":[1],"description":[1],"closeKey":[1,"close-key"],"type":[513],"hideClose":[4,"hide-close"],"localization":[16],"open":[32],"show":[64],"hide":[64]}]]],["stzh-pagebottom",[[6,"stzh-pagebottom",{"shareTitle":[1,"share-title"],"shareUrl":[1,"share-url"],"shareServices":[1,"share-services"],"shareDisabled":[4,"share-disabled"],"logoHref":[1,"logo-href"],"logoAnalyticsId":[1,"logo-analytics-id"],"withBorder":[4,"with-border"]}]]],["stzh-accordion-item",[[6,"stzh-accordion-item",{"open":[1540],"disabled":[516],"heading":[1],"subtitle":[1],"description":[1],"icon":[1],"badge":[1],"badgeEmpty":[516,"badge-empty"],"badgeType":[513,"badge-type"],"headingLevel":[513,"heading-level"],"analyticsId":[1,"analytics-id"],"show":[64],"hide":[64],"toggle":[64],"setFocus":[64]}]]],["stzh-checkbox",[[6,"stzh-checkbox",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"showMarker":[516,"show-marker"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["stzh-checkboxgroup",[[6,"stzh-checkboxgroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedCheckbox":[16],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["stzh-dialog",[[6,"stzh-dialog",{"localization":[16],"closeOnEscapeKey":[4,"close-on-escape-key"],"closeOnBackdropClick":[4,"close-on-backdrop-click"],"open":[1028],"stay":[4],"size":[513],"hideClose":[4,"hide-close"],"heading":[1],"a11yRole":[1,"a11y-role"],"a11yLabel":[1,"a11y-label"],"closeAnalyticsId":[1,"close-analytics-id"],"show":[64],"hide":[64]},[[6,"click","handleOutsideClick"],[4,"keydown","handleKeydown"],[4,"click","handleOpenTriggerClick"]]]]],["stzh-progressbar",[[2,"stzh-progressbar",{"localization":[16],"data":[1],"index":[2],"steps":[2],"stepsSmall":[2,"steps-small"],"stepsMedium":[2,"steps-medium"],"stepsLarge":[2,"steps-large"],"stepsUltra":[2,"steps-ultra"],"currentSteps":[32]}]]],["stzh-toggle",[[6,"stzh-toggle",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"labelPosition":[513,"label-position"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["stzh-fieldset",[[6,"stzh-fieldset",{"legend":[1],"hideLegend":[4,"hide-legend"],"legendLevel":[1,"legend-level"],"legendCurve":[1,"legend-curve"]}]]],["stzh-olmap",[[0,"stzh-olmap",{"localization":[16],"hostname":[1],"scaleControl":[4,"scale-control"],"layerControl":[4,"layer-control"],"printControl":[4,"print-control"],"locationControl":[4,"location-control"],"layer":[1025],"zoom":[2],"zoomLocation":[2,"zoom-location"],"center":[16],"centerMarker":[4,"center-marker"],"resolutions":[16],"layers":[1],"getMap":[64],"addIconMarker":[64],"removeIconMarker":[64],"setIconMarkerActive":[64],"setIconMarkerInactive":[64],"enableLocationTracking":[64],"disableLocationTracking":[64],"getDistance":[64]},[[8,"load","handleLoad"],[8,"deviceorientation","handleLoad"],[8,"pageshow","handleLoad"]]]]],["stzh-accordion",[[6,"stzh-accordion",{"collapsible":[4],"multiselectable":[4],"setItemFocus":[64]},[[0,"stzhOpen","openListener"]]]]],["stzh-actions",[[6,"stzh-actions",{"variant":[513],"withBorder":[516,"with-border"]}]]],["stzh-appnav",[[6,"stzh-appnav",{"appTitle":[1,"app-title"],"appStatus":[1,"app-status"],"appHref":[1,"app-href"],"appAnalyticsId":[1,"app-analytics-id"]}]]],["stzh-buttongroup",[[6,"stzh-buttongroup"]]],["stzh-carousel",[[6,"stzh-carousel",{"localization":[16],"variant":[513],"disabled":[516],"slides":[2],"slidesSmall":[2,"slides-small"],"slidesMedium":[2,"slides-medium"],"slidesLarge":[2,"slides-large"],"slidesUltra":[2,"slides-ultra"],"slide":[2],"autoplay":[1028],"tabThrough":[4,"tab-through"],"preventMouseDrag":[32],"scrollTimeout":[32],"autoplayTimeout":[32],"distanceQuickSwipe":[32],"distancePreventClick":[32],"autoplayRunning":[32],"autoplayDisabledByMotionMedia":[32],"autoplayDisabledByMouse":[32],"autoplayDisabledByFocus":[32],"dragging":[32],"scrolling":[32],"ariaLive":[32],"currentSlides":[32],"currentSwipeSlides":[32],"slideElements":[32],"previousElements":[32],"nextElements":[32],"navigationTextElements":[32],"slideTo":[64],"slideToPrevious":[64],"slideToNext":[64]}]]],["stzh-cell",[[1,"stzh-cell",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justifySelf":[513,"justify-self"],"alignSelf":[513,"align-self"]}]]],["stzh-chart",[[0,"stzh-chart",{"chartId":[1,"chart-id"],"create":[16]}]]],["stzh-container",[[6,"stzh-container"]]],["stzh-cspace",[[6,"stzh-cspace"]]],["stzh-datamessagelist",[[6,"stzh-datamessagelist"]]],["stzh-details",[[6,"stzh-details",{"open":[1540],"show":[64],"hide":[64],"toggle":[64]}]]],["stzh-figure",[[6,"stzh-figure",{"caption":[1],"copyright":[1],"fullwidth":[516]}]]],["stzh-flyingfocus",[[2,"stzh-flyingfocus",{"style":[32],"position":[32],"enabled":[32],"visible":[32],"helper":[32],"moving":[32],"reposition":[64]},[[4,"keydown","handleKeydown"],[5,"mousedown","handleMousedown"],[6,"focus","handleFocus"],[6,"stzhFocus","handleFocus"],[6,"blur","handleBlur"],[7,"scroll","handleScrollResize"],[11,"resize","handleScrollResize"]]]]],["stzh-header",[[6,"stzh-header",{"href":[1],"metabarStay":[4,"metabar-stay"],"stickyDisabled":[4,"sticky-disabled"],"preventAppnavPlaceholder":[4,"prevent-appnav-placeholder"],"logoAnalyticsId":[1,"logo-analytics-id"],"hideLogo":[32],"paddingTop":[32],"metabarTransform":[32],"sticky":[32],"stickyClosing":[32],"stickyMetabar":[32],"stickyMetabarEnd":[32],"updatePosition":[64]},[[9,"scroll","scrollListener"]]]]],["stzh-hr",[[2,"stzh-hr"]]],["stzh-hspace",[[1,"stzh-hspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-icon-sprite",[[0,"stzh-icon-sprite"]]],["stzh-invert",[[6,"stzh-invert"]]],["stzh-list",[[1,"stzh-list",{"variant":[513]}]]],["stzh-list-item",[[1,"stzh-list-item"]]],["stzh-loadingbar",[[2,"stzh-loadingbar",{"percent":[2],"hidePercent":[4,"hide-percent"],"label":[1]}]]],["stzh-metanav",[[6,"stzh-metanav"]]],["stzh-overlay",[[6,"stzh-overlay",{"open":[1028],"stay":[4],"a11yLabel":[1,"a11y-label"],"show":[64],"hide":[64]}]]],["stzh-page-skiplinks",[[6,"stzh-page-skiplinks"]]],["stzh-pagetitle",[[6,"stzh-pagetitle"]]],["stzh-pagetitle-hero",[[6,"stzh-pagetitle-hero",{"heading":[1],"leadAuthor":[1,"lead-author"],"subtitle":[1]}]]],["stzh-ratio",[[6,"stzh-ratio",{"ratio":[513],"portrait":[516],"fit":[513]}]]],["stzh-readspeaker",[[4,"stzh-readspeaker",{"href":[1],"eventId":[1,"event-id"]},[[8,"DOMContentLoaded","addClickEvents"],[8,"load","addClickEvents"]]]]],["stzh-row",[[1,"stzh-row",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justify":[513],"items":[513],"content":[513]}]]],["stzh-section",[[6,"stzh-section",{"variant":[1]}]]],["stzh-show",[[1,"stzh-show",{"mikro":[4],"small":[4],"medium":[4],"large":[4],"ultra":[4],"hideFromDate":[1,"hide-from-date"]}]]],["stzh-skin-portal-mitwirken",[[0,"stzh-skin-portal-mitwirken"]]],["stzh-skin-storybook-preview",[[0,"stzh-skin-storybook-preview"]]],["stzh-skiplink",[[6,"stzh-skiplink",{"label":[1],"href":[1],"linkAccesskey":[1,"link-accesskey"],"linkTitle":[1,"link-title"],"analyticsId":[1,"analytics-id"],"focused":[32]},[[0,"focusin","focusinHandler"],[0,"focusout","focusoutHandler"]]]]],["stzh-space",[[1,"stzh-space",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-sticky",[[6,"stzh-sticky",{"disableStickyTop":[516,"disable-sticky-top"],"disableStickyBottom":[516,"disable-sticky-bottom"],"breakout":[516],"isStuckTop":[32],"isStuckBottom":[32]}]]],["stzh-table",[[4,"stzh-table",{"fixedLeft":[2,"fixed-left"],"fixedRight":[2,"fixed-right"],"disableMinWidth":[516,"disable-min-width"],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32]}]]],["stzh-textandimage",[[1,"stzh-textandimage",{"floating":[516],"fullwidth":[516],"size":[513]}]]],["stzh-visuallyhidden",[[6,"stzh-visuallyhidden"]]],["stzh-vspace",[[1,"stzh-vspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["stzh-badge_3",[[6,"stzh-button",{"localization":[16],"badge":[1],"badgeType":[513,"badge-type"],"badgePosition":[513,"badge-position"],"badgeEmpty":[516,"badge-empty"],"fullwidth":[516],"rounded":[516],"floating":[516],"size":[513],"textAlign":[513,"text-align"],"variant":[513],"icon":[1],"iconPosition":[513,"icon-position"],"checked":[1540],"name":[513],"value":[1025],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"disabled":[516],"active":[516],"label":[1],"effect":[1],"iconOnly":[516,"icon-only"],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[2,"stzh-badge",{"label":[1],"type":[513]}],[2,"stzh-icon",{"name":[1],"a11yTitle":[1,"a11y-title"]}]]],["stzh-share",[[2,"stzh-share",{"localization":[16],"url":[1],"services":[1]}]]],["stzh-progressbar-item",[[6,"stzh-progressbar-item",{"label":[513],"disabled":[516],"first":[516],"last":[516],"passed":[516],"current":[516],"hide":[516],"dotted":[516],"step":[514],"icon":[513],"analyticsId":[1,"analytics-id"]}]]],["stzh-vbz-linechip",[[2,"stzh-vbz-linechip",{"line":[1],"active":[516],"alert":[516],"global":[516],"disabled":[516],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["stzh-loader",[[6,"stzh-loader",{"size":[1],"label":[1],"hideLabel":[4,"hide-label"]}]]],["stzh-actionset",[[2,"stzh-actionset",{"localization":[16],"variant":[513],"popoverButtonVariant":[513,"popover-button-variant"],"popoverButtonSize":[513,"popover-button-size"],"popoverPlacement":[513,"popover-placement"],"actions":[1],"actionsCollapsed":[32],"dynamicActions":[32],"isSmall":[32],"isMedium":[32]}]]],["stzh-ghettobox_2",[[6,"stzh-ghettobox",{"hiddenTitle":[1,"hidden-title"],"mainTitle":[1,"main-title"],"description":[1],"hideClose":[4,"hide-close"],"publishDate":[1,"publish-date"],"closeTimeKey":[1,"close-time-key"],"localization":[16],"open":[32],"show":[64],"hide":[64]}],[6,"stzh-richtext",{"localization":[16],"externalLinkSelector":[1,"external-link-selector"],"externalLinkIcon":[1,"external-link-icon"]}]]],["stzh-calendar",[[2,"stzh-calendar",{"value":[1025],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"isDateDisabled":[16],"prevMonthAnalyticsId":[1,"prev-month-analytics-id"],"nextMonthAnalyticsId":[1,"next-month-analytics-id"],"activeFocus":[32],"focusedDay":[32],"setFocusedDay":[64],"setDate":[64]}]]],["stzh-sortable",[[6,"stzh-sortable",{"localization":[16],"disabled":[516],"dataIdAttribute":[1,"data-id-attribute"],"container":[16],"ghostClone":[16],"filterElements":[1,"filter-elements"],"toArray":[64],"sort":[64],"moveItem":[64]}]]],["stzh-text",[[6,"stzh-text",{"font":[1],"curve":[513],"lead":[516],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"]}]]],["stzh-heading",[[6,"stzh-heading",{"level":[513],"curve":[513],"withBorder":[516,"with-border"]}]]],["stzh-popover",[[6,"stzh-popover",{"open":[1540],"placement":[513],"variant":[513],"skidding":[2],"distance":[2],"label":[1],"strategy":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleOutsideClick"]]]]],["stzh-dropdown",[[4,"stzh-dropdown",{"options":[1],"optgroups":[1],"items":[1],"searchField":[1,"search-field"],"multiple":[516],"inline":[516],"maxOptions":[2,"max-options"],"searchConjunction":[1,"search-conjunction"],"allowEmptyOption":[4,"allow-empty-option"],"openOnFocus":[4,"open-on-focus"],"closeAfterSelect":[4,"close-after-select"],"load":[16],"minCharacters":[2,"min-characters"],"loadThrottle":[2,"load-throttle"],"preload":[8],"labelField":[1,"label-field"],"valueField":[1,"value-field"],"optgroupField":[1,"optgroup-field"],"optgroupLabelField":[1,"optgroup-label-field"],"optgroupValueField":[1,"optgroup-value-field"],"lockOptgroupOrder":[4,"lock-optgroup-order"],"name":[513],"open":[4],"isOpen":[516,"is-open"],"variant":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"icon":[1],"noSearch":[4,"no-search"],"noBackspaceDelete":[4,"no-backspace-delete"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"localization":[16],"a11yDescribedby":[1,"a11y-describedby"],"getValue":[64],"setValue":[64],"setFocus":[64],"resetLoadedSearches":[64],"getLoadedSearches":[64],"getItems":[64],"loadItems":[64],"show":[64],"hide":[64]}]]],["stzh-chip_2",[[6,"stzh-chip",{"label":[1],"icon":[1],"href":[1],"target":[1],"nonInteractive":[516,"non-interactive"],"removable":[516],"variant":[513],"size":[513],"type":[513],"counter":[1],"removeLabel":[1,"remove-label"],"active":[516],"disabled":[516],"a11yTabindex":[1,"a11y-tabindex"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"analyticsId":[1,"analytics-id"],"removeAnalyticsId":[1,"remove-analytics-id"],"setFocus":[64]}],[4,"stzh-clamp",{"localization":[16],"lines":[2],"linesSmall":[2,"lines-small"],"linesMedium":[2,"lines-medium"],"linesLarge":[2,"lines-large"],"linesUltra":[2,"lines-ultra"],"showExpandLink":[4,"show-expand-link"],"expanded":[1540],"clamped":[1540],"update":[64]}]]],["stzh-card_3",[[6,"stzh-card",{"localization":[16],"collapsed":[1540],"starred":[1540],"starrable":[516],"selectable":[516],"checked":[516],"name":[513],"href":[513],"target":[1],"value":[1025],"disabled":[516],"withArrow":[516,"with-arrow"],"heading":[1],"subtitle":[1],"headerActions":[1,"header-actions"],"footerActions":[1,"footer-actions"],"subtitleInteractive":[4,"subtitle-interactive"],"sortableDisabled":[516,"sortable-disabled"],"collapsible":[516],"hideHeaderBorder":[516,"hide-header-border"],"hideFooterBorder":[516,"hide-footer-border"],"hideElevation":[516,"hide-elevation"],"hideMovementActions":[4,"hide-movement-actions"],"analyticsId":[1,"analytics-id"]}],[6,"stzh-chip-select",{"localization":[16],"data":[1],"name":[513],"label":[1],"value":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"disabled":[516],"a11yDescribedby":[1,"a11y-describedby"],"activeFocusOptionIndex":[32]}],[6,"stzh-card-list",{"localization":[16],"layout":[513],"description":[1],"showToggleLink":[516,"show-toggle-link"],"sortableEnabled":[4,"sortable-enabled"],"sortableDataIdAttribute":[1,"sortable-data-id-attribute"],"allCollapsed":[32]},[[0,"stzhCollapse","collapseListener"]]]]],["stzh-input",[[6,"stzh-input",{"localization":[16],"multiline":[4],"rows":[2],"type":[1],"step":[2],"min":[2],"max":[2],"showSpin":[516,"show-spin"],"readonly":[516],"disabled":[516],"clearable":[516],"showMarker":[516,"show-marker"],"minlength":[2],"maxlength":[2],"name":[513],"value":[1025],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"inputmode":[1],"autocomplete":[1],"noAutocomplete":[4,"no-autocomplete"],"label":[1],"size":[513],"a11yDescribedby":[1,"a11y-describedby"],"filled":[32],"setFocus":[64]}]]],["stzh-datepicker_3",[[6,"stzh-datepicker",{"calendarMin":[1,"calendar-min"],"calendarMax":[1,"calendar-max"],"calendarIsDateDisabled":[16],"name":[513],"value":[1025],"label":[1],"readonly":[516],"disabled":[516],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"size":[513],"inline":[4],"dateAdapter":[16],"localization":[16],"buttonLabel":[32],"setDate":[64],"getPopover":[64]}],[6,"stzh-radio",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}],[6,"stzh-radiogroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedRadio":[8,"checked-radio"],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["stzh-status",[[2,"stzh-status",{"percent":[2],"withLoadingbar":[516,"with-loadingbar"],"label":[1],"type":[513]}]]],["stzh-datalist_2",[[6,"stzh-datalist",{"direction":[513],"directionSmall":[513,"direction-small"],"directionMedium":[513,"direction-medium"],"directionLarge":[513,"direction-large"],"directionUltra":[513,"direction-ultra"],"hideBorder":[516,"hide-border"],"disableLabelMinWidth":[516,"disable-label-min-width"],"currentDirection":[513,"current-direction"],"items":[1]}],[6,"stzh-datalist-item",{"localization":[16],"direction":[513],"href":[513],"rel":[1],"target":[1],"download":[1],"leadingIcon":[1,"leading-icon"],"icon":[1],"iconLabel":[1,"icon-label"],"iconTooltip":[1,"icon-tooltip"],"label":[1],"value":[1],"meta":[1],"statusLabel":[1,"status-label"],"statusType":[1,"status-type"],"hideBorder":[516,"hide-border"],"a11yExpanded":[516,"a11y-expanded"],"a11yControls":[1,"a11y-controls"],"external":[32]}]]],["stzh-menu_2",[[6,"stzh-menu-item",{"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"disabled":[516],"active":[516],"icon":[1],"label":[1],"href":[1],"target":[1],"a11yLabel":[1,"a11y-label"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[6,"stzh-menu"]]],["stzh-link",[[6,"stzh-link",{"localization":[16],"icon":[1],"iconPosition":[513,"icon-position"],"size":[513],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"variant":[513],"fullwidth":[516],"textAlign":[513,"text-align"],"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"badgePosition":[513,"badge-position"],"disabled":[516],"active":[516],"iconOnly":[516,"icon-only"],"label":[1],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["stzh-tooltip",[[6,"stzh-tooltip",{"open":[1028],"label":[1],"content":[1],"placement":[1],"strategy":[1],"skidding":[2],"distance":[2],"interactive":[4],"trigger":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleDocumentClick"]]]]]]'),e)}));
 //# sourceMappingURL=stzh-components.js.map

package/dist/esm-es5/stzh-components.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","concat","NAMESPACE","test","src","getAttribute","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"2MAmBA,IAAMA,aAAe,WAWO,CAEpBC,kBAAkBC,EAAEC,U,CAcxB,IAAMC,EAIAC,MAAMC,KAAKC,IAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,WAAIC,OAAO,IAAAC,OAAKC,UAAS,4BAA2BC,KAAKJ,EAAEK,MAChHL,EAAEM,aAAa,4BAA8BH,SADQ,IAG7D,IAAMI,cAAyBC,IAC/B,IAAMC,GAA+Bf,GAAa,IAAI,cAAgB,GAiBtE,GAAuBa,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,I,CAiBjD,OAAOC,eAAeJ,EAC1B,EA6CA,IAAMlB,kBAAoB,SAACuB,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,E,CAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,M,GAI9D,OAAOK,CACf,CACA,ECrJA/B,eAAesC,MAAK,SAAAC,GAClBC,gBACA,OAAOC,cAAcC,KAAAC,MAAA,ysvBAAuCJ,EAC9D"}
+{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","concat","NAMESPACE","test","src","getAttribute","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"2MAmBA,IAAMA,aAAe,WAWO,CAEpBC,kBAAkBC,EAAEC,U,CAcxB,IAAMC,EAIAC,MAAMC,KAAKC,IAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,WAAIC,OAAO,IAAAC,OAAKC,UAAS,4BAA2BC,KAAKJ,EAAEK,MAChHL,EAAEM,aAAa,4BAA8BH,SADQ,IAG7D,IAAMI,cAAyBC,IAC/B,IAAMC,GAA+Bf,GAAa,IAAI,cAAgB,GAiBtE,GAAuBa,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,I,CAiBjD,OAAOC,eAAeJ,EAC1B,EA6CA,IAAMlB,kBAAoB,SAACuB,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,E,CAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,M,GAI9D,OAAOK,CACf,CACA,ECrJA/B,eAAesC,MAAK,SAAAC,GAClBC,gBACA,OAAOC,cAAcC,KAAAC,MAAA,2uvBAAuCJ,EAC9D"}