@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/p-9c59e8f6.js.map

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

package/dist/components/p-c22c1bb9.js

@@ -1,102 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-
-const stzhPiTeaserCss = "@charset \"UTF-8\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-h, [stzh-hidden].sc-stzh-pi-teaser-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-h {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-coolgrey10)\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image \" \"text text text text \"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image\"\n        \"text text text text text text text text\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image image image image image\"\n        \"text text text text text text text text text text text text\"\n    );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text text image image image image image image\"\n    );\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text\";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text\";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-lead]) .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser.sc-stzh-pi-teaser {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser__text.sc-stzh-pi-teaser {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser > img.sc-stzh-pi-teaser {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser__dateline.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser__title-link.sc-stzh-pi-teaser {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser__date.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}";
-const StzhPiTeaserStyle0 = stzhPiTeaserCss;
-
-const StzhPiTeaser = /*@__PURE__*/ proxyCustomElement(class StzhPiTeaser extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.stzhClick = createEvent(this, "stzhClick", 7);
-        this.handleCardClick = (originalEvent) => {
-            this.stzhClick.emit({
-                component: "stzh-pi-teaser",
-                originalEvent,
-                href: this.href,
-            });
-        };
-        this.href = undefined;
-        this.target = undefined;
-        this.analyticsId = undefined;
-        this.dateline = "";
-        this.heading = "";
-        this.imageSrc = undefined;
-        this.headingLevel = "3";
-        this.lead = "";
-        this.date = "";
-        this.contentSize = "M";
-        this.imagePosition = undefined;
-        this.isHero = undefined;
-    }
-    // private truncateLead(text: string, max: number): string {
-    //   console.log(max);
-    //   if (!text) return "";
-    //   if (text.length <= max) return text;
-    //   let cut = text.slice(0, max);
-    //   const backtracked = cut.replace(/\s+\S*$/, "");
-    //   if (backtracked.length >= Math.floor(max * 0.6)) {
-    //     cut = backtracked;
-    //   }
-    //   cut = cut.replace(/[\s.,;:!?\-–—]+$/, "");
-    //   return cut + "…";
-    // }
-    componentDidRender() {
-        requestAnimationFrame(() => {
-            var _a, _b;
-            const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
-            if (objectId) {
-                (_b = this.titleLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
-            }
-        });
-    }
-    renderHeading() {
-        const Heading = `h${this.headingLevel}`;
-        const TitleLink = this.href ? "a" : "button";
-        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
-    }
-    render() {
-        const hasLead = !!this.lead;
-        const hasImage = !!this.imageSrc && !!this.imagePosition;
-        const displayLead = this.lead;
-        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
-        // : "";
-        const classes = {
-            "stzh-pi-teaser": true,
-            "stzh-pi-teaser--has-lead": hasLead,
-            "stzh-pi-teaser--has-image": hasImage,
-        };
-        return (h(Host, { key: 'd9c3d58e879188890dd07823bb996f2de93651a2', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '47791c89f8cbe92744e387bf4cb8eba93c067ed4', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: 'aa88aa3f4552a95cac98acdc505faf510d4fdde6', class: "stzh-pi-teaser__image" }, h("img", { key: '786a92cef49dcb7a37f472be30ea4d55710f204e', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '0c49e95677fd68a72be31554fb4998a9b86ba08a', class: "stzh-pi-teaser__wrapper" }, h("div", { key: '324a03003b28d579fb46c7e047433b99e5ee453e', class: "stzh-pi-teaser__text" }, this.dateline && h("p", { key: 'e49a94c945e5d3e1e5a3d9efac84ef8550f8d310', class: "stzh-pi-teaser__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '0623aadddea2c2e163abeb7b4495f475cf12f331', class: "stzh-pi-teaser__lead-wrapper" }, h("div", { key: 'a7ab6f1d9a5a785f758815a7599ba7f1534dd2d3', class: "stzh-pi-teaser__lead" }, displayLead)), this.date && h("div", { key: '79f7849f4585f3f60c918e9379c28efbcc5d026a', class: "stzh-pi-teaser__date" }, this.date))))));
-    }
-    get element() { return this; }
-    static get style() { return StzhPiTeaserStyle0; }
-}, [2, "stzh-pi-teaser", {
-        "href": [513],
-        "target": [1],
-        "analyticsId": [1, "analytics-id"],
-        "dateline": [1],
-        "heading": [1],
-        "imageSrc": [1, "image-src"],
-        "headingLevel": [1, "heading-level"],
-        "lead": [1],
-        "date": [1],
-        "contentSize": [1, "content-size"],
-        "imagePosition": [1, "image-position"],
-        "isHero": [4, "is-hero"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-pi-teaser"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-pi-teaser":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, StzhPiTeaser);
-            }
-            break;
-    } });
-}
-
-export { StzhPiTeaser as S, defineCustomElement as d };
-
-//# sourceMappingURL=p-c22c1bb9.js.map

package/dist/components/p-c22c1bb9.js.map

@@ -1 +0,0 @@
-{"file":"p-c22c1bb9.js","mappings":";;AAAA,MAAM,eAAe,GAAG,inYAAinY,CAAC;AAC1oY,2BAAe,eAAe;;MCajB,YAAY;;;;;QAgDf,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBAvCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;;;;;;;;;;;;;;IAoCxD,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAC7C,QACE,WAAK,KAAK,EAAC,+BAA+B,IACxC,EAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpC,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAAG,IAAI,CAAC,OAAO,CAAO,CAC5E,CACJ,CACN,EACN;KACH;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;;QAI9B,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,OAAO;YACnC,2BAA2B,EAAE,QAAQ;SACtC,CAAC;QAEF,QACE,EAAC,IAAI,iEAAW,OAAO,eAAa,QAAQ,oBAAkB,IAAI,CAAC,aAAa,kBAAgB,IAAI,CAAC,WAAW,IAC9G,gEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAC/D,QAAQ,KACP,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP,EAED,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAE,sBAAsB,IAC/B,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACxE,IAAI,CAAC,aAAa,EAAE,EACrB,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAO,CACjD,EACL,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Prop() isHero: boolean;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  // private truncateLead(text: string, max: number): string {\n  //   console.log(max);\n  //   if (!text) return \"\";\n  //   if (text.length <= max) return text;\n\n  //   let cut = text.slice(0, max);\n  //   const backtracked = cut.replace(/\\s+\\S*$/, \"\");\n  //   if (backtracked.length >= Math.floor(max * 0.6)) {\n  //     cut = backtracked;\n  //   }\n  //   cut = cut.replace(/[\\s.,;:!?\\-–—]+$/, \"\");\n  //   return cut + \"…\";\n  // }\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser__wrapper\">\n            <div class={\"stzh-pi-teaser__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser__lead-wrapper\">\n                <div class=\"stzh-pi-teaser__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/stzh-components/p-07f2765c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as n,a as s,g as i}from"./p-ef5985a3.js";const a='@charset "UTF-8";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-h, [stzh-hidden].sc-stzh-pi-teaser-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-h {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-coolgrey10)\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "image image image image " "text text text text "\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "image image image image image image image image"\n        "text text text text text text text text"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "image image image image image image image image image image image image"\n        "text text text text text text text text text text text text"\n    );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "text text image image"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "text text text text text image image image"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      "text text text text text text image image image image image image"\n    );\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text text text text text";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: "text text text text text text text text text text text text";\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-lead]) .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser.sc-stzh-pi-teaser {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser__text.sc-stzh-pi-teaser {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser > img.sc-stzh-pi-teaser {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser__dateline.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser__title-link.sc-stzh-pi-teaser {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser__date.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}';const r=a;const h=class{constructor(n){e(this,n);this.stzhClick=t(this,"stzhClick",7);this.handleCardClick=e=>{this.stzhClick.emit({component:"stzh-pi-teaser",originalEvent:e,href:this.href})};this.href=undefined;this.target=undefined;this.analyticsId=undefined;this.dateline="";this.heading="";this.imageSrc=undefined;this.headingLevel="3";this.lead="";this.date="";this.contentSize="M";this.imagePosition=undefined;this.isHero=undefined}componentDidRender(){requestAnimationFrame((()=>{var e,t;const n=this.analyticsId||((e=this.headingTextElement)===null||e===void 0?void 0:e.innerText);if(n){(t=this.titleLinkElement)===null||t===void 0?void 0:t.setAttribute("s-object-id",n)}}))}renderHeading(){const e=`h${this.headingLevel}`;const t=this.href?"a":"button";return n("div",{class:"stzh-pi-teaser__title-wrapper"},n(e,{class:"stzh-pi-teaser__title"},n(t,{ref:e=>this.titleLinkElement=e,class:"stzh-pi-teaser__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},n("div",{ref:e=>this.headingTextElement=e},this.heading))))}render(){const e=!!this.lead;const t=!!this.imageSrc&&!!this.imagePosition;const i=this.lead;const a={"stzh-pi-teaser":true,"stzh-pi-teaser--has-lead":e,"stzh-pi-teaser--has-image":t};return n(s,{key:"d9c3d58e879188890dd07823bb996f2de93651a2","has-lead":e,"has-image":t,"image-position":this.imagePosition,"content-size":this.contentSize},n("article",{key:"47791c89f8cbe92744e387bf4cb8eba93c067ed4",class:a,"aria-label":this.heading,role:"listitem"},t&&n("div",{key:"aa88aa3f4552a95cac98acdc505faf510d4fdde6",class:"stzh-pi-teaser__image"},n("img",{key:"786a92cef49dcb7a37f472be30ea4d55710f204e",src:this.imageSrc,alt:"Example image"})),n("div",{key:"0c49e95677fd68a72be31554fb4998a9b86ba08a",class:"stzh-pi-teaser__wrapper"},n("div",{key:"324a03003b28d579fb46c7e047433b99e5ee453e",class:"stzh-pi-teaser__text"},this.dateline&&n("p",{key:"e49a94c945e5d3e1e5a3d9efac84ef8550f8d310",class:"stzh-pi-teaser__dateline"},this.dateline),this.renderHeading(),n("div",{key:"0623aadddea2c2e163abeb7b4495f475cf12f331",class:"stzh-pi-teaser__lead-wrapper"},n("div",{key:"a7ab6f1d9a5a785f758815a7599ba7f1534dd2d3",class:"stzh-pi-teaser__lead"},i)),this.date&&n("div",{key:"79f7849f4585f3f60c918e9379c28efbcc5d026a",class:"stzh-pi-teaser__date"},this.date)))))}get element(){return i(this)}};h.style=r;export{h as stzh_pi_teaser};
-//# sourceMappingURL=p-07f2765c.entry.js.map

package/dist/stzh-components/p-07f2765c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPiTeaserCss","StzhPiTeaserStyle0","StzhPiTeaser","this","handleCardClick","originalEvent","stzhClick","emit","component","href","componentDidRender","requestAnimationFrame","objectId","analyticsId","_a","headingTextElement","innerText","_b","titleLinkElement","setAttribute","renderHeading","Heading","headingLevel","TitleLink","h","class","ref","el","target","onClick","heading","render","hasLead","lead","hasImage","imageSrc","imagePosition","displayLead","classes","Host","key","contentSize","role","src","alt","dateline","date"],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Prop() isHero: boolean;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  // private truncateLead(text: string, max: number): string {\n  //   console.log(max);\n  //   if (!text) return \"\";\n  //   if (text.length <= max) return text;\n\n  //   let cut = text.slice(0, max);\n  //   const backtracked = cut.replace(/\\s+\\S*$/, \"\");\n  //   if (backtracked.length >= Math.floor(max * 0.6)) {\n  //     cut = backtracked;\n  //   }\n  //   cut = cut.replace(/[\\s.,;:!?\\-–—]+$/, \"\");\n  //   return cut + \"…\";\n  // }\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser__wrapper\">\n            <div class={\"stzh-pi-teaser__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser__lead-wrapper\">\n                <div class=\"stzh-pi-teaser__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,wlYACxB,MAAAC,EAAeD,E,MCaFE,EAAY,M,8DAgDfC,KAAAC,gBAAmBC,IACzBF,KAAKG,UAAUC,KAAK,CAClBC,UAAW,iBACXH,gBACAI,KAAMN,KAAKM,MACX,E,mFAtCuB,G,aAGD,G,0CAMoB,I,UAGvB,G,UAGA,G,iBAG8B,I,mDAoCrD,kBAAAC,GACEC,uBAAsB,K,QACpB,MAAMC,EAAWT,KAAKU,eAAeC,EAAAX,KAAKY,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,WAE9D,GAAIJ,EAAU,EACZK,EAAAd,KAAKe,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAeP,E,KAKzD,aAAAQ,GACE,MAAMC,EAAU,IAAIlB,KAAKmB,eACzB,MAAMC,EAAYpB,KAAKM,KAAO,IAAM,SACpC,OACEe,EAAA,OAAKC,MAAM,iCACTD,EAACH,EAAO,CAACI,MAAM,yBACbD,EAACD,EAAS,CACRG,IAAKC,GAAOxB,KAAKe,iBAAmBS,EACpCF,MAAM,6BACNhB,KAAMN,KAAKM,KACXmB,OAAQzB,KAAKyB,OACbC,QAAS1B,KAAKC,iBAEdoB,EAAA,OAAKE,IAAKC,GAAOxB,KAAKY,mBAAqBY,GAAwBxB,KAAK2B,W,CAOlF,MAAAC,GACE,MAAMC,IAAY7B,KAAK8B,KACvB,MAAMC,IAAa/B,KAAKgC,YAAchC,KAAKiC,cAC3C,MAAMC,EAAclC,KAAK8B,KAIzB,MAAMK,EAAU,CACd,iBAAkB,KAClB,2BAA4BN,EAC5B,4BAA6BE,GAG/B,OACEV,EAACe,EAAI,CAAAC,IAAA,sDAAWR,EAAO,YAAaE,EAAQ,iBAAkB/B,KAAKiC,cAAa,eAAgBjC,KAAKsC,aACnGjB,EAAA,WAAAgB,IAAA,2CAASf,MAAOa,EAAO,aAAcnC,KAAK2B,QAASY,KAAK,YACrDR,GACCV,EAAA,OAAAgB,IAAA,2CAAKf,MAAM,yBACTD,EAAA,OAAAgB,IAAA,2CAAKG,IAAKxC,KAAKgC,SAAUS,IAAI,mBAIjCpB,EAAA,OAAAgB,IAAA,2CAAKf,MAAM,2BACTD,EAAA,OAAAgB,IAAA,2CAAKf,MAAO,wBACTtB,KAAK0C,UAAYrB,EAAA,KAAAgB,IAAA,2CAAGf,MAAM,4BAA4BtB,KAAK0C,UAC3D1C,KAAKiB,gBACNI,EAAA,OAAAgB,IAAA,2CAAKf,MAAM,gCACTD,EAAA,OAAAgB,IAAA,2CAAKf,MAAM,wBAAwBY,IAEpClC,KAAK2C,MAAQtB,EAAA,OAAAgB,IAAA,2CAAKf,MAAM,wBAAwBtB,KAAK2C,S"}

package/dist/stzh-components/p-10e8dd7d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhContactCss","StzhContactStyle0","formatTel","tel","replace","StzhContact","this","_street","_streetInfo","_numbers","_emails","_availability","availabilityWatcher","newValue","JSON","parse","numbersWatcher","jsonParseException","emailsWatcher","streetWatcher","noArrayException","streetInfoWatcher","componentWillLoad","numbers","emails","availability","street","streetInfo","render","hasImage","hasSlot","element","hasAddress","address","hasAddons","hasLinks","classes","HeadingLevel","headingLevel","AvailabilityTitleElement","availabilityTitleLevel","isPerson","type","isOrganization","h","Host","key","class","itemscope","itemtype","itemprop","heading","name","mainHeading","level","mainHeadingLevel","htmlContent","personRole","curve","responsibilityTitle","innerHTML","responsibility","contactTitle","Fragment","length","map","postalCode","location","number","label","size","height","href","analyticsId","email","text","pobox","poboxHeading","poboxTitle","poboxPostalCode","poboxLocation","additionalInformation","availabilityTitle","item","weekday","hours","hour","index"],"sources":["src/components/CMS/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/CMS/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\" \"image image image image\"\n      \"responsibility responsibility responsibility responsibility\"\n      \"contactForm contactForm contactForm contactForm\" \"info info info info\"\n      \"availability availability availability availability\"\n      \"additional additional additional additional\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-contact-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n        \"image image image image . . . .\"\n        \"responsibility responsibility responsibility responsibility responsibility responsibility . .\"\n        \"contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm\"\n        \"info info info info availability availability availability availability\"\n        \"additional additional additional additional additional additional additional additional\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-contact-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[has-availability=\"false\"] {\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-contact-grid-template-areas,\n        \"heading heading heading heading heading heading heading heading\"\n          \"image image image image . . . .\"\n          \"responsibility responsibility responsibility responsibility responsibility responsibility . .\"\n          \"contactForm contactForm contactForm contactForm contactForm contactForm contactForm contactForm\"\n          \"info info info info info info info info\"\n          \"additional additional additional additional additional additional additional additional\"\n      );\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve(\"p1\");\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__main-heading {\n    grid-area: heading;\n\n    &:not(:empty) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n  &__main-heading-type {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"xxsmall\");\n\n      @include mq($from: small) {\n        padding-top: space(\"small\");\n        padding-bottom: space(\"xxsmall\");\n      }\n\n      @include mq($from: medium) {\n        padding-top: space(\"xsmall\");\n        padding-bottom: space(\"xsmall\");\n      }\n\n      @include mq($from: large) {\n        padding-top: space(\"small\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__main-heading-section {\n    &:not(:empty) {\n      margin-bottom: space(\"medium\");\n      padding-top: space(\"medium\");\n      padding-bottom: space(\"xxsmall\");\n\n      @include mq($from: small) {\n        margin-bottom: space(\"large\");\n        padding-top: space(\"large\");\n        padding-bottom: space(\"xxsmall\");\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space(\"xlarge\");\n        padding-top: space(\"xlarge\");\n        padding-bottom: space(\"xsmall\");\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n        padding-top: space(\"xxlarge\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__main-heading-text {\n    &:not(:empty) {\n      margin-bottom: space(\"xsmall\");\n    }\n  }\n\n  &__image-wrapper {\n    grid-area: image;\n    background-color: $colorSecondary20;\n  }\n\n  &__role {\n    @include fontSize(\"milli\");\n    @include font(\"medium\");\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__info {\n    grid-area: info;\n  }\n\n  &__responsibility {\n    grid-area: responsibility;\n\n    &:not(:empty) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__responsibility-text {\n    &:not(:empty) {\n      padding-bottom: space(\"xsmall\");\n\n      @include mq($from: small) {\n        padding-bottom: space(\"small\");\n      }\n      @include mq($from: medium) {\n        padding-bottom: space(\"medium\");\n      }\n      @include mq($from: large) {\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &__contact-form {\n    grid-area: contactForm;\n\n    @include spaceCurve(\"gap\", \"regular\");\n    display: grid;\n\n    ::slotted(*) {\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__additional {\n    grid-area: additional;\n\n    @include spaceCurve(\"gap\", \"regular\");\n    display: grid;\n\n    ::slotted(*) {\n      margin-top: space(\"xlarge\");\n      margin-bottom: space(\"xlarge\");\n\n      @include mq($from: large) {\n        margin-top: space(\"xxlarge\");\n        margin-bottom: space(\"xxlarge\");\n      }\n    }\n  }\n\n  &__heading,\n  &__name,\n  &__emails,\n  &__pobox,\n  &__availability-title {\n    &:not(:empty):not(:last-child) {\n      margin-bottom: space(\"xsmall\");\n    }\n  }\n\n  &__numbers {\n    white-space: nowrap;\n  }\n\n  &__number,\n  &__email {\n    display: flex;\n    align-items: center;\n    gap: space(\"xxsmall\");\n  }\n\n  &__heading,\n  &__name,\n  &__role,\n  &__availability-title {\n    @include fontCurve(\"p1\");\n    margin: 0px;\n  }\n\n  &__heading,\n  &__name.is-heading,\n  &__availability-title {\n    @include font(\"heavy\");\n  }\n\n  &__availability {\n    grid-area: availability;\n    margin-top: space(\"xlarge\");\n    @include spaceCurve(\"gap\", \"small\");\n\n    @include mq($from: medium) {\n      margin-top: 0px;\n    }\n  }\n\n  &__availability-list,\n  &__availability-hour-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__availability-list {\n    @include spaceCurve(\"gap\", \"small\");\n    display: grid;\n  }\n\n  &__availability-weekday {\n    @include fontCurve(\"p1\");\n  }\n\n  &__availability-hours {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: small) {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      column-gap: space(\"xsmall\");\n    }\n  }\n\n  &__availability-hours-separator {\n    width: 1px;\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  &--has-image &__image {\n    width: 64px;\n    height: 64px;\n\n    @include mq($from: small) {\n      width: 80px;\n      height: 80px;\n    }\n\n    @include mq($from: medium) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @include mq($from: large) {\n      width: 120px;\n      height: 120px;\n    }\n\n    @include mq($from: ultra) {\n      width: 140px;\n      height: 140px;\n    }\n  }\n\n  &__image-wrapper {\n    background-color: transparent;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../../index\";\n\nimport { hasSlot } from \"../../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot contact-form - slot for contact form\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true,\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Sub heading */\n  @Prop() subHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Resposibility title */\n  @Prop() responsibilityTitle: string;\n\n  /** Resposibility title */\n  @Prop() responsibility: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Person role */\n  @Prop() personRole: string;\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _streetInfo: string[] = [];\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Contact title */\n  @Prop() contactTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  /** Additional freetext */\n  @Prop() additionalInformation: string;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._numbers = JSON.parse(newValue);\n      } catch (jsonParseException) {\n        // Nothing to do here, just catching to prevent component from dying.\n      }\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._emails = JSON.parse(newValue);\n      } catch (jsonParseException) {\n        // Nothing to do here, just catching to prevent component from dying.\n      }\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n    const isPerson = this.type === \"Person\";\n    const isOrganization = this.type === \"Organization\";\n\n    return (\n      <Host has-availability={!!this.availability ? \"true\" : \"false\"}>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={(isOrganization && !this.heading) || (isPerson && !this.name) ? \"name\" : null}\n          >\n            <div class=\"stzh-contact__main-heading-section\">\n              {this.mainHeading ? (\n                <stzh-heading level={this.mainHeadingLevel} htmlContent={this.mainHeading}/>\n              ) : (\n                <slot name=\"main-heading\"></slot>\n              )}\n            </div>\n            <div class={isPerson && \"stzh-contact__main-heading-text\"}>\n              {this.personRole && isPerson && (\n                <stzh-heading curve=\"h3\" level=\"3\">\n                  <span class=\"stzh-contact__role\">{this.personRole}</span>\n                </stzh-heading>\n              )}\n              {((isPerson && this.name) || (isOrganization && this.heading)) && (\n                <div class=\"stzh-contact__main-heading-type\">\n                  {this.name && isPerson && (\n                    <stzh-heading level='3' curve='h3' htmlContent={this.name}/>\n                  )}\n                  {this.heading && isOrganization && (\n                    <stzh-heading level={this.headingLevel} htmlContent={this.heading} />\n                  )}\n                </div>\n              )}\n            </div>\n            {isPerson && (\n              <div class=\"stzh-contact__image-wrapper\">\n                <div class=\"stzh-contact__image\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__responsibility\">\n            {this.responsibilityTitle && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.responsibilityTitle}\n                innerHTML={this.responsibilityTitle}\n              />\n            )}\n            {this.responsibility && (\n              <stzh-text class=\"stzh-contact__responsibility-text\">{this.responsibility}</stzh-text>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__contact-form\">\n            <slot name=\"contact-form\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.contactTitle && (\n              <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                {this.contactTitle}\n              </AvailabilityTitleElement>\n            )}\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address && (\n                <Fragment>\n                  {this._street.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\n                        </Fragment>\n                      )}\n                    </div>\n                  )}\n\n                  {this.postalCode && (\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  )}\n\n                  {this.location && (\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  )}\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            {this._numbers.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            <div class=\"stzh-contact__additional-information\" innerHTML={this.additionalInformation}></div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 && (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-177fe44b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,a as i}from"./p-ef5985a3.js";const e=".sc-stzh-linklist-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-linklist-h,[stzh-hidden].sc-stzh-linklist-h{display:none}.sc-stzh-linklist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-linklist-h *.sc-stzh-linklist,.sc-stzh-linklist-h *.sc-stzh-linklist::before,.sc-stzh-linklist-h *.sc-stzh-linklist::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-linklist-h .has-focus.sc-stzh-linklist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-linklist-h .stzh-fylingfocus-focused.sc-stzh-linklist{outline-style:none !important}.sc-stzh-linklist-h .stzh-fylingfocus-focused.sc-stzh-linklist::-moz-focus-inner{border:0 !important}[padding-bottom=false].sc-stzh-linklist-h .stzh-linklist.sc-stzh-linklist{padding-bottom:0}.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-large);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xxsmall);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)}@media screen and (min-width: 600px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-linklist__heading.sc-stzh-linklist{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--stzh-space-small);overflow:visible}@media screen and (min-width: 600px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-linklist__wrapper.sc-stzh-linklist{row-gap:var(--stzh-space-xsmall)}}";const n=e;const l=class{constructor(s){t(this,s);this.heading=undefined;this.headingLevel="3";this.paddingBottom=true;this.items=[]}render(){const t={"stzh-linklist":true};return s(i,{key:"f19b2d717ab47294b13615ebbbd5c287860d5bad","padding-bottom":this.paddingBottom},s("div",{key:"fcb8a67146c4a981534b62aba8bb40582172ce1e",class:t},s("div",{key:"9bf487f10a02a80c419d4f83c882f00010385965",class:"stzh-linklist__wrapper"},this.heading&&s("div",{key:"8dc142caf251cdeddedbc223ddf0994bcc517efd",class:"stzh-linklist__heading"},s("stzh-heading",{key:"bbae931c073d7834e00a7b636846a5aeb8f79ac9",level:this.headingLevel},this.heading)),s("div",{key:"cc72af1e813ab35d91c52299024f38a389c6ef54",class:"stzh-linklist__list"},s("stzh-datalist",{key:"3e27fb4f2ed5169cf8cf08a1c09a95080a5d2bb8",verticalGap:"small",items:this.items})))))}};l.style=n;export{l as stzh_linklist};
-//# sourceMappingURL=p-177fe44b.entry.js.map

package/dist/stzh-components/p-177fe44b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhLinklistCss","StzhLinklistStyle0","StzhLinklist","render","classes","h","Host","key","this","paddingBottom","class","heading","level","headingLevel","verticalGap","items"],"sources":["src/components/CMS/stzh-linklist/stzh-linklist.scss?tag=stzh-linklist&encapsulation=scoped","src/components/CMS/stzh-linklist/stzh-linklist.tsx"],"sourcesContent":[":host {\n  &[padding-bottom=\"false\"] {\n    .stzh-linklist {\n      padding-bottom: 0;\n    }\n  }\n}\n\n.stzh-linklist {\n  @include spaceCurve(\"padding-bottom\", \"medium\");\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__heading {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    @include fontSize(\"centi\");\n    @include mq($from: small) {\n      @include fontSize(\"deci\");\n    }\n    @include mq($from: medium) {\n      @include fontSize(\"deca\");\n    }\n    @include mq($from: ultra) {\n      @include fontSize(\"hecto\");\n    }\n  }\n\n  &__wrapper {\n    @include gridGutter;\n    display: grid;\n    row-gap: space(\"small\");\n    @include mq($from: medium) {\n      row-gap: space(\"xsmall\");\n    }\n    overflow: visible;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { StzhDatalistItemEntry } from \"../../..\";\n\n@Component({\n  tag: \"stzh-linklist\",\n  styleUrl: \"stzh-linklist.scss\",\n  scoped: true,\n})\nexport class StzhLinklist {\n  /**Heading for the linklist*/\n  @Prop() heading: string;\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n  /**Whether the component had a padding-bottom or not\n   */\n  @Prop() paddingBottom: boolean = true;\n  /** The items that should be displayed in the link list */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n\n  render() {\n    const classes = {\n      \"stzh-linklist\": true,\n    };\n\n    return (\n      <Host padding-bottom={this.paddingBottom}>\n        <div class={classes}>\n          <div class=\"stzh-linklist__wrapper\">\n            {this.heading && (\n              <div class={\"stzh-linklist__heading\"}>\n                <stzh-heading level={this.headingLevel}>{this.heading}</stzh-heading>\n              </div>\n            )}\n            <div class=\"stzh-linklist__list\">\n              <stzh-datalist verticalGap=\"small\" items={this.items}></stzh-datalist>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,o8HACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,kEAIwC,I,mBAG9B,K,WAEiB,E,CAElD,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,EAAI,CAAAC,IAAA,4DAAiBC,KAAKC,eACzBJ,EAAA,OAAAE,IAAA,2CAAKG,MAAON,GACVC,EAAA,OAAAE,IAAA,2CAAKG,MAAM,0BACRF,KAAKG,SACJN,EAAA,OAAAE,IAAA,2CAAKG,MAAO,0BACVL,EAAA,gBAAAE,IAAA,2CAAcK,MAAOJ,KAAKK,cAAeL,KAAKG,UAGlDN,EAAA,OAAAE,IAAA,2CAAKG,MAAM,uBACTL,EAAA,iBAAAE,IAAA,2CAAeO,YAAY,QAAQC,MAAOP,KAAKO,W"}

package/dist/stzh-components/p-7fcdf0da.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,F as i,a as e,g as o}from"./p-ef5985a3.js";import{a}from"./p-30d100f4.js";const h=".sc-stzh-poilist-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-poilist-h,[stzh-hidden].sc-stzh-poilist-h{display:none}.sc-stzh-poilist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h *.sc-stzh-poilist,.sc-stzh-poilist-h *.sc-stzh-poilist::before,.sc-stzh-poilist-h *.sc-stzh-poilist::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-poilist-h .has-focus.sc-stzh-poilist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist{outline-style:none !important}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist::-moz-focus-inner{border:0 !important}.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-xsmall);display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 600px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-xlarge)}}.stzh-poilist__header.sc-stzh-poilist stzh-text.sc-stzh-poilist{--color:var(--stzh-color-grey80);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-large);display:grid}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{justify-content:center}}.stzh-poilist.sc-stzh-poilist stzh-dropdown.sc-stzh-poilist{--color:var(--stzh-color-primary90);--icon-color:var(--stzh-color-primary90);--icon-angle-color:var(--stzh-color-primary90)}";const r=h;const n=class{constructor(s){t(this,s);this.handleMoreClick=async()=>{this.loadingText=this.localization.dataLoading;this.isLoading=true;this.currentOffset++;const{data:t}=await a.get(this.getCurrentApiUrl());this.meta=t.meta;this.items=this.items.concat(t.items);this.isLoading=false};this.onSortChange=async t=>{this.activeSorting=t.detail.value;this.currentOffset=0;this.items=[];await this.apiWatcher(this.api)};this.localization=undefined;this.api=undefined;this.currentOffset=0;this.meta=undefined;this.items=[];this.isLoading=true;this.dropdownOptions=[];this.activeSorting=undefined;this.latitude=47.3714332;this.longitude=8.542093;this.geopositionError="";this.loadingText=""}async apiWatcher(t){this.loadingText=this.localization.dataLoading;if(!t){return}const{data:s}=await a.get(this.getCurrentApiUrl());this.meta=s.meta;this.items=s.items;this.isLoading=false}getCurrentApiUrl(){return`${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`}getNumberOfLoadedItems(){if(this.meta.currentPage!==this.meta.totalPages){return this.meta.itemsPerPage*this.meta.currentPage}else{return this.meta.totalItems}}async getUserPosition(){this.loadingText=this.localization.geopositionLoading;try{const t=await this.getPositionAsync();this.latitude=t.coords.latitude;this.longitude=t.coords.longitude}catch(t){console.error("geopositionNotFoundException",t);this.geopositionError=this.localization.geopositionError}}getPositionAsync(){return new Promise(((t,s)=>{if(navigator.geolocation){navigator.geolocation.getCurrentPosition((s=>t(s)),(t=>s(t)))}else{s(new Error("Geolocation is not supported by this browser."))}}))}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"poilist")}this.dropdownOptions=[{text:this.localization.sortByDistance,value:"distance"},{text:this.localization.sortByName,value:"name"}];this.activeSorting=this.dropdownOptions[0].value}async componentDidLoad(){await this.getUserPosition();await this.apiWatcher(this.api)}render(){const t={"stzh-poilist":true};return s(e,{key:"7d648ed46e8481ca8aaec8d2b37d44954b1a4de1"},s("div",{key:"80559e594a82d6d7671165d3cf2add6f1d6ea8ac",class:t},s("stzh-overlay",{key:"2ee98f49b657df61a1e3e8dd890cb60ee465a9c9",open:this.isLoading},s("stzh-loader",{key:"2af6824f0565b9a6c3a5585abf549cd3361b2637",label:this.loadingText})),this.geopositionError&&s("stzh-message",{key:"db6a3140e58c0e3d5f18194f81154f217130eb22",type:"error",label:this.geopositionError}),(this.items.length>0||this.meta)&&s(i,{key:"b1c3ee7415f8c7bb7ef505c574a061d7f9ffb4da"},s("div",{key:"eba2dd1034a949af1b1421a2144834415179f0ac",class:"stzh-poilist__header"},s("stzh-text",{key:"ad8881c73de849cd8d4351c1969ab461d3948a7b",size:"micro"},this.getNumberOfLoadedItems()," ",this.localization.of," ",this.meta.totalItems),s("stzh-dropdown",{key:"453c84cd239904f33cc469dd5b20ade08a4592e4",label:"Sortierung","hide-optional":true,variant:"plain",noSearch:true,inline:true,noWrap:true,onStzhChange:this.onSortChange,items:Array.isArray(this.activeSorting)?this.activeSorting:[this.activeSorting],options:this.dropdownOptions})),s("stzh-cardlist",{key:"bfcc59f45401faab89a930b37888f5a01c829390",layout:"teasers"},this.items.map((t=>s("stzh-poicard",{item:t})))),this.meta.currentPage!==this.meta.totalPages&&s("div",{key:"54d2983e728c727933dde485bdf5ba5fa1dae2f6",class:"stzh-poilist__show-more"},s("stzh-button",{key:"51d5a36230815c9982b182bfaec5e23ae9da9d56",variant:"secondary",label:this.localization.showMore,onClick:this.handleMoreClick})))))}get element(){return o(this)}static get watchers(){return{api:["apiWatcher"]}}};n.style=r;export{n as stzh_poilist};
-//# sourceMappingURL=p-7fcdf0da.entry.js.map

package/dist/stzh-components/p-84f8a7c4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPiTeaserLayoutCss","StzhPiTeaserLayoutStyle0","RubrickSize","getRubrickSize","length","xxxsmall","xxsmall","xsmall","small","medium","large","StzhPiTeaserLayout","this","mediaChangeHandler","isSmall","media","matches","isMedium","isLarge","isUltra","componentDidLoad","contentList","slice","variant","hasSide","paddingNeeded","Math","max","Array","fill","type","connectedCallback","addMediaChangeListener","render","isRubrick","rubrickSize","Heading","headingLevel","classes","hasHeading","heading","bottomSlotUsed","hasSlot","element","contentSizeBehavior","index","big","sideSize","leadBehavior","lead","imageSrc","noImage","undefined","imageBehavior","h","teaserClasses","Host","amount","class","level","map","teaser","key","href","dateline","date","contentSize","imagePosition","isHero","name"],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                isHero={!isRubrick}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-8dccb0a9.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as i,h as e,a as o,g as a}from"./p-ef5985a3.js";const t=".sc-stzh-imagecomparison-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-imagecomparison-h,[stzh-hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}@media print{.sc-stzh-imagecomparison-h{page-break-inside:avoid;break-inside:avoid}}.sc-stzh-imagecomparison-h.sc-stzh-imagecomparison-s>*,.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sc-stzh-imagecomparison-h.sc-stzh-imagecomparison-s>[slot=image-after],.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{clip-path:polygon(calc(var(--exposure) + var(--divider-width) / 2) 0, 100% 0, 100% 100%, calc(var(--exposure) + var(--divider-width) / 2) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";const r=t;const c=class{constructor(e){s(this,e);this.stzhChange=i(this,"stzhChange",7);this.handleInput=s=>{let i=this.inputElement.value;this.value=Number(i);this.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:s,value:this.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.value=50;this.label=undefined;this.a11yDescribedby=""}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")}}render(){const s={"stzh-imagecomparison":true};return e(o,{key:"5ec8b3486d05bcd51dff6597ed4bddb36a017ed1","aria-roledescription":this.localization.label,style:{"--exposure":`${this.value.toString()}%`}},e("div",{key:"b399166cc4cd6561cbb8d4ac9a6f0f079fcea0c2",class:s},e("div",{key:"952d7d757bdb79321c75de42eaa7c3024412ea7e",class:"stzh-imagecomparison__element"},e("slot",{key:"8777dd660b8560e85fe6af28483b1d96851f8649",name:"image-before"}),e("slot",{key:"3888e1e7735c0bc7e17976246dc4ca2e5a5e1d43",name:"image-after"}),e("label",{key:"6b8a7e171b03fd209802a5aabbf172b883c29767",class:"stzh-imagecomparison__label","aria-label":this.label||this.localization.label,"aria-describedby":this.a11yDescribedby||null},e("div",{key:"28aef0c39454210025e9c0b01cf6748f7ab547d4",class:"stzh-imagecomparison__slider-icon-wrapper"},e("stzh-icon",{key:"fa306a72f5cfa93c2e9669ae9c287d3cb3bc7f97",class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),e("stzh-icon",{key:"0e1704f92d90e62fef416f158eb49e66ac20ccb8",class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),e("div",{key:"003e717f1e7be16ae23decc09d81f4647effb1a1",class:"stzh-imagecomparison__slider-line"}),e("input",{key:"f77dadd07395dc77b115186894356e607abf3a80",type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:s=>this.inputElement=s,onInput:this.handleInput})),e("div",{key:"61e45cfe31af58c08481f10f0e8817e38dc78a69",class:"stzh-imagecomparison__hint-wrapper"},e("span",{key:"301cd69584463420774b18acc7b5d1d71a3d1fde",class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:e("slot",{name:"hint-left"})),e("span",{key:"c56ffbc3c1ec832f22026741ca5761eba19fb35a",class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:e("slot",{name:"hint-right"}))))))}get element(){return a(this)}};c.style=r;export{c as stzh_imagecomparison};
-//# sourceMappingURL=p-8dccb0a9.entry.js.map