@oiz/stzh-components 3.8.0-beta2 → 3.8.1

package/dist/components/{p-4039ba55.js.map → p-e5edc56d.js.map}

@@ -1 +1 @@
-{"file":"p-4039ba55.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space('small');\n    padding: space('medium');\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize('milli');\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space('xxlarge');\n\n    @include mq($from: small) {\n      padding-right: space('xxxlarge');\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n  \n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\"\n  }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\"\n  }\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll(\n      'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n    );\n\n    buttons.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-e5edc56d.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space('small');\n    padding: space('medium');\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize('milli');\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space('xxlarge');\n\n    @include mq($from: small) {\n      padding-right: space('xxxlarge');\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n  \n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\"\n  }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\"\n  }\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll(\n      'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n    );\n\n    buttons.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e197115b.js → p-fa14b406.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-96cf9087.js';
 import { d as abbreviateText, g as getMeta } from './p-073888ce.js';
 import { d as defineCustomElement$5 } from './p-011c5d9b.js';
-import { d as defineCustomElement$4 } from './p-20c7b76b.js';
+import { d as defineCustomElement$4 } from './p-4d000b5b.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';
 import { d as defineCustomElement$2 } from './p-8b576ec4.js';
 import { d as defineCustomElement$1 } from './p-d2347259.js';
@@ -146,4 +146,4 @@ function defineCustomElement() {
 
 export { StzhShare as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-e197115b.js.map
+//# sourceMappingURL=p-fa14b406.js.map

package/dist/components/{p-e197115b.js.map → p-fa14b406.js.map}

@@ -1 +1 @@
-{"file":"p-e197115b.js","mappings":"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","names":[],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space('xxsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\n    \"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"\n  ];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  }\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url)\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\"\n      },\n      \"facebook\": {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\"\n      },\n      \"twitter\": {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\"\n      },\n      \"linkedin\": {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\"\n      },\n      \"xing\": {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\"\n      }\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map((service) =>\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip\n                  content={serviceData[service].text}\n                  size=\"small\"\n                >\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            )}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-fa14b406.js","mappings":"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","names":[],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space('xxsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\n    \"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"\n  ];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  }\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url)\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      \"mail\": {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\"\n      },\n      \"facebook\": {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\"\n      },\n      \"twitter\": {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\"\n      },\n      \"linkedin\": {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\"\n      },\n      \"xing\": {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\"\n      }\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map((service) =>\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip\n                  content={serviceData[service].text}\n                  size=\"small\"\n                >\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            )}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-actionset.js

@@ -1,4 +1,4 @@
-import { S as StzhActionset$1, d as defineCustomElement$1 } from './p-13c3319c.js';
+import { S as StzhActionset$1, d as defineCustomElement$1 } from './p-6956beb9.js';
 
 const StzhActionset = StzhActionset$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-amount.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { d as defineCustomElement$9 } from './p-011c5d9b.js';
-import { d as defineCustomElement$8 } from './p-20c7b76b.js';
+import { d as defineCustomElement$8 } from './p-4d000b5b.js';
 import { d as defineCustomElement$7 } from './p-a11f7571.js';
 import { d as defineCustomElement$6 } from './p-8ed7a61b.js';
 import { d as defineCustomElement$5 } from './p-6e55dee9.js';
-import { d as defineCustomElement$4 } from './p-bd7d15a6.js';
+import { d as defineCustomElement$4 } from './p-541e8c61.js';
 import { d as defineCustomElement$3 } from './p-d5ab066a.js';
 import { d as defineCustomElement$2 } from './p-8b576ec4.js';
 

package/dist/components/stzh-appointments.js

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { t as tc } from './p-f8d9bc8a.js';
-import { d as defineCustomElement$b, p as parseISODate, a as printISODate } from './p-4fec83e3.js';
+import { d as defineCustomElement$b, p as parseISODate, a as printISODate } from './p-16940157.js';
 import { h as hasSlot } from './p-073888ce.js';
 import { d as defineCustomElement$d } from './p-011c5d9b.js';
-import { d as defineCustomElement$c } from './p-20c7b76b.js';
-import { d as defineCustomElement$a } from './p-6e8c91f8.js';
+import { d as defineCustomElement$c } from './p-4d000b5b.js';
+import { d as defineCustomElement$a } from './p-37367a31.js';
 import { d as defineCustomElement$9 } from './p-8ed7a61b.js';
 import { d as defineCustomElement$8 } from './p-6e55dee9.js';
-import { d as defineCustomElement$7 } from './p-bd7d15a6.js';
+import { d as defineCustomElement$7 } from './p-541e8c61.js';
 import { d as defineCustomElement$6 } from './p-435413fc.js';
 import { d as defineCustomElement$5 } from './p-d5ab066a.js';
 import { d as defineCustomElement$4 } from './p-261d55a4.js';

package/dist/components/stzh-archivelist.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-96cf9087.js';
 import { d as defineCustomElement$7 } from './p-011c5d9b.js';
-import { d as defineCustomElement$6 } from './p-20c7b76b.js';
+import { d as defineCustomElement$6 } from './p-4d000b5b.js';
 import { d as defineCustomElement$5 } from './p-b107b48c.js';
 import { d as defineCustomElement$4 } from './p-3aa7c37c.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';

package/dist/components/stzh-banner.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { d as defineCustomElement$4 } from './p-011c5d9b.js';
-import { d as defineCustomElement$3 } from './p-20c7b76b.js';
+import { d as defineCustomElement$3 } from './p-4d000b5b.js';
 import { d as defineCustomElement$2 } from './p-6e55dee9.js';
 
 const stzhBannerCss = ".sc-stzh-banner-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-banner-h,[stzh-hidden].sc-stzh-banner-h{display:none}.sc-stzh-banner-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-banner-h *.sc-stzh-banner,.sc-stzh-banner-h *.sc-stzh-banner::before,.sc-stzh-banner-h *.sc-stzh-banner::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-banner-h .has-focus.sc-stzh-banner{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-banner-h .stzh-fylingfocus-focused.sc-stzh-banner{outline-style:none !important}.sc-stzh-banner-h .stzh-fylingfocus-focused.sc-stzh-banner::-moz-focus-inner{border:0 !important}.sc-stzh-banner-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--stzh-button-color:var(--stzh-color-primary);--stzh-button-background-color:var(--stzh-base-invert-color);--stzh-button-hover-color:var(--stzh-color-primary);--stzh-button-hover-background-color:var(--stzh-color-white80op);--stzh-button-disabled-color:var(--stzh-color-primary);--stzh-button-disabled-background-color:var(--stzh-color-white40op);--stzh-button-secondary-color:var(--stzh-base-invert-color);--stzh-button-secondary-background-color:var(--stzh-color-white40op);--stzh-button-secondary-hover-color:var(--stzh-base-invert-color);--stzh-button-secondary-hover-background-color:var(--stzh-color-white30op);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op);--stzh-button-tertiary-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-background-color:var(--stzh-color-white20op);--stzh-button-tertiary-disabled-color:var(--stzh-color-white70op);--stzh-button-active-color:var(--stzh-color-primary);--stzh-button-active-background-color:var(--stzh-color-white80op);--stzh-button-active-hover-color:var(--stzh-color-primary);--stzh-button-active-hover-background-color:var(--stzh-color-white80op);--background-color:var(--stzh-color-error60);--icon-color:var(--stzh-base-invert-color);--close-color:var(--stzh-base-invert-color);--label-color:var(--stzh-base-invert-color)}.stzh-banner.sc-stzh-banner{position:relative;box-shadow:var(--stzh-box-shadow-message);border-radius:var(--stzh-button-border-radius);background-color:var(--background-color)}.stzh-banner__container.sc-stzh-banner{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);padding-right:var(--stzh-space-xxxxlarge);margin-right:0}@media screen and (min-width: 600px){.stzh-banner__container.sc-stzh-banner{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-banner__container.sc-stzh-banner{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-banner__container.sc-stzh-banner{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-banner__container.sc-stzh-banner{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 600px){.stzh-banner__container.sc-stzh-banner{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-banner__container.sc-stzh-banner{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-banner__container.sc-stzh-banner{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-banner__container.sc-stzh-banner{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-banner__container.sc-stzh-banner{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-banner__container.sc-stzh-banner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-banner__container.sc-stzh-banner{padding-right:var(--stzh-space-big)}}@media screen and (min-width: 900px){.stzh-banner__container.sc-stzh-banner{padding-right:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-banner__container.sc-stzh-banner{padding-right:var(--stzh-space-huge)}}@media screen and (min-width: 600px){.stzh-banner__container.sc-stzh-banner{margin-right:0px}}@media screen and (min-width: 900px){.stzh-banner__container.sc-stzh-banner{margin-right:0px}}@media screen and (min-width: 1260px){.stzh-banner__container.sc-stzh-banner{margin-right:0px}}@media screen and (min-width: 1600px){.stzh-banner__container.sc-stzh-banner{margin-right:auto}}.stzh-banner__content.sc-stzh-banner{gap:var(--stzh-space-xsmall);display:flex}@media screen and (min-width: 600px){.stzh-banner__content.sc-stzh-banner{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-banner__content.sc-stzh-banner{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-banner__content.sc-stzh-banner{gap:var(--stzh-space-xlarge)}}.stzh-banner__icon-wrapper.sc-stzh-banner{display:flex;flex-shrink:0}.stzh-banner__icon.sc-stzh-banner{color:var(--icon-color)}.stzh-banner__text-wrapper.sc-stzh-banner{display:flex;flex-direction:column;flex-grow:1}@media screen and (min-width: 900px){.stzh-banner__text-wrapper.sc-stzh-banner{column-gap:var(--stzh-space-xsmall);row-gap:var(--stzh-space-xxsmall);flex-wrap:wrap;flex-direction:row}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-banner__text-wrapper.sc-stzh-banner{column-gap:var(--stzh-space-small)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-banner__text-wrapper.sc-stzh-banner{column-gap:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-banner__text-wrapper.sc-stzh-banner{column-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-banner__text-wrapper.sc-stzh-banner{row-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-banner__text-wrapper.sc-stzh-banner{row-gap:var(--stzh-space-small)}}.stzh-banner__label.sc-stzh-banner{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);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);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-banner__label.sc-stzh-banner{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-banner__close[variant=tertiary].sc-stzh-banner{--color:var(--close-color);position:absolute;top:0;right:0}@media screen and (min-width: 600px){.stzh-banner__close[variant=tertiary].sc-stzh-banner{top:0.625rem;right:0.625rem}}";

package/dist/components/stzh-button.js

@@ -1,4 +1,4 @@
-import { S as StzhButton$1, d as defineCustomElement$1 } from './p-20c7b76b.js';
+import { S as StzhButton$1, d as defineCustomElement$1 } from './p-4d000b5b.js';
 
 const StzhButton = StzhButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-calendar.js

@@ -1,4 +1,4 @@
-import { S as StzhCalendar$1, d as defineCustomElement$1 } from './p-4fec83e3.js';
+import { S as StzhCalendar$1, d as defineCustomElement$1 } from './p-16940157.js';
 
 const StzhCalendar = StzhCalendar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-card-searchresult.js

@@ -2,10 +2,10 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Ho
 import { h as hasSlot } from './p-073888ce.js';
 import { d as defineCustomElement$e } from './p-011c5d9b.js';
 import { d as defineCustomElement$d } from './p-d8bf4db5.js';
-import { d as defineCustomElement$c } from './p-20c7b76b.js';
+import { d as defineCustomElement$c } from './p-4d000b5b.js';
 import { d as defineCustomElement$b } from './p-b107b48c.js';
-import { d as defineCustomElement$a } from './p-47601c6a.js';
-import { d as defineCustomElement$9 } from './p-5efa3e34.js';
+import { d as defineCustomElement$a } from './p-62e6cd61.js';
+import { d as defineCustomElement$9 } from './p-96416f66.js';
 import { d as defineCustomElement$8 } from './p-6e55dee9.js';
 import { d as defineCustomElement$7 } from './p-435413fc.js';
 import { d as defineCustomElement$6 } from './p-4c7f2809.js';

package/dist/components/stzh-card-superteaser.js

@@ -2,10 +2,10 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Ho
 import { h as hasSlot } from './p-073888ce.js';
 import { d as defineCustomElement$e } from './p-011c5d9b.js';
 import { d as defineCustomElement$d } from './p-d8bf4db5.js';
-import { d as defineCustomElement$c } from './p-20c7b76b.js';
+import { d as defineCustomElement$c } from './p-4d000b5b.js';
 import { d as defineCustomElement$b } from './p-b107b48c.js';
-import { d as defineCustomElement$a } from './p-47601c6a.js';
-import { d as defineCustomElement$9 } from './p-5efa3e34.js';
+import { d as defineCustomElement$a } from './p-62e6cd61.js';
+import { d as defineCustomElement$9 } from './p-96416f66.js';
 import { d as defineCustomElement$8 } from './p-6e55dee9.js';
 import { d as defineCustomElement$7 } from './p-435413fc.js';
 import { d as defineCustomElement$6 } from './p-4c7f2809.js';

package/dist/components/stzh-card.js

@@ -1,4 +1,4 @@
-import { S as StzhCard$1, d as defineCustomElement$1 } from './p-9b0832ca.js';
+import { S as StzhCard$1, d as defineCustomElement$1 } from './p-70f62e8e.js';
 
 const StzhCard = StzhCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-checkboxgroup.js

@@ -21,12 +21,12 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
     this.init = () => {
       // update checkboxes
       this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
+      this.updateCheckboxesProperty("hide-optional", true);
       this.updateCheckboxesProperty("a11y-describedby", `${this.checkboxgroupId}-description`);
       this.updateCheckboxesProperty("invalid", this.invalid || this.errorUsed);
       this.watchValue(this.value);
       this.watchName(this.name);
       this.watchDisabled(this.disabled);
-      this.watchHideOptional(this.hideOptional);
     };
     this.localization = undefined;
     this.disabled = false;
@@ -34,6 +34,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
     this.legend = undefined;
     this.hideLegend = false;
     this.invalid = false;
+    this.required = false;
     this.hideOptional = false;
     this.value = "";
     this.defaultValue = [];
@@ -51,9 +52,6 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
   watchDisabled(newValue) {
     this.updateCheckboxesProperty("disabled", newValue);
   }
-  watchHideOptional(newValue) {
-    this.updateCheckboxesProperty("hideOptional", newValue);
-  }
   watchValue(newValue) {
     if (typeof newValue === "string") {
       this._value = JSON.parse(newValue);
@@ -115,13 +113,13 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
       this.value = this._value;
       this.stzhChange.emit({
         component: "stzh-checkboxgroup",
-        value: this._value,
+        value: this._value
       });
     }
   }
   get errorUsed() {
     var _a;
-    return hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   updateCheckboxesProperty(prop, value) {
     this.checkboxes.forEach((checkbox) => {
@@ -145,7 +143,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
     this.errorWatcher(this.error);
     this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkboxgroup');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "checkboxgroup");
     }
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
@@ -177,8 +175,8 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
     }
   }
   render() {
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
     const classes = {
       "stzh-checkboxgroup": true,
       "stzh-checkboxgroup--has-description": descriptionUsed,
@@ -190,13 +188,16 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
       [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction
     };
     return (h(Host, { "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { class: classes }, this.legend &&
-      h("legend", { class: "stzh-checkboxgroup__legend" }, this.legend), h("div", { class: "stzh-checkboxgroup__fields" }, h("slot", null)), h(StzhInputDescription, { classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+      h("legend", { class: "stzh-checkboxgroup__legend" }, this.legend, !this.hideOptional && (h("span", { class: "stzh-checkboxgroup__marker" }, h("span", { class: "stzh-checkboxgroup__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-checkboxgroup__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), h("div", { class: "stzh-checkboxgroup__fields" }, h("slot", null)), h(StzhInputDescription, { classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   get element() { return this; }
   static get watchers() { return {
     "name": ["watchName"],
     "disabled": ["watchDisabled"],
-    "hideOptional": ["watchHideOptional"],
     "value": ["watchValue"],
     "error": ["errorWatcher"],
     "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
@@ -209,6 +210,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
     "legend": [1],
     "hideLegend": [516, "hide-legend"],
     "invalid": [516],
+    "required": [516],
     "hideOptional": [516, "hide-optional"],
     "value": [1025],
     "defaultValue": [1040],
@@ -222,7 +224,6 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class StzhCheckboxg
   }, [[4, "reset", "resetListener"], [2, "stzhChange", "onChange"]], {
     "name": ["watchName"],
     "disabled": ["watchDisabled"],
-    "hideOptional": ["watchHideOptional"],
     "value": ["watchValue"],
     "error": ["errorWatcher"],
     "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]

package/dist/components/stzh-checkboxgroup.js.map

@@ -1 +1 @@
-{"file":"stzh-checkboxgroup.js","mappings":"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","names":["StzhCheckboxgroup"],"sources":["src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkboxgroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space('medium');\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('micro');\n    color: $headingColor;\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space('medium');\n    column-gap: space('xxlarge');\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  h,\n  Listen,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxgroupChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input checkbox elements */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Hide `(optional)` label */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** The selected values of the checkboxgroup  */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string[] = [];\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"hideOptional\")\n  watchHideOptional(newValue: boolean) {\n    this.updateCheckboxesProperty(\"hideOptional\", newValue)\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    if (JSON.stringify(this._value) !== JSON.stringify(this.value)) {\n      this.value = this._value;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxgroupChangeEvent>;\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  @Listen(\"stzhChange\", {capture: true})\n  onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n    if (event.detail.component === \"stzh-checkbox\") {\n      if (event.detail.checked) {\n        this._value.push(event.detail.value);\n      } else {\n        this._value = this._value.filter(value => value !== event.detail.value);\n      }\n      // stop propagating checkbox change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n      this.value = this._value;\n      this.stzhChange.emit({\n        component: \"stzh-checkboxgroup\",\n        value: this._value,\n      });\n    }\n  }\n\n  private get errorUsed() {\n    return hasSlot(this.element, 'error') || this._error?.length > 0;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the checkbox is not already disabled\n        if (!checkbox.disabled) {\n          checkbox.disabled = value;\n        }\n      } else if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private handleReset = async () => {\n    this.value = [...this.defaultValue];\n  }\n\n  private init = () => {\n    // update checkboxes\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n    this.updateCheckboxesProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchHideOptional(this.hideOptional);\n  }\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkboxgroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue.length > 0 ? this.defaultValue : [...this._value];\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": this.errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-checkboxgroup__legend\">\n              {this.legend}\n            </legend>\n          }\n          <div class=\"stzh-checkboxgroup__fields\">\n            <slot></slot>\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-checkboxgroup\"\n            id={`${this.checkboxgroupId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-checkboxgroup.js","mappings":"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","names":["StzhCheckboxgroup"],"sources":["src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkboxgroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space('medium');\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('micro');\n    color: $headingColor;\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space('medium');\n    column-gap: space('xxlarge');\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxgroupChangeEvent, StzhLocaleComponent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input checkbox elements */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** The selected values of the checkboxgroup  */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string[] = [];\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    if (JSON.stringify(this._value) !== JSON.stringify(this.value)) {\n      this.value = this._value;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxgroupChangeEvent>;\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  @Listen(\"stzhChange\", { capture: true })\n  onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n    if (event.detail.component === \"stzh-checkbox\") {\n      if (event.detail.checked) {\n        this._value.push(event.detail.value);\n      } else {\n        this._value = this._value.filter(value => value !== event.detail.value);\n      }\n      // stop propagating checkbox change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n      this.value = this._value;\n      this.stzhChange.emit({\n        component: \"stzh-checkboxgroup\",\n        value: this._value\n      });\n    }\n  }\n\n  private get errorUsed() {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the checkbox is not already disabled\n        if (!checkbox.disabled) {\n          checkbox.disabled = value;\n        }\n      } else if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private handleReset = async () => {\n    this.value = [...this.defaultValue];\n  };\n\n  private init = () => {\n    // update checkboxes\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n    this.updateCheckboxesProperty(\"hide-optional\", true);\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n    this.updateCheckboxesProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n  };\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkboxgroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue.length > 0 ? this.defaultValue : [...this._value];\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": this.errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-checkboxgroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkboxgroup__marker\">\n                  <span class=\"stzh-checkboxgroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkboxgroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          }\n          <div class=\"stzh-checkboxgroup__fields\">\n            <slot></slot>\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-checkboxgroup\"\n            id={`${this.checkboxgroupId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-contact.js

@@ -5,7 +5,7 @@ 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';
 
-const stzhContactCss = ".sc-stzh-contact-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-contact-h,[stzh-hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::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-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}@media screen and (min-width: 900px){[has-availability=false].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info info info info info\" \"additional additional additional additional additional additional additional additional\"\n    )}}[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(7, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading heading heading heading heading\" \"image info info info info info availability availability availability availability availability availability\" \"additional additional additional additional additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(11, minmax(0, 1fr))\n    )}}.stzh-contact.sc-stzh-contact{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);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{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)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xxsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}.stzh-contact--image-position-left.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{background-color:transparent}";
+const stzhContactCss = ".sc-stzh-contact-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-contact-h,[stzh-hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::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-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}@media screen and (min-width: 900px){[has-availability=false].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info info info info info\" \"additional additional additional additional additional additional additional additional\"\n    )}}[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n  );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\" \"image info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(7, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){[image-position=left].sc-stzh-contact-h{--grid-template-areas:var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading heading heading heading heading\" \"image info info info info info availability availability availability availability availability availability\" \"additional additional additional additional additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n        --stzh-contact-grid-template-columns,\n        auto repeat(11, minmax(0, 1fr))\n    )}}.stzh-contact.sc-stzh-contact{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);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{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)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__numbers.sc-stzh-contact{white-space:nowrap}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{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-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xxsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}.stzh-contact--image-position-left.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{background-color:transparent}";
 
 function formatTel(tel) {
   return tel.replace(/\s/g, "");