@oiz/stzh-components 3.8.1 → 3.8.2

package/dist/components/{p-60b9f94a.js.map → p-3752dd9a.js.map}

@@ -1 +1 @@
-{"file":"p-60b9f94a.js","mappings":"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","names":[],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: auto;\n    min-width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    overflow: hidden;\n    outline: none;\n\n    &--fit-content {\n      width: fit-content;\n    }\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding: space('medium') var(--padding-right) var(--padding-bottom) var(--padding-left);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-3752dd9a.js","mappings":"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","names":[],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: auto;\n    min-width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    overflow: hidden;\n    outline: none;\n\n    &--fit-content {\n      width: fit-content;\n    }\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding: space('medium') var(--padding-right) var(--padding-bottom) var(--padding-left);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-4d000b5b.js → p-431f7754.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-96cf9087.js';
-import { h as hasSlot } from './p-073888ce.js';
+import { h as hasSlot } from './p-095fbf73.js';
 import { d as defineCustomElement$2 } from './p-011c5d9b.js';
 import { d as defineCustomElement$1 } from './p-6e55dee9.js';
 
@@ -262,4 +262,4 @@ function defineCustomElement() {
 
 export { StzhButton as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-4d000b5b.js.map
+//# sourceMappingURL=p-431f7754.js.map

package/dist/components/{p-4d000b5b.js.map → p-431f7754.js.map}

@@ -1 +1 @@
-{"file":"p-4d000b5b.js","mappings":"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","names":[],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-flex;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n  }\n\n  &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: transparent;\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  min-height: 100%;\n  margin: 0;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &--not-hyphenated &__text {\n    hyphens: none;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from '@stencil/core';\n\nimport {\n  StzhBadgeType,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonClickEvent,\n  StzhButtonFocusEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/utils';\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: 'stzh-button',\n  styleUrl: 'stzh-button.scss',\n  scoped: true,\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = '';\n\n  /** Disable hyphenation for text inside button */\n  @Prop() noHyphenation: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = 'default';\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: 'icon' | 'button' = 'button';\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = 'default';\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' | 'space-between' | 'default' = 'default';\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = 'default';\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = '';\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = '';\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = '';\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: 'button' | 'submit' | 'reset' | 'radio' = 'button';\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to disable the button on click or not */\n  @Prop() disableOnClick: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = '';\n\n  /** Effect/Animation used */\n  @Prop() effect: 'default' | 'cta' = 'default';\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: 'a11y-describedby' }) a11yDescribedby: string = '';\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: 'a11y-expanded' }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: 'a11y-disabled' }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: 'a11y-controls' }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: 'a11y-current' }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: 'a11y-tabindex' }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  @Listen('reset', { target: 'document' })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    } else {\n      if (this.disableOnClick) {\n        this.disabled = true;\n      }\n      this.stzhClick.emit({\n        component: 'stzh-button',\n        originalEvent: event,\n        href: this.href,\n      });\n    }\n  };\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === 'icon' && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') &&\n          <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-button__inner\">\n          {this.type === 'radio' &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === 'left' && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === 'right' && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === 'button' || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === 'boolean' ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'button');\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute('s-object-id', this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, 'icon') || !!this.icon;\n    const classes = {\n      'stzh-button': true,\n      'stzh-button--has-icon': iconUsed,\n      'stzh-button--has-icon-only': this.iconOnly,\n      'stzh-button--has-badge': !!this.badge,\n      'stzh-button--is-rounded': this.rounded,\n      'stzh-button--is-fullwidth': this.fullwidth,\n      'stzh-button--is-disabled': this.disabled || this.a11yDisabled,\n      'stzh-button--is-active': this.active,\n      'stzh-button--is-expanded': this.a11yExpanded,\n      'stzh-button--not-hyphenated': this.noHyphenation,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : '-1'} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== 'undefined'\n              ? (this.a11yDisabled ? 'true' : 'false') : null}\n            aria-expanded={typeof this.a11yExpanded !== 'undefined'\n              ? (this.a11yExpanded ? 'true' : 'false') : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === 'radio' ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n            >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== 'undefined'\n                  ? (this.a11yDisabled ? 'true' : 'false') : null}\n                aria-expanded={typeof this.a11yExpanded !== 'undefined'\n                  ? (this.a11yExpanded ? 'true' : 'false') : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== 'undefined'\n                ? (this.a11yDisabled ? 'true' : 'false') : null}\n              aria-expanded={typeof this.a11yExpanded !== 'undefined'\n                ? (this.a11yExpanded ? 'true' : 'false') : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-431f7754.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,yhpBAAyhpB;;MCwBlipB,UAAU;;;;;;;;IAsKb,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;OACrB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;WAAM;QACL,IAAI,IAAI,CAAC,cAAc,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,SAAS,EAAE,aAAa;UACxB,aAAa,EAAE,KAAK;UACpB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;OACJ;KACF,CAAC;;iBArOsB,EAAE;yBAGO,KAAK;qBAGc,SAAS;yBAGD,QAAQ;sBAGrB,KAAK;qBAGN,KAAK;mBAGP,KAAK;gBAGD,SAAS;;;;;qBAeuC,SAAS;mBAGnD,SAAS;gBAGxC,EAAE;wBAGiC,MAAM;mBAGL,KAAK;;gBAMxB,EAAE;iBAGD,EAAE;gBAGpB,EAAE;;kBAMA,EAAE;;gBAM6B,QAAQ;oBAGnB,KAAK;0BAGhB,KAAK;kBAGI,KAAK;iBAGxB,EAAE;kBAGU,SAAS;oBAGA,KAAK;yBAGA,KAAK;0BAGJ,KAAK;;;0BASL,KAAK;;2BAMW,EAAE;;;;;;;;EA2BrE,aAAa,CAAC,KAAY;IACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACxD,qBAAqB,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,CAAC,CAAC;KACJ;GACF;EAuFO,UAAU,CAAC,QAAiB;IAClC,QACE,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,IAAI;MACR,iBAAW,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAEnE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc;MAChC,WAAK,KAAK,EAAC,kCAAkC,IAC3C,WAAK,KAAK,EAAC,0BAA0B,GAAO,CACxC,EAEP,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc;MACjC,YAAM,IAAI,EAAC,MAAM,GAAQ,EAE1B,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,QAAQ;MAC3E,kBAAY,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAe,CAE3F,EACN;GACH;EAEO,aAAa;IACnB,QACE,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IAE9C,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC;MACxC,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAO,EACvF,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAO,EACvG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,EACN;GACH;EAEO,WAAW,CAAC,QAAiB;IACnC,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,IAAI,KAAK,OAAO;MACpB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,oBAAoB,GAAO,CAClC,EAEP,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EACzD,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CACvD,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,CAAC,QAAQ,CAAC;MAChF,kBACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,SAAS,GACR,CAEP,EACX;GACH;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,cAAc,GAAG,OAAO,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;IAEpG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,QAAQ,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACvE,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,uBAAuB,EAAE,QAAQ;MACjC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;MAC3C,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;MACtC,yBAAyB,EAAE,IAAI,CAAC,OAAO;MACvC,2BAA2B,EAAE,IAAI,CAAC,SAAS;MAC3C,0BAA0B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;MAC9D,wBAAwB,EAAE,IAAI,CAAC,MAAM;MACrC,0BAA0B,EAAE,IAAI,CAAC,YAAY;MAC7C,6BAA6B,EAAE,IAAI,CAAC,aAAa;MACjD,CAAC,uBAAuB,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM;MACrD,CAAC,+BAA+B,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa;MAC3E,CAAC,sBAAsB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;MAC1D,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC/C,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KACjD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACnE,IAAI,CAAC,IAAI;MACR,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,OAAO,gBACF,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,mBAC/B,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;aAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;aAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,IAAI,IAAI,kBAC1B,IAAI,CAAC,WAAW,IAAI,IAAI,EACtC,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACzB;;QAEJ,IAAI,CAAC,IAAI,KAAK,OAAO;UACnB,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAsB,CAAC,EACnD,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAClD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,mBAC/B,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;iBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;iBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,IAAI,IAAI,kBAC1B,IAAI,CAAC,WAAW,IAAI,IAAI,EACtC,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,EACD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACrB;;YAER,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,mBAC/B,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;mBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;mBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,IAAI,IAAI,kBAC1B,IAAI,CAAC,WAAW,IAAI,IAAI,EACtC,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACpB,CAER,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-flex;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n  }\n\n  &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: transparent;\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  min-height: 100%;\n  margin: 0;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &--not-hyphenated &__text {\n    hyphens: none;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from '@stencil/core';\n\nimport {\n  StzhBadgeType,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonClickEvent,\n  StzhButtonFocusEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/utils';\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: 'stzh-button',\n  styleUrl: 'stzh-button.scss',\n  scoped: true,\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = '';\n\n  /** Disable hyphenation for text inside button */\n  @Prop() noHyphenation: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = 'default';\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: 'icon' | 'button' = 'button';\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = 'default';\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' | 'space-between' | 'default' = 'default';\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = 'default';\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = '';\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = '';\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = '';\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: 'button' | 'submit' | 'reset' | 'radio' = 'button';\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to disable the button on click or not */\n  @Prop() disableOnClick: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = '';\n\n  /** Effect/Animation used */\n  @Prop() effect: 'default' | 'cta' = 'default';\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: 'a11y-describedby' }) a11yDescribedby: string = '';\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: 'a11y-expanded' }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: 'a11y-disabled' }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: 'a11y-controls' }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: 'a11y-current' }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: 'a11y-tabindex' }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  @Listen('reset', { target: 'document' })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: 'stzh-button',\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    } else {\n      if (this.disableOnClick) {\n        this.disabled = true;\n      }\n      this.stzhClick.emit({\n        component: 'stzh-button',\n        originalEvent: event,\n        href: this.href,\n      });\n    }\n  };\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === 'icon' && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') &&\n          <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-button__inner\">\n          {this.type === 'radio' &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === 'left' && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === 'right' && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === 'button' || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === 'boolean' ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'button');\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute('s-object-id', this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, 'icon') || !!this.icon;\n    const classes = {\n      'stzh-button': true,\n      'stzh-button--has-icon': iconUsed,\n      'stzh-button--has-icon-only': this.iconOnly,\n      'stzh-button--has-badge': !!this.badge,\n      'stzh-button--is-rounded': this.rounded,\n      'stzh-button--is-fullwidth': this.fullwidth,\n      'stzh-button--is-disabled': this.disabled || this.a11yDisabled,\n      'stzh-button--is-active': this.active,\n      'stzh-button--is-expanded': this.a11yExpanded,\n      'stzh-button--not-hyphenated': this.noHyphenation,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : '-1'} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== 'undefined'\n              ? (this.a11yDisabled ? 'true' : 'false') : null}\n            aria-expanded={typeof this.a11yExpanded !== 'undefined'\n              ? (this.a11yExpanded ? 'true' : 'false') : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === 'radio' ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n            >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== 'undefined'\n                  ? (this.a11yDisabled ? 'true' : 'false') : null}\n                aria-expanded={typeof this.a11yExpanded !== 'undefined'\n                  ? (this.a11yExpanded ? 'true' : 'false') : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== 'undefined'\n                ? (this.a11yDisabled ? 'true' : 'false') : null}\n              aria-expanded={typeof this.a11yExpanded !== 'undefined'\n                ? (this.a11yExpanded ? 'true' : 'false') : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ea57718b.js → p-43cfa441.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { d as defineCustomElement$3 } from './p-011c5d9b.js';
 import { d as defineCustomElement$2 } from './p-6e55dee9.js';
-import { d as defineCustomElement$1 } from './p-435413fc.js';
+import { d as defineCustomElement$1 } from './p-b115288a.js';
 
 const stzhAppNavCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}";
 
@@ -70,4 +70,4 @@ function defineCustomElement() {
 
 export { StzhAppNav as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-ea57718b.js.map
+//# sourceMappingURL=p-43cfa441.js.map

package/dist/components/{p-ea57718b.js.map → p-43cfa441.js.map}

@@ -1 +1 @@
-{"file":"p-ea57718b.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,2yGAA2yG;;MCWpzG,UAAU;;;;;IAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;MACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC5B,SAAS,EAAE,cAAc;QACzB,IAAI;QACJ,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;;iBAtBgC,EAAE;;;EAUpC,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAUD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,OAAO,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA,EAAE,IACjE,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space('medium') space('large') space('xlarge');\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link, .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space('xlarge');\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font('heavy');\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font('medium');\n    @include fontSize('pico');\n\n    @include mq($from: medium) {\n      @include fontSize('milli');\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space('xsmall');\n      margin-top: 0;\n    }\n  }\n}\n","import {Component, Prop, h, Host, Element, Event, EventEmitter} from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport {StzhAppNavItem, StzhAppNavItemClickEvent} from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\n\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n          {this.items.map((item) => (\n            <stzh-link\n              class=\"stzh-app-nav__link\"\n              active={item.active}\n              role=\"listitem\"\n              a11y-current={item.a11yCurrent}\n              href={item.href}\n              badge={item.badge}\n              badgeType={item.badgeType}\n              icon={item.icon}\n              link-id={item.id}\n              onClick={(e: MouseEvent) => { this.handleAppNavItemClick(e, item) }}\n              >{item.text}\n            </stzh-link>\n          ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-43cfa441.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,2yGAA2yG;;MCWpzG,UAAU;;;;;IAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;MACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC5B,SAAS,EAAE,cAAc;QACzB,IAAI;QACJ,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;;iBAtBgC,EAAE;;;EAUpC,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAUD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,OAAO,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA,EAAE,IACjE,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space('medium') space('large') space('xlarge');\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link, .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space('xlarge');\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font('heavy');\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font('medium');\n    @include fontSize('pico');\n\n    @include mq($from: medium) {\n      @include fontSize('milli');\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space('xsmall');\n      margin-top: 0;\n    }\n  }\n}\n","import {Component, Prop, h, Host, Element, Event, EventEmitter} from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport {StzhAppNavItem, StzhAppNavItemClickEvent} from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\n\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n          {this.items.map((item) => (\n            <stzh-link\n              class=\"stzh-app-nav__link\"\n              active={item.active}\n              role=\"listitem\"\n              a11y-current={item.a11yCurrent}\n              href={item.href}\n              badge={item.badge}\n              badgeType={item.badgeType}\n              icon={item.icon}\n              link-id={item.id}\n              onClick={(e: MouseEvent) => { this.handleAppNavItemClick(e, item) }}\n              >{item.text}\n            </stzh-link>\n          ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9657b8a5.js → p-442c9d35.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-96cf9087.js';
 import { d as defineCustomElement$7 } from './p-011c5d9b.js';
-import { d as defineCustomElement$6 } from './p-6b2b1e7b.js';
-import { d as defineCustomElement$5 } from './p-b107b48c.js';
+import { d as defineCustomElement$6 } from './p-d264ac6b.js';
+import { d as defineCustomElement$5 } from './p-c2d7b984.js';
 import { d as defineCustomElement$4 } from './p-3aa7c37c.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';
-import { d as defineCustomElement$2 } from './p-435413fc.js';
+import { d as defineCustomElement$2 } from './p-b115288a.js';
 import { d as defineCustomElement$1 } from './p-8b576ec4.js';
 
 const stzhPoicardCss = ".sc-stzh-poicard-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-poicard-h,[stzh-hidden].sc-stzh-poicard-h{display:none}.sc-stzh-poicard-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h *.sc-stzh-poicard,.sc-stzh-poicard-h *.sc-stzh-poicard::before,.sc-stzh-poicard-h *.sc-stzh-poicard::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-poicard-h .has-focus.sc-stzh-poicard{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard{outline-style:none !important}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard::-moz-focus-inner{border:0 !important}.sc-stzh-poicard-h{--background-color:var(--stzh-color-grey10);--hover-background-color:var(--stzh-color-grey20);--title-color:var(--stzh-color-primary70);--title-hover-color:var(--stzh-color-primary80);--title-background-color:var(--stzh-color-secondary20);--title-hover-background-color:var(--stzh-color-secondary30)}.stzh-poicard.sc-stzh-poicard{display:block;background-color:var(--background-color);text-decoration:none;height:100%}.stzh-poicard.sc-stzh-poicard:hover{--title-color:var(--title-hover-color);--title-background-color:var(--title-hover-background-color);--background-color:var(--hover-background-color)}.stzh-poicard__content.sc-stzh-poicard{display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-poicard__content-with-icon.sc-stzh-poicard,.stzh-poicard__content-with-badge.sc-stzh-poicard{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-badge.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-grey80)}.stzh-poicard__content-head.sc-stzh-poicard{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);--color:var(--title-color);background-color:var(--title-background-color)}.stzh-poicard__content-head.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary)}.stzh-poicard__content-title.sc-stzh-poicard{width:100%;--color:var(--stzh-color-grey80)}.stzh-poicard.sc-stzh-poicard:hover .stzh-poicard__content-title.sc-stzh-poicard{--color:var(--stzh-color-black)}.stzh-poicard__content-body.sc-stzh-poicard{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}";
@@ -105,4 +105,4 @@ function defineCustomElement() {
 
 export { StzhPoicard as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9657b8a5.js.map
+//# sourceMappingURL=p-442c9d35.js.map

package/dist/components/{p-9657b8a5.js.map → p-442c9d35.js.map}

@@ -1 +1 @@
-{"file":"p-9657b8a5.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,iiGAAiiG;;MCW3iG,WAAW;;;;IAsBd,SAAI,GAAG;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B,CAAC;gBApB2C,EAAE;;EAI/C,WAAW,CAAC,QAAsC;IAChD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACnC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAMD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,wBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,KAAK,GAAa,EAClC,qBAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,qBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;MAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,iBACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-442c9d35.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,iiGAAiiG;;MCW3iG,WAAW;;;;IAsBd,SAAI,GAAG;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B,CAAC;gBApB2C,EAAE;;EAI/C,WAAW,CAAC,QAAsC;IAChD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACnC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAMD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,wBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,KAAK,GAAa,EAClC,qBAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,qBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;MAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,iBACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-4f83ed4e.js → p-49b02465.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { d as defineCustomElement$5 } from './p-011c5d9b.js';
 import { d as defineCustomElement$4 } from './p-97ee5f24.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';
-import { d as defineCustomElement$2 } from './p-435413fc.js';
+import { d as defineCustomElement$2 } from './p-b115288a.js';
 import { d as defineCustomElement$1 } from './p-8a335b22.js';
 
 const stzhCardlistCss = ".sc-stzh-cardlist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cardlist-h,[stzh-hidden].sc-stzh-cardlist-h{display:none}.sc-stzh-cardlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h *.sc-stzh-cardlist,.sc-stzh-cardlist-h *.sc-stzh-cardlist::before,.sc-stzh-cardlist-h *.sc-stzh-cardlist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cardlist-h .has-focus.sc-stzh-cardlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist{outline-style:none !important}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist::-moz-focus-inner{border:0 !important}.sc-stzh-cardlist-h{--description-color:var(--stzh-cardlist-description-color, inherit);--background-color:var(--stzh-cardlist-background-color, inherit)}.stzh-cardlist__cards.sc-stzh-cardlist{display:grid;gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-ultra)}}.stzh-cardlist__header.sc-stzh-cardlist{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-cardlist__header.sc-stzh-cardlist{flex-direction:row}}.stzh-cardlist__footer.sc-stzh-cardlist:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist__footer.sc-stzh-cardlist:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist__footer.sc-stzh-cardlist:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist__footer.sc-stzh-cardlist:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);--stzh-icon-color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:0}}.stzh-cardlist__description.sc-stzh-cardlist-s>stzh-heading,.stzh-cardlist__description .sc-stzh-cardlist-s>stzh-heading{--color:var(--description-color)}.stzh-cardlist__switch.sc-stzh-cardlist{--color:inherit;align-self:end}.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:0}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.stzh-cardlist--max-3-cols.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.stzh-cardlist--max-3-cols.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-searchresults.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{background-color:var(--background-color);position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width));padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xbig)}}.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:auto;margin-right:auto;max-width:84.25rem}}";
@@ -147,4 +147,4 @@ function defineCustomElement() {
 
 export { StzhCardlist as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-4f83ed4e.js.map
+//# sourceMappingURL=p-49b02465.js.map

package/dist/components/{p-4f83ed4e.js.map → p-49b02465.js.map}

@@ -1 +1 @@
-{"file":"p-4f83ed4e.js","mappings":"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","names":[],"sources":["src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx"],"sourcesContent":[":host {\n  --description-color: var(--stzh-cardlist-description-color, inherit);\n  --background-color: var(--stzh-cardlist-background-color, inherit);\n}\n\n.stzh-cardlist {\n  &__cards {\n    display: grid;\n    gap: $gridGutter;\n\n    @include mq($from: small) {\n      gap: $gridGutterSmall;\n    }\n\n    @include mq($from: medium) {\n      gap: $gridGutterMedium;\n    }\n\n    @include mq($from: large) {\n      gap: $gridGutterLarge;\n    }\n\n    @include mq($from: ultra) {\n      gap: $gridGutterUltra;\n    }\n  }\n\n  &__header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) {\n      // was smallheader before\n      flex-direction: row;\n    }\n  }\n\n  &__footer:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-icon-color: #{$colorPrimary70};\n\n    &:not(:empty) {\n      margin-bottom: space('xsmall');\n\n      @include mq($from: medium) {\n        // was smallheader before\n        margin-bottom: 0;\n      }\n    }\n\n    ::slotted(stzh-heading) {\n      --color: var(--description-color);\n    }\n  }\n\n  &__switch {\n    --color: inherit;\n    align-self: end;\n  }\n\n  /* Has content inside header */\n\n  &:has(#{&}__description:not(:empty)) &__header,\n  &--has-toggle-link &__header {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  /* Subpages layout variant */\n\n  &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n    @include spaceCurve('row-gap', 'tiny');\n\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: 0;\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation[has-lead]) {\n    @include spaceCurve('row-gap', 'regular');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Teasers and Pi Teasers layout variant */\n\n  &--layout-teasers &__cards,\n  &--layout-pi-teasers &__cards {\n    @include spaceCurve('row-gap', 'medium');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  &--layout-teasers#{&}--max-3-cols &__cards,\n  &--layout-pi-teasers#{&}--max-3-cols &__cards {\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Searchresults layout variant */\n\n  &--layout-searchresults &__cards {\n    gap: space('xlarge');\n  }\n\n  /* Fullwidth layout variant (e.g. for MeinKonto dashboard) */\n\n  &--layout-fullwidth &__cards {\n    @include spaceCurve('gap', 'regular');\n  }\n\n  /* Pi Teasers variant */\n  &--layout-pi-teasers {\n    background-color: var(--background-color);\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    max-width: calc(100vw - var(--stzh-scrollbar-width));\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n  }\n\n  &--layout-pi-teasers &__header,\n  &--layout-pi-teasers &__cards {\n    @include container();\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from \"./stzh-cardlist.localization\";\n\n/**\n * @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n * @slot footer - Slot for footer elements\n */\n@Component({\n  tag: \"stzh-cardlist\",\n  styleUrl: \"stzh-cardlist.scss\",\n  scoped: true,\n})\nexport class StzhCardlist {\n  /** Translation strings */\n  @Prop() localization: StzhCardlistLocalizedText;\n\n  @Prop({ reflect: true }) layout: \"fullwidth\" | \"searchresults\" | \"subpages\" | \"teasers\" | \"pi-teasers\" = \"fullwidth\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Whether collapse/expand toggle link */\n  @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n  /** Whether sorting should be enabled */\n  @Prop() sortableEnabled: boolean = false;\n\n  /** HTML attribute that is used by the `toArray()` of sortable method */\n  @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n  /** Force maximum 3 columns layout instead of 4 */\n  @Prop() max3Columns: boolean = false;\n\n  @Element() element: HTMLStzhCardlistElement;\n\n  /** Collapse all event */\n  @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n  @Listen(\"stzhCollapse\")\n  collapseListener() {\n    this.updateCollapsedState();\n  }\n\n  @State() allCollapsed: boolean = false;\n  @State() isStzhAnchornavVisible: boolean = false;\n\n  private collapseClick = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    cards.forEach(card => {\n      if (card.collapsible) {\n        card.collapsed = !this.allCollapsed;\n      }\n    });\n\n    this.allCollapsed = !this.allCollapsed;\n\n    this.stzhCollapseAll.emit({\n      component: \"stzh-cardlist\",\n      allCollapsed: this.allCollapsed,\n    });\n  };\n\n  private updateCollapsedState = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    this.allCollapsed = !cards.some(card => !card.collapsed);\n  };\n\n  private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n    // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n    // if (\n    //   clonedStzhElement\n    //   && originalStzhElement\n    //   && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    // ) {\n    //   const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n    //   const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n    //   // copy every property that is not reflected to its attribute\n    //   clonedStzhElementCard.heading = originalStzhElementCard.heading;\n    //   clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n    //   clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n    //   clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n    //   clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    // }\n\n    // return clonedElement;\n\n    const card =\n      dragElement.tagName.toLowerCase() === \"stzh-card\" ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n    if (card) {\n      const originalElement = dragElement as HTMLStzhCardElement;\n      const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedElement.heading = originalElement.heading;\n      clonedElement.subtitle = originalElement.subtitle;\n      clonedElement.headerActions = originalElement.headerActions;\n      clonedElement.footerActions = originalElement.footerActions;\n      clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n      return clonedElement;\n    }\n  };\n\n  async componentWillLoad() {\n    this.isStzhAnchornavVisible =\n      document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n    }\n  }\n\n  componentDidLoad() {\n    this.isStzhAnchornavVisible =\n      document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n    this.updateCollapsedState();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-cardlist\": true,\n      \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n      \"stzh-cardlist--max-3-cols\": this.isStzhAnchornavVisible || this.max3Columns,\n      [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-cardlist__header\">\n            <div class=\"stzh-cardlist__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n            {this.showToggleLink && (\n              <stzh-link\n                class=\"stzh-cardlist__switch\"\n                icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n                label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n                onClick={this.collapseClick}\n              ></stzh-link>\n            )}\n          </div>\n\n          <stzh-sortable\n            disabled={!this.sortableEnabled}\n            dataIdAttribute={this.sortableDataIdAttribute}\n            ghostClone={this.sortableGhostClone}\n          >\n            <div class=\"stzh-cardlist__cards\" role=\"list\">\n              <slot></slot>\n            </div>\n          </stzh-sortable>\n\n          <div class=\"stzh-cardlist__footer\">\n            <stzh-container>\n              <slot name=\"footer\"></slot>\n            </stzh-container>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-49b02465.js","mappings":"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","names":[],"sources":["src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx"],"sourcesContent":[":host {\n  --description-color: var(--stzh-cardlist-description-color, inherit);\n  --background-color: var(--stzh-cardlist-background-color, inherit);\n}\n\n.stzh-cardlist {\n  &__cards {\n    display: grid;\n    gap: $gridGutter;\n\n    @include mq($from: small) {\n      gap: $gridGutterSmall;\n    }\n\n    @include mq($from: medium) {\n      gap: $gridGutterMedium;\n    }\n\n    @include mq($from: large) {\n      gap: $gridGutterLarge;\n    }\n\n    @include mq($from: ultra) {\n      gap: $gridGutterUltra;\n    }\n  }\n\n  &__header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) {\n      // was smallheader before\n      flex-direction: row;\n    }\n  }\n\n  &__footer:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-icon-color: #{$colorPrimary70};\n\n    &:not(:empty) {\n      margin-bottom: space('xsmall');\n\n      @include mq($from: medium) {\n        // was smallheader before\n        margin-bottom: 0;\n      }\n    }\n\n    ::slotted(stzh-heading) {\n      --color: var(--description-color);\n    }\n  }\n\n  &__switch {\n    --color: inherit;\n    align-self: end;\n  }\n\n  /* Has content inside header */\n\n  &:has(#{&}__description:not(:empty)) &__header,\n  &--has-toggle-link &__header {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  /* Subpages layout variant */\n\n  &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n    @include spaceCurve('row-gap', 'tiny');\n\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: 0;\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation[has-lead]) {\n    @include spaceCurve('row-gap', 'regular');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Teasers and Pi Teasers layout variant */\n\n  &--layout-teasers &__cards,\n  &--layout-pi-teasers &__cards {\n    @include spaceCurve('row-gap', 'medium');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  &--layout-teasers#{&}--max-3-cols &__cards,\n  &--layout-pi-teasers#{&}--max-3-cols &__cards {\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Searchresults layout variant */\n\n  &--layout-searchresults &__cards {\n    gap: space('xlarge');\n  }\n\n  /* Fullwidth layout variant (e.g. for MeinKonto dashboard) */\n\n  &--layout-fullwidth &__cards {\n    @include spaceCurve('gap', 'regular');\n  }\n\n  /* Pi Teasers variant */\n  &--layout-pi-teasers {\n    background-color: var(--background-color);\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    max-width: calc(100vw - var(--stzh-scrollbar-width));\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n  }\n\n  &--layout-pi-teasers &__header,\n  &--layout-pi-teasers &__cards {\n    @include container();\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from \"./stzh-cardlist.localization\";\n\n/**\n * @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n * @slot footer - Slot for footer elements\n */\n@Component({\n  tag: \"stzh-cardlist\",\n  styleUrl: \"stzh-cardlist.scss\",\n  scoped: true,\n})\nexport class StzhCardlist {\n  /** Translation strings */\n  @Prop() localization: StzhCardlistLocalizedText;\n\n  @Prop({ reflect: true }) layout: \"fullwidth\" | \"searchresults\" | \"subpages\" | \"teasers\" | \"pi-teasers\" = \"fullwidth\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Whether collapse/expand toggle link */\n  @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n  /** Whether sorting should be enabled */\n  @Prop() sortableEnabled: boolean = false;\n\n  /** HTML attribute that is used by the `toArray()` of sortable method */\n  @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n  /** Force maximum 3 columns layout instead of 4 */\n  @Prop() max3Columns: boolean = false;\n\n  @Element() element: HTMLStzhCardlistElement;\n\n  /** Collapse all event */\n  @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n  @Listen(\"stzhCollapse\")\n  collapseListener() {\n    this.updateCollapsedState();\n  }\n\n  @State() allCollapsed: boolean = false;\n  @State() isStzhAnchornavVisible: boolean = false;\n\n  private collapseClick = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    cards.forEach(card => {\n      if (card.collapsible) {\n        card.collapsed = !this.allCollapsed;\n      }\n    });\n\n    this.allCollapsed = !this.allCollapsed;\n\n    this.stzhCollapseAll.emit({\n      component: \"stzh-cardlist\",\n      allCollapsed: this.allCollapsed,\n    });\n  };\n\n  private updateCollapsedState = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    this.allCollapsed = !cards.some(card => !card.collapsed);\n  };\n\n  private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n    // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n    // if (\n    //   clonedStzhElement\n    //   && originalStzhElement\n    //   && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    // ) {\n    //   const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n    //   const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n    //   // copy every property that is not reflected to its attribute\n    //   clonedStzhElementCard.heading = originalStzhElementCard.heading;\n    //   clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n    //   clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n    //   clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n    //   clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    // }\n\n    // return clonedElement;\n\n    const card =\n      dragElement.tagName.toLowerCase() === \"stzh-card\" ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n    if (card) {\n      const originalElement = dragElement as HTMLStzhCardElement;\n      const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedElement.heading = originalElement.heading;\n      clonedElement.subtitle = originalElement.subtitle;\n      clonedElement.headerActions = originalElement.headerActions;\n      clonedElement.footerActions = originalElement.footerActions;\n      clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n      return clonedElement;\n    }\n  };\n\n  async componentWillLoad() {\n    this.isStzhAnchornavVisible =\n      document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n    }\n  }\n\n  componentDidLoad() {\n    this.isStzhAnchornavVisible =\n      document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n    this.updateCollapsedState();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-cardlist\": true,\n      \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n      \"stzh-cardlist--max-3-cols\": this.isStzhAnchornavVisible || this.max3Columns,\n      [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-cardlist__header\">\n            <div class=\"stzh-cardlist__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n            {this.showToggleLink && (\n              <stzh-link\n                class=\"stzh-cardlist__switch\"\n                icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n                label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n                onClick={this.collapseClick}\n              ></stzh-link>\n            )}\n          </div>\n\n          <stzh-sortable\n            disabled={!this.sortableEnabled}\n            dataIdAttribute={this.sortableDataIdAttribute}\n            ghostClone={this.sortableGhostClone}\n          >\n            <div class=\"stzh-cardlist__cards\" role=\"list\">\n              <slot></slot>\n            </div>\n          </stzh-sortable>\n\n          <div class=\"stzh-cardlist__footer\">\n            <stzh-container>\n              <slot name=\"footer\"></slot>\n            </stzh-container>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-6c754f8f.js → p-5107044d.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { w as waitForEvent } from './p-54bd842e.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-7e2354d0.js';
-import { h as hasSlot } from './p-073888ce.js';
+import { h as hasSlot } from './p-095fbf73.js';
 import { d as defineCustomElement$2 } from './p-011c5d9b.js';
 import { d as defineCustomElement$1 } from './p-6e55dee9.js';
 
@@ -316,4 +316,4 @@ function defineCustomElement() {
 
 export { StzhAccordionItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6c754f8f.js.map
+//# sourceMappingURL=p-5107044d.js.map