@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/stzh-components/{p-ddc0dc04.entry.js.map → p-48fb1f25.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhTimelineItemCss","StzhTimelineItemStyle0","ANIMATION_SHOW","keyframes","height","options","duration","easing","ANIMATION_HIDE","timelineItemCounter","StzhTimelineItem","this","toggledByMethod","focusedByInput","shiftPressed","onRootFocus","buttonElement","focus","onFocus","event","rootTabindex","stzhFocus","emit","component","originalEvent","onBlur","stzhBlur","handleFoldableChange","_event","foldableWatcher","foldable","handleHeaderClick","collapsible","toggle","open","show","timeline","onButtonKeydown","action","key","ctrlKey","preventDefault","setItemFocus","element","onContentKeydown","disabled","_foldable","waitForEvent","hide","openWatcher","newValue","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","handleKeydown","handleKeyup","componentWillLoad","timelineItemId","componentDidLoad","connectedCallback","closest","addEventListener","disconnectedCallback","removeEventListener","render","Heading","headingLevel","hasIcon","icon","hasSlot","classes","description","completed","h","Host","role","tabindex","class","id","onClick","ref","el","onKeyDown","type","analyticsId","heading","name","step","badge","badgeEmpty","label","badgeType"],"sources":["src/components/stzh-timeline-item/stzh-timeline-item.scss?tag=stzh-timeline-item&encapsulation=shadow","src/components/stzh-timeline-item/stzh-timeline-item.tsx"],"sourcesContent":["/**\n * @prop --icon-size: Icon size\n */\n\n:host {\n  @include spaceCurve(\"--content-padding-bottom\", \"regular\");\n  --trigger-size: 18px;\n  --icon-size: #{iconSize()};\n  --description-color: #{$colorBlack};\n  --heading-margin-bottom: #{space(\"medium\")};\n  --button-color: #{$colorPrimary70};\n  --button-background-color: transparent;\n  --button-font-size: var(\n    --stzh-timeline-nested-button-font-size,\n    var(--stzh-font-milli-font-size)\n  );\n  --button-line-height: var(\n    --stzh-timeline-nested-button-line-height,\n    var(--stzh-font-milli-heading-line-height)\n  );\n  --button-letter-spacing: var(\n    --stzh-timeline-nested-button-line-height,\n    normal\n  );\n  --bullet-color: #{$colorPrimary70};\n  --bullet-background-color: #{$colorGrey20};\n  --content-padding-top: var(--stzh-timeline-content-padding-top);\n  --content-padding-right: 0px;\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include mq($from: small) {\n    --button-font-size: var(\n      --stzh-timeline-nested-button-font-size,\n      var(--stzh-font-centi-font-size)\n    );\n    --button-line-height: var(\n      --stzh-timeline-nested-button-line-height,\n      var(--stzh-font-centi-heading-line-height)\n    );\n  }\n}\n\n/* Foldable */\n\n:host(:where([is-foldable])) {\n  --button-background-color: #{$colorGrey10};\n  --bullet-color: #{$colorBlack};\n  --bullet-background-color: #{$colorSecondary20};\n\n  --hover-button-background-color: #{$colorGrey20};\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: #{$colorSecondary40};\n\n  @include highContrast() {\n    --button-color: Highlight;\n\n    --hover-button-color: Highlight;\n  }\n}\n\n/* Open */\n\n:host(:where([open]:not([open=\"false\"]))) {\n  --heading-margin-bottom: 0px;\n}\n\n/* Foldable Open */\n\n:host(:where([is-foldable][open]:not([open=\"false\"]))) {\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorPrimary70};\n\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: #{$colorPrimary90};\n\n  @include highContrast() {\n    --button-color: SelectedItem;\n    --bullet-color: SelectedItem;\n\n    --hover-button-color: SelectedItem;\n    --hover-bullet-color: SelectedItem;\n  }\n}\n\n/* Completed */\n\n:host(:where([completed]:not([completed=\"false\"]))) {\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorSecondary60};\n\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n}\n\n/* Completed Foldable */\n\n:host(:where([is-foldable][open]:not([open=\"false\"]))) {\n  --hover-bullet-background-color: #{$colorSecondary70};\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorGrey60};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n}\n\n.stzh-timeline-item {\n  display: flex;\n  flex-direction: column;\n\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    font-size: var(--button-font-size);\n    line-height: var(--button-line-height);\n    letter-spacing: var(--button-letter-spacing);\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    border: none;\n    display: flex;\n    color: var(--button-color);\n    text-align: left;\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: default;\n\n    &:hover {\n      color: var(--hover-button-color);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button-inner {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    padding-top: space(\"xsmall\");\n    padding-bottom: space(\"xsmall\");\n    background-color: var(--button-background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    min-height: $timelineBulletSize;\n    padding-left: space(\"xsmall\");\n    padding-right: space(\"small\");\n  }\n\n  &__button:hover &__button-inner {\n    background-color: var(--hover-button-background-color);\n  }\n\n  &__button,\n  &__content-inner {\n    padding-left: $timelineBulletSize;\n  }\n\n  &__button-text {\n    @include font(\"heavy\");\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    @include spaceCurve(\"margin-left\", \"small\");\n    align-self: flex-start;\n    position: relative;\n    display: block;\n    width: var(--trigger-size);\n    height: var(--trigger-size);\n    margin-top: space(\"xxsmall\");\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: \"\";\n      display: block;\n      width: var(--trigger-size);\n      height: 2.5px;\n      transition-property: transform;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: currentColor;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__bullet {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $timelineBulletSize;\n    height: $timelineBulletSize;\n    color: var(--bullet-color);\n    background-color: var(--bullet-background-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button:hover &__bullet {\n    color: var(--hover-bullet-color);\n    background-color: var(--hover-bullet-background-color);\n  }\n\n  &__bullet-icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n  }\n\n  &__content {\n    // content padding of nested timelines\n    @include spaceCurve(\"--stzh-timeline-content-padding-top\", \"tiny\");\n    --stzh-timeline-nested-button-font-size: var(--stzh-font-micro-font-size);\n    --stzh-timeline-nested-button-line-height: var(\n      --stzh-font-micro-heading-line-height\n    );\n\n    overflow: hidden;\n\n    @include mq($from: medium) {\n      --stzh-timeline-nested-button-font-size: var(--stzh-font-milli-font-size);\n      --stzh-timeline-nested-button-line-height: var(\n        --stzh-font-milli-heading-line-height\n      );\n    }\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-right: var(--content-padding-right);\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -6px;\n  }\n\n  &__description {\n    @include fontCurve(\"caption\");\n    color: var(--description-color);\n    transition: color $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__heading {\n    margin-bottom: var(--heading-margin-bottom);\n    transition: margin-bottom $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__heading-text,\n  &__description {\n    display: block;\n  }\n\n  /* Foldable */\n\n  &--is-foldable &__button {\n    cursor: pointer;\n  }\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter, State, Listen } from \"@stencil/core\";\n\nimport {\n  StzhTimelineItemOpenEvent,\n  StzhTimelineItemOpenedEvent,\n  StzhTimelineItemCloseEvent,\n  StzhTimelineItemClosedEvent,\n  StzhTimelineItemFocusEvent,\n  StzhTimelineItemBlurEvent,\n  StzhTimelineFoldableChangeEvent,\n  StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ height: \"0\" }, { height: \"auto\" }],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ height: \"auto\" }, { height: \"0\" }],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet timelineItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-timeline-item\",\n  styleUrl: \"stzh-timeline-item.scss\",\n  shadow: true,\n})\nexport class StzhTimelineItem {\n  /** Whether folds are foldable (overwrites `foldable` property from `timeline` parent) */\n  @Prop() foldable: boolean;\n\n  /** Whether fold is collapsible (overwrites `collapsible` property from `timeline` parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether step should be marked as completed */\n  @Prop({ reflect: true }) completed: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Step number shown inside bullet by default */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhTimelineItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhTimelineItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTimelineItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhTimelineItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTimelineItemClosedEvent>;\n\n  /** Show timeline item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled || !this._foldable) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide timeline item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled || !this._foldable) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle timeline item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTimelineItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTimelineItemBlurEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"foldable\")\n  foldableWatcher(newValue: boolean) {\n    if (typeof newValue !== \"undefined\") {\n      this._foldable = newValue;\n    } else if (this.timeline) {\n      this._foldable = this.timeline.foldable;\n    }\n\n    if (!this._foldable) {\n      this.open = true;\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  @State() _foldable: boolean = false;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private timelineItemId: string;\n  private timeline: HTMLStzhTimelineElement;\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) {\n      // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-timeline-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-timeline-item\",\n      originalEvent: event,\n    });\n  };\n\n  private handleFoldableChange = (_event: CustomEvent<StzhTimelineFoldableChangeEvent>) => {\n    this.foldableWatcher(this.foldable);\n  };\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.timeline || this.timeline.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  };\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.timeline.setItemFocus(this.element, action);\n    }\n  };\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.timeline.setItemFocus(this.element, action);\n    }\n  };\n\n  componentWillLoad() {\n    this.timelineItemId = `stzh-timeline-item-${timelineItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.timeline = this.element.closest(\"stzh-timeline\");\n\n    if (this.timeline) {\n      this.timeline.addEventListener(\"stzhFoldableChange\", this.handleFoldableChange);\n    }\n\n    this.foldableWatcher(this.foldable);\n  }\n\n  disconnectedCallback() {\n    if (this.timeline) {\n      this.timeline.removeEventListener(\"stzhFoldableChange\", this.handleFoldableChange);\n      this.timeline = null;\n    }\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const hasIcon = !!this.icon || hasSlot(this.element, \"icon\");\n    const classes = {\n      \"stzh-timeline-item\": true,\n      \"stzh-timeline-item--has-description\": !!this.description,\n      \"stzh-timeline-item--is-open\": this.open,\n      \"stzh-timeline-item--is-disabled\": this.disabled,\n      \"stzh-timeline-item--is-foldable\": this._foldable,\n      \"stzh-timeline-item--is-completed\": this.completed,\n    };\n\n    return (\n      <Host\n        role=\"listitem\"\n        is-foldable={this._foldable}\n        tabindex={this.disabled ? null : this.rootTabindex}\n        onFocus={this.onRootFocus}\n      >\n        <div class={classes}>\n          <Heading\n            id={`${this.timelineItemId}-header`}\n            class=\"stzh-timeline-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-timeline-item__button\"\n              aria-controls={`${this.timelineItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              aria-disabled={!this._foldable ? \"true\" : \"false\"}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-timeline-item__bullet\">\n                {hasIcon || this.completed ? (\n                  <span class=\"stzh-timeline-item__bullet-icon-wrapper\">\n                    {this.icon || this.completed ? (\n                      <stzh-icon\n                        class=\"stzh-timeline-item__bullet-icon\"\n                        name={this.icon ? this.icon : \"checkmark\"}\n                      ></stzh-icon>\n                    ) : (\n                      <slot name=\"icon\"></slot>\n                    )}\n                  </span>\n                ) : (\n                  <span class=\"stzh-timeline-item__bullet-text\">{this.step}</span>\n                )}\n\n                {(this.badge || this.badgeEmpty) && (\n                  <stzh-badge class=\"stzh-timeline-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n                )}\n              </span>\n              <div class=\"stzh-timeline-item__button-inner\">\n                <span class=\"stzh-timeline-item__button-text\">\n                  <span class=\"stzh-timeline-item__heading-text\">{this.heading}</span>\n                  <span class=\"stzh-timeline-item__description\">{this.description}</span>\n                </span>\n                {this._foldable && <span class=\"stzh-timeline-item__button-icon\"></span>}\n              </div>\n            </button>\n          </Heading>\n          <div\n            id={`${this.timelineItemId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-timeline-item__content\"\n            aria-labelledby={`${this.timelineItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-timeline-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhTimelineItemCss","StzhTimelineItemStyle0","ANIMATION_SHOW","keyframes","height","options","duration","easing","ANIMATION_HIDE","timelineItemCounter","StzhTimelineItem","this","toggledByMethod","focusedByInput","shiftPressed","onRootFocus","buttonElement","focus","onFocus","event","rootTabindex","stzhFocus","emit","component","originalEvent","onBlur","stzhBlur","handleFoldableChange","_event","foldableWatcher","foldable","handleHeaderClick","collapsible","toggle","open","show","timeline","onButtonKeydown","action","key","ctrlKey","preventDefault","setItemFocus","element","onContentKeydown","disabled","_foldable","waitForEvent","hide","openWatcher","newValue","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","handleKeydown","handleKeyup","componentWillLoad","timelineItemId","componentDidLoad","connectedCallback","closest","addEventListener","disconnectedCallback","removeEventListener","render","Heading","headingLevel","hasIcon","icon","hasSlot","classes","description","completed","h","Host","role","tabindex","class","id","onClick","ref","el","onKeyDown","type","analyticsId","heading","name","step","badge","badgeEmpty","label","badgeType"],"sources":["src/components/stzh-timeline-item/stzh-timeline-item.scss?tag=stzh-timeline-item&encapsulation=shadow","src/components/stzh-timeline-item/stzh-timeline-item.tsx"],"sourcesContent":["/**\n * @prop --icon-size: Icon size\n */\n\n:host {\n  @include spaceCurve(\"--content-padding-bottom\", \"regular\");\n  --trigger-size: 18px;\n  --icon-size: #{iconSize()};\n  --description-color: #{$colorBlack};\n  --heading-margin-bottom: #{space(\"medium\")};\n  --button-color: #{$colorPrimary70};\n  --button-background-color: transparent;\n  --button-font-size: var(\n    --stzh-timeline-nested-button-font-size,\n    var(--stzh-font-milli-font-size)\n  );\n  --button-line-height: var(\n    --stzh-timeline-nested-button-line-height,\n    var(--stzh-font-milli-heading-line-height)\n  );\n  --button-letter-spacing: var(\n    --stzh-timeline-nested-button-line-height,\n    normal\n  );\n  --bullet-color: #{$colorPrimary70};\n  --bullet-background-color: #{$colorGrey20};\n  --content-padding-top: var(--stzh-timeline-content-padding-top);\n  --content-padding-right: 0px;\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include mq($from: small) {\n    --button-font-size: var(\n      --stzh-timeline-nested-button-font-size,\n      var(--stzh-font-centi-font-size)\n    );\n    --button-line-height: var(\n      --stzh-timeline-nested-button-line-height,\n      var(--stzh-font-centi-heading-line-height)\n    );\n  }\n}\n\n/* Foldable */\n\n:host(:where([is-foldable])) {\n  --button-background-color: #{$colorGrey10};\n  --bullet-color: #{$colorBlack};\n  --bullet-background-color: #{$colorSecondary20};\n\n  --hover-button-background-color: #{$colorGrey20};\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: #{$colorSecondary40};\n\n  @include highContrast() {\n    --button-color: Highlight;\n\n    --hover-button-color: Highlight;\n  }\n}\n\n/* Open */\n\n:host(:where([open]:not([open=\"false\"]))) {\n  --heading-margin-bottom: 0px;\n}\n\n/* Foldable Open */\n\n:host(:where([is-foldable][open]:not([open=\"false\"]))) {\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorPrimary70};\n\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: #{$colorPrimary90};\n\n  @include highContrast() {\n    --button-color: SelectedItem;\n    --bullet-color: SelectedItem;\n\n    --hover-button-color: SelectedItem;\n    --hover-bullet-color: SelectedItem;\n  }\n}\n\n/* Completed */\n\n:host(:where([completed]:not([completed=\"false\"]))) {\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorSecondary60};\n\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n}\n\n/* Completed Foldable */\n\n:host(:where([is-foldable][open]:not([open=\"false\"]))) {\n  --hover-bullet-background-color: #{$colorSecondary70};\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --bullet-color: #{$colorWhite};\n  --bullet-background-color: #{$colorGrey60};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-bullet-color: var(--bullet-color);\n  --hover-bullet-background-color: var(--bullet-background-color);\n}\n\n.stzh-timeline-item {\n  display: flex;\n  flex-direction: column;\n\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    font-size: var(--button-font-size);\n    line-height: var(--button-line-height);\n    letter-spacing: var(--button-letter-spacing);\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    border: none;\n    display: flex;\n    color: var(--button-color);\n    text-align: left;\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: default;\n\n    &:hover {\n      color: var(--hover-button-color);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button-inner {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    padding-top: space(\"xsmall\");\n    padding-bottom: space(\"xsmall\");\n    background-color: var(--button-background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    min-height: $timelineBulletSize;\n    padding-left: space(\"xsmall\");\n    padding-right: space(\"small\");\n  }\n\n  &__button:hover &__button-inner {\n    background-color: var(--hover-button-background-color);\n  }\n\n  &__button,\n  &__content-inner {\n    padding-left: $timelineBulletSize;\n  }\n\n  &__button-text {\n    @include font(\"heavy\");\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    @include spaceCurve(\"margin-left\", \"small\");\n    align-self: flex-start;\n    position: relative;\n    display: block;\n    width: var(--trigger-size);\n    height: var(--trigger-size);\n    margin-top: space(\"xxsmall\");\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: \"\";\n      display: block;\n      width: var(--trigger-size);\n      height: 2.5px;\n      transition-property: transform;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: currentColor;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__bullet {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $timelineBulletSize;\n    height: $timelineBulletSize;\n    color: var(--bullet-color);\n    background-color: var(--bullet-background-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button:hover &__bullet {\n    color: var(--hover-bullet-color);\n    background-color: var(--hover-bullet-background-color);\n  }\n\n  &__bullet-icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n  }\n\n  &__content {\n    // content padding of nested timelines\n    @include spaceCurve(\"--stzh-timeline-content-padding-top\", \"tiny\");\n    --stzh-timeline-nested-button-font-size: var(--stzh-font-micro-font-size);\n    --stzh-timeline-nested-button-line-height: var(\n      --stzh-font-micro-heading-line-height\n    );\n\n    overflow: hidden;\n\n    @include mq($from: medium) {\n      --stzh-timeline-nested-button-font-size: var(--stzh-font-milli-font-size);\n      --stzh-timeline-nested-button-line-height: var(\n        --stzh-font-milli-heading-line-height\n      );\n    }\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-right: var(--content-padding-right);\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -6px;\n  }\n\n  &__description {\n    @include fontCurve(\"caption\");\n    color: var(--description-color);\n    transition: color $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__heading {\n    margin-bottom: var(--heading-margin-bottom);\n    transition: margin-bottom $baseTransitionAnimationSpeed;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__heading-text,\n  &__description {\n    display: block;\n  }\n\n  /* Foldable */\n\n  &--is-foldable &__button {\n    cursor: pointer;\n  }\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter, State, Listen } from \"@stencil/core\";\n\nimport {\n  StzhTimelineItemOpenEvent,\n  StzhTimelineItemOpenedEvent,\n  StzhTimelineItemCloseEvent,\n  StzhTimelineItemClosedEvent,\n  StzhTimelineItemFocusEvent,\n  StzhTimelineItemBlurEvent,\n  StzhTimelineFoldableChangeEvent,\n  StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ height: \"0\" }, { height: \"auto\" }],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ height: \"auto\" }, { height: \"0\" }],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet timelineItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-timeline-item\",\n  styleUrl: \"stzh-timeline-item.scss\",\n  shadow: true,\n})\nexport class StzhTimelineItem {\n  /** Whether folds are foldable (overwrites `foldable` property from `timeline` parent) */\n  @Prop() foldable: boolean;\n\n  /** Whether fold is collapsible (overwrites `collapsible` property from `timeline` parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether step should be marked as completed */\n  @Prop({ reflect: true }) completed: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Step number shown inside bullet by default */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhTimelineItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhTimelineItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTimelineItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhTimelineItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTimelineItemClosedEvent>;\n\n  /** Show timeline item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled || !this._foldable) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide timeline item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled || !this._foldable) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle timeline item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTimelineItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTimelineItemBlurEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-timeline-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"foldable\")\n  foldableWatcher(newValue: boolean) {\n    if (typeof newValue !== \"undefined\") {\n      this._foldable = newValue;\n    } else if (this.timeline) {\n      this._foldable = this.timeline.foldable;\n    }\n\n    if (!this._foldable) {\n      this.open = true;\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  @State() _foldable: boolean = false;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private timelineItemId: string;\n  private timeline: HTMLStzhTimelineElement;\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) {\n      // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-timeline-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-timeline-item\",\n      originalEvent: event,\n    });\n  };\n\n  private handleFoldableChange = (_event: CustomEvent<StzhTimelineFoldableChangeEvent>) => {\n    this.foldableWatcher(this.foldable);\n  };\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.timeline || this.timeline.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  };\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.timeline.setItemFocus(this.element, action);\n    }\n  };\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.timeline.setItemFocus(this.element, action);\n    }\n  };\n\n  componentWillLoad() {\n    this.timelineItemId = `stzh-timeline-item-${timelineItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.timeline = this.element.closest(\"stzh-timeline\");\n\n    if (this.timeline) {\n      this.timeline.addEventListener(\"stzhFoldableChange\", this.handleFoldableChange);\n    }\n\n    this.foldableWatcher(this.foldable);\n  }\n\n  disconnectedCallback() {\n    if (this.timeline) {\n      this.timeline.removeEventListener(\"stzhFoldableChange\", this.handleFoldableChange);\n      this.timeline = null;\n    }\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const hasIcon = !!this.icon || hasSlot(this.element, \"icon\");\n    const classes = {\n      \"stzh-timeline-item\": true,\n      \"stzh-timeline-item--has-description\": !!this.description,\n      \"stzh-timeline-item--is-open\": this.open,\n      \"stzh-timeline-item--is-disabled\": this.disabled,\n      \"stzh-timeline-item--is-foldable\": this._foldable,\n      \"stzh-timeline-item--is-completed\": this.completed,\n    };\n\n    return (\n      <Host\n        role=\"listitem\"\n        is-foldable={this._foldable}\n        tabindex={this.disabled ? null : this.rootTabindex}\n        onFocus={this.onRootFocus}\n      >\n        <div class={classes}>\n          <Heading\n            id={`${this.timelineItemId}-header`}\n            class=\"stzh-timeline-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-timeline-item__button\"\n              aria-controls={`${this.timelineItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              aria-disabled={!this._foldable ? \"true\" : \"false\"}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-timeline-item__bullet\">\n                {hasIcon || this.completed ? (\n                  <span class=\"stzh-timeline-item__bullet-icon-wrapper\">\n                    {this.icon || this.completed ? (\n                      <stzh-icon\n                        class=\"stzh-timeline-item__bullet-icon\"\n                        name={this.icon ? this.icon : \"checkmark\"}\n                      ></stzh-icon>\n                    ) : (\n                      <slot name=\"icon\"></slot>\n                    )}\n                  </span>\n                ) : (\n                  <span class=\"stzh-timeline-item__bullet-text\">{this.step}</span>\n                )}\n\n                {(this.badge || this.badgeEmpty) && (\n                  <stzh-badge class=\"stzh-timeline-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n                )}\n              </span>\n              <div class=\"stzh-timeline-item__button-inner\">\n                <span class=\"stzh-timeline-item__button-text\">\n                  <span class=\"stzh-timeline-item__heading-text\">{this.heading}</span>\n                  <span class=\"stzh-timeline-item__description\">{this.description}</span>\n                </span>\n                {this._foldable && <span class=\"stzh-timeline-item__button-icon\"></span>}\n              </div>\n            </button>\n          </Heading>\n          <div\n            id={`${this.timelineItemId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-timeline-item__content\"\n            aria-labelledby={`${this.timelineItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-timeline-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-060b4bf0.entry.js → p-4cbc6aaa.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,a as s,g as o}from"./p-ef5985a3.js";const n=".sc-stzh-offline-indicator-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-offline-indicator-h,[stzh-hidden].sc-stzh-offline-indicator-h{display:none}.sc-stzh-offline-indicator-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator,.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator::before,.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator::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-offline-indicator-h .has-focus.sc-stzh-offline-indicator{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-offline-indicator-h .stzh-fylingfocus-focused.sc-stzh-offline-indicator{outline-style:none !important}.sc-stzh-offline-indicator-h .stzh-fylingfocus-focused.sc-stzh-offline-indicator::-moz-focus-inner{border:0 !important}";const e=n;const a=class{constructor(i){t(this,i);this.localization=undefined;this.isOffline=false}async addToast(t){const i=this.addToastbarToBodyIfNotExists();const s=this.getToastByLabel(t);if(!s){const s=document.createElement("stzh-toast");s.label=t;s.role="alert";s.type="error";s.id=`${this.getSimpleHash(t)}`;s.hidden=true;s.initialOpenAnimation=true;i.appendChild(s)}}async removeToast(t){const i=this.getToastByLabel(t);if(i){i.hide().finally((()=>{i.remove()}))}}getSimpleHash(t){let i=0;for(let s=0;s<t.length;s++){const o=t.charCodeAt(s);i=(i<<5)-i+o;i|=0}return i}addToastbarToBodyIfNotExists(){let t=document.querySelector("stzh-toastbar");if(!t){t=document.createElement("stzh-toastbar")}document.body.appendChild(t);return t}getToastByLabel(t){const i=document.querySelector(`stzh-toast[id="${this.getSimpleHash(t)}"]`);if(i){return i}return undefined}async updateNetworkStatus(){this.isOffline=!navigator.onLine;if(this.isOffline){await this.addToast(this.localization.offlineLabel)}else{await this.removeToast(this.localization.offlineLabel)}}addNetworkListeners(){window.addEventListener("online",this.updateNetworkStatus.bind(this));window.addEventListener("offline",this.updateNetworkStatus.bind(this))}removeNetworkListeners(){window.removeEventListener("online",this.updateNetworkStatus.bind(this));window.removeEventListener("offline",this.updateNetworkStatus.bind(this))}async initOfflineToast(){await this.addToast(this.localization.offlineLabel)}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"offline-indicator")}await this.initOfflineToast();await this.updateNetworkStatus()}componentDidLoad(){this.addNetworkListeners()}disconnectedCallback(){this.removeNetworkListeners()}render(){const t={"stzh-offline-indicator":true};return i(s,{key:"1c551c99ced3a627999deddb807874496d6ba0a0","is-offline":this.isOffline},i("div",{key:"46adcd961c00db05812bb8f8cf9916fbc69afb38",class:t}))}get element(){return o(this)}};a.style=e;export{a as stzh_offline_indicator};
-//# sourceMappingURL=p-060b4bf0.entry.js.map
+import{r as t,h as i,a as s,g as o}from"./p-ef5985a3.js";const e=".sc-stzh-offline-indicator-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-offline-indicator-h,[stzh-hidden].sc-stzh-offline-indicator-h{display:none}.sc-stzh-offline-indicator-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator,.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator::before,.sc-stzh-offline-indicator-h *.sc-stzh-offline-indicator::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-offline-indicator-h .has-focus.sc-stzh-offline-indicator{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-offline-indicator-h .stzh-fylingfocus-focused.sc-stzh-offline-indicator{outline-style:none !important}.sc-stzh-offline-indicator-h .stzh-fylingfocus-focused.sc-stzh-offline-indicator::-moz-focus-inner{border:0 !important}";const n=e;const a=class{constructor(i){t(this,i);this.localization=undefined;this.isOffline=false}async addToast(t){const i=this.addToastbarToBodyIfNotExists();const s=this.getToastByLabel(t);if(!s){const s=document.createElement("stzh-toast");s.label=t;s.role="alert";s.type="error";s.id=`${this.getSimpleHash(t)}`;s.hidden=true;s.initialOpenAnimation=true;i.appendChild(s)}}async removeToast(t){const i=this.getToastByLabel(t);if(i){i.hide().finally((()=>{i.remove()}))}}getSimpleHash(t){let i=0;for(let s=0;s<t.length;s++){const o=t.charCodeAt(s);i=(i<<5)-i+o;i|=0}return i}addToastbarToBodyIfNotExists(){let t=document.querySelector("stzh-toastbar");if(!t){t=document.createElement("stzh-toastbar")}document.body.appendChild(t);return t}getToastByLabel(t){const i=document.querySelector(`stzh-toast[id="${this.getSimpleHash(t)}"]`);if(i){return i}return undefined}async updateNetworkStatus(){this.isOffline=!navigator.onLine;if(this.isOffline){await this.addToast(this.localization.offlineLabel)}else{await this.removeToast(this.localization.offlineLabel)}}addNetworkListeners(){window.addEventListener("online",this.updateNetworkStatus.bind(this));window.addEventListener("offline",this.updateNetworkStatus.bind(this))}removeNetworkListeners(){window.removeEventListener("online",this.updateNetworkStatus.bind(this));window.removeEventListener("offline",this.updateNetworkStatus.bind(this))}async initOfflineToast(){await this.addToast(this.localization.offlineLabel)}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"offline-indicator")}await this.initOfflineToast();await this.updateNetworkStatus()}componentDidLoad(){this.addNetworkListeners()}disconnectedCallback(){this.removeNetworkListeners()}render(){const t={"stzh-offline-indicator":true};return i(s,{key:"422b6e413556e9f2edb9b452f205ca874275dfca","is-offline":this.isOffline},i("div",{key:"f278d91bd3e5e2ec99e16a9f540288eb55786fa4",class:t}))}get element(){return o(this)}};a.style=n;export{a as stzh_offline_indicator};
+//# sourceMappingURL=p-4cbc6aaa.entry.js.map

package/dist/stzh-components/{p-5e15683f.entry.js → p-56538913.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,a,g as s}from"./p-ef5985a3.js";import{s as i,h}from"./p-87c329f2.js";import{m as r}from"./p-f4adb3cd.js";import"./p-dae15605.js";const l=".sc-stzh-pagetitle-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-pagetitle-h,[stzh-hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::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-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(\n    --stzh-pagetitle-background-color,\n    var(--stzh-pagetitle-background-color)\n  );--image-background-color:var(--stzh-ratio-background-color);--heading-color:var(--stzh-pagetitle-heading-color, var(--stzh-heading-color));--lead-color:var(--stzh-pagetitle-lead-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-h.sc-stzh-pagetitle-s>[slot=image],.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sc-stzh-pagetitle-h.sc-stzh-pagetitle-s>[slot=readspeaker] *,.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-readspeaker-color, var(--stzh-heading-color));--hover-color:var(--stzh-pagetitle-readspeaker-color, var(--stzh-heading-color))}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent;--heading-color:var(\n    --stzh-pagetitle-transparent-heading-color,\n    var(--stzh-heading-color)\n  )}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + (100rem - 84.25rem) / 2)}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:var(--stzh-space-medium);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--lead-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle{--stzh-heading-color:var(--heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(\n        ((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium)\n      );left:auto;bottom:calc((\n            var(--stzh-space-big) -\n              var(--stzh-space-xlarge)\n          ) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(\n        ((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large)\n      )}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(\n        ((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra)\n      )}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--has-tag.sc-stzh-pagetitle:not(.stzh-pagetitle--has-dateline) .stzh-pagetitle__meta.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xlarge)}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{hyphens:auto}.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px) and (max-width: 1259px){.stzh-pagetitle--has-disturber.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 5}}";const g=l;const n=class{constructor(e){t(this,e);this.isDisturberOpen=false;this.update=()=>{var t;if(!this.disturberElement){return}const e=r("medium").matches;const a=((t=this.disturberElement)===null||t===void 0?void 0:t.offsetHeight)||0;const s=a&&this.isDisturberOpen;const i=s&&!e;document.documentElement.style.setProperty("--stzh-pagetitle-disturber-height",s?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-stuck-height",i?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-stuck",i?"1":"0");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-not-stuck",i?"0":"1")};this.init=()=>{const t=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const e=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const a=this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');const s=this.element.querySelector('stzh-show[slot="disturber"], [slot="disturber"] stzh-show');const h=this.element.querySelector('[slot="readspeaker"] stzh-button');const r=this.element.querySelector('stzh-tag[slot="tag"], [slot="tag"] stzh-tag');if(t){i(t,{curve:"hero",level:"1"})}if(e){i(e,{initialOpenAnimation:true})}if(s){i(s,{mikro:true})}if(r){i(r,{type:"default",size:"large",nonInteractive:true})}if(h){i(h,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}a.forEach((t=>{i(t,{lead:true})}))};this.background="default";this.hyphensEnabled=false;this.dateline=undefined}handleResize(){if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.update)}handleStzhOpen(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=true;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}handleStzhClose(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=false;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}componentDidRender(){requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}render(){const t=h(this.element,"image");const s=h(this.element,"lead");const i=h(this.element,"tag");const r=h(this.element,"readspeaker");const l=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const g={"stzh-pagetitle":true,"stzh-pagetitle--has-image":t,"stzh-pagetitle--has-no-image":!t,"stzh-pagetitle--has-lead":s,"stzh-pagetitle--has-tag":i,"stzh-pagetitle--has-dateline":!!this.dateline,"stzh-pagetitle--has-meta":i||r,"stzh-pagetitle--has-disturber":!!l,"stzh-pagetitle--hyphens":this.hyphensEnabled,[`stzh-pagetitle--background-${this.background}`]:!!this.background};return e(a,{key:"dd1dae5e9d6238ffdac9b57bee9028c6ab293a9e"},e("div",{key:"7692e22c130fb9d768d54c57e56aea0bf5f49e75",class:g},e("div",{key:"276b719825766581a9310b2da3f2a8da24fc3ca8",class:"stzh-pagetitle__container"},e("div",{key:"4edbf3c08ace8896ad635561e564fdfcfe9b0636",class:"stzh-pagetitle__wrapper"},e("div",{key:"b0d87b0ff4c587809434424dbe4b5ea820486849",class:"stzh-pagetitle__text"},e("div",{key:"644c747a9faf9dec771338668bf8b1400ca0f22b",class:"stzh-pagetitle__meta"},e("div",{key:"308d1af6ca44ed4e529f7b3f2c842c3cc5b433a8",class:"stzh-pagetitle__tag"},e("slot",{key:"45d323f77a910db3c3333d71a4fca19e9df09de2",name:"tag"})),e("div",{key:"8c5f81a671e670b450efc5c689cba18b4146be34",class:"stzh-pagetitle__readspeaker"},e("slot",{key:"53ca3e154eba02986ebb6a6243b01cdf211ec8e0",name:"readspeaker"}))),this.dateline&&e("div",{key:"4c75ea7565d6d7ace87e4d315c21eaf2afad2ee4",class:"stzh-pagetitle__dateline"},this.dateline),e("div",{key:"a26fc81a10690ac96d14dd298a195861001feeb4",class:"stzh-pagetitle__heading"},e("slot",{key:"187a4b8f2c292263c9176fea2fe421d78f43aeeb",name:"heading"})),e("div",{key:"187da73cdbbc557ad0609f83fee27a982b400d90",class:"stzh-pagetitle__lead"},e("slot",{key:"0209e7b1c9431237292c7d62db87c95f58f89855",name:"lead"}))),e("div",{key:"8e9b473d1b013b1cef1b0df537612568cf0849e8",class:"stzh-pagetitle__image-wrapper"},e("stzh-ratio",{key:"3d360e87e41d8ad5f8cdd292ca4d6d971af1c3fb",ratio:"16:9",ratioSmall:"3:2",ratioMedium:"16:9",class:"stzh-pagetitle__ratio"}),e("div",{key:"77fe51987394ce4d61e4b809bf3c1ed3e0231dcf",class:"stzh-pagetitle__image-inner-wrapper"},e("slot",{key:"74b4a5695c7fcd3f9dbdd11d2e6eae6f9cd395d6",name:"image"}))),e("div",{key:"70f64853370f205febf986d7b0f405aa5d635371",class:"stzh-pagetitle__disturber",ref:t=>this.disturberElement=t},e("slot",{key:"8e45414bd0ef9b94029098bd2998ea3c6fb0c64d",name:"disturber"}))))))}get element(){return s(this)}};n.style=g;export{n as stzh_pagetitle};
-//# sourceMappingURL=p-5e15683f.entry.js.map
+import{r as t,h as e,a,g as s}from"./p-ef5985a3.js";import{s as i,h}from"./p-87c329f2.js";import{m as r}from"./p-f4adb3cd.js";import"./p-dae15605.js";const l=".sc-stzh-pagetitle-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-pagetitle-h,[stzh-hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::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-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(\n    --stzh-pagetitle-background-color,\n    var(--stzh-pagetitle-background-color)\n  );--image-background-color:var(--stzh-ratio-background-color);--heading-color:var(--stzh-pagetitle-heading-color, var(--stzh-heading-color));--lead-color:var(--stzh-pagetitle-lead-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-h.sc-stzh-pagetitle-s>[slot=image],.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sc-stzh-pagetitle-h.sc-stzh-pagetitle-s>[slot=readspeaker] *,.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-readspeaker-color, var(--stzh-heading-color));--hover-color:var(--stzh-pagetitle-readspeaker-color, var(--stzh-heading-color))}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent;--heading-color:var(\n    --stzh-pagetitle-transparent-heading-color,\n    var(--stzh-heading-color)\n  )}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + (100rem - 84.25rem) / 2)}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:var(--stzh-space-medium);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--lead-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle{--stzh-heading-color:var(--heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(\n        ((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium)\n      );left:auto;bottom:calc((\n            var(--stzh-space-big) -\n              var(--stzh-space-xlarge)\n          ) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(\n        ((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large)\n      )}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(\n        ((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra)\n      )}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--has-tag.sc-stzh-pagetitle:not(.stzh-pagetitle--has-dateline) .stzh-pagetitle__meta.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xlarge)}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{hyphens:auto}.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-disturber.sc-stzh-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px) and (max-width: 1259px){.stzh-pagetitle--has-disturber.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 5}}";const g=l;const n=class{constructor(e){t(this,e);this.isDisturberOpen=false;this.update=()=>{var t;if(!this.disturberElement){return}const e=r("medium").matches;const a=((t=this.disturberElement)===null||t===void 0?void 0:t.offsetHeight)||0;const s=a&&this.isDisturberOpen;const i=s&&!e;document.documentElement.style.setProperty("--stzh-pagetitle-disturber-height",s?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-stuck-height",i?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-stuck",i?"1":"0");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-not-stuck",i?"0":"1")};this.init=()=>{const t=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const e=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const a=this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');const s=this.element.querySelector('stzh-show[slot="disturber"], [slot="disturber"] stzh-show');const h=this.element.querySelector('[slot="readspeaker"] stzh-button');const r=this.element.querySelector('stzh-tag[slot="tag"], [slot="tag"] stzh-tag');if(t){i(t,{curve:"hero",level:"1"})}if(e){i(e,{initialOpenAnimation:true})}if(s){i(s,{mikro:true})}if(r){i(r,{type:"default",size:"large",nonInteractive:true})}if(h){i(h,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}a.forEach((t=>{i(t,{lead:true})}))};this.background="default";this.hyphensEnabled=false;this.dateline=undefined}handleResize(){if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.update)}handleStzhOpen(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=true;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}handleStzhClose(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=false;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}componentDidRender(){requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}render(){const t=h(this.element,"image");const s=h(this.element,"lead");const i=h(this.element,"tag");const r=h(this.element,"readspeaker");const l=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const g={"stzh-pagetitle":true,"stzh-pagetitle--has-image":t,"stzh-pagetitle--has-no-image":!t,"stzh-pagetitle--has-lead":s,"stzh-pagetitle--has-tag":i,"stzh-pagetitle--has-dateline":!!this.dateline,"stzh-pagetitle--has-meta":i||r,"stzh-pagetitle--has-disturber":!!l,"stzh-pagetitle--hyphens":this.hyphensEnabled,[`stzh-pagetitle--background-${this.background}`]:!!this.background};return e(a,{key:"e6398f212eed8534ac80eb764a74ebe35d311620"},e("div",{key:"c11ed79faf6349fde988346d754d5a2b905309ae",class:g},e("div",{key:"5e98c7aba81ccc1b3490cacacfa55af86a900ff5",class:"stzh-pagetitle__container"},e("div",{key:"de34dd84cdb5ada82a19191f4437b66a563ea89c",class:"stzh-pagetitle__wrapper"},e("div",{key:"6fbf0bb4f0abc036927a0b64504ee5ca74ef6be7",class:"stzh-pagetitle__text"},e("div",{key:"b550842ed8723ec0502a8a139afcd5809d02176a",class:"stzh-pagetitle__meta"},e("div",{key:"81ca34cc8ca8372d05050061493cc76551801e0f",class:"stzh-pagetitle__tag"},e("slot",{key:"096301436aa8ac1f1377ad85169d8c3e04543fe8",name:"tag"})),e("div",{key:"035ef0ac6f8d40859ea758d0d3831cb28877e5bf",class:"stzh-pagetitle__readspeaker"},e("slot",{key:"5186a2037e376aabcfdd35b0b1d59458e3605126",name:"readspeaker"}))),this.dateline&&e("div",{key:"23e7b45df5b0d607b247a93ea0dda8e0a28885ea",class:"stzh-pagetitle__dateline"},this.dateline),e("div",{key:"8c6d1f999728d64f92b649a46364b74ee50d6c95",class:"stzh-pagetitle__heading"},e("slot",{key:"1ac3b98d90c4a11e9e32c6a6b5fe78a2b9c1a0c7",name:"heading"})),e("div",{key:"fcd54af4d4cab40af4a3dfa7b3f8fb98d6000ecf",class:"stzh-pagetitle__lead"},e("slot",{key:"a430bf605d8a66d7fb962bb5a01380053c174451",name:"lead"}))),e("div",{key:"195842563342453fea20960eebcb0af217f5ddac",class:"stzh-pagetitle__image-wrapper"},e("stzh-ratio",{key:"56f5eebb638ece8823e6c73b290f53c84f63015b",ratio:"16:9",ratioSmall:"3:2",ratioMedium:"16:9",class:"stzh-pagetitle__ratio"}),e("div",{key:"9bb742947b00b029f25d24d8930c4fb66fd355a8",class:"stzh-pagetitle__image-inner-wrapper"},e("slot",{key:"f819b8ee87e9fd6a262ad868e5e94406d632ed15",name:"image"}))),e("div",{key:"8f4d70ee60c6da6689192c30be4dd26e11e3fde5",class:"stzh-pagetitle__disturber",ref:t=>this.disturberElement=t},e("slot",{key:"5d90b3643bc224571d075f7522d048a5e49bbfdc",name:"disturber"}))))))}get element(){return s(this)}};n.style=g;export{n as stzh_pagetitle};
+//# sourceMappingURL=p-56538913.entry.js.map

package/dist/stzh-components/p-568ae693.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,a,g as n}from"./p-ef5985a3.js";const s='@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-layout-item-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-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-layout-item-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::before, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::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-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    var(--stzh-color-coolgrey10));\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        "text text text text text text image image image image image image"\n      );\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-layout-item-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-layout-item-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-layout-item-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-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\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-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {\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-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__image.sc-stzh-pi-teaser-layout-item {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-link.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__date.sc-stzh-pi-teaser-layout-item {\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=s;const o=class{constructor(i){t(this,i);this.stzhClick=e(this,"stzhClick",7);this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-pi-teaser-layout-item",originalEvent:t,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}componentDidRender(){requestAnimationFrame((()=>{var t,e;const i=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(i){(e=this.titleLinkElement)===null||e===void 0?void 0:e.setAttribute("s-object-id",i)}}))}renderHeading(){const t=`h${this.headingLevel}`;const e=this.href?"a":"button";return i("div",{class:"stzh-pi-teaser-layout-item__title-wrapper"},i(t,{class:"stzh-pi-teaser-layout-item__title"},i(e,{ref:t=>this.titleLinkElement=t,class:"stzh-pi-teaser-layout-item__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},i("div",{ref:t=>this.headingTextElement=t},this.heading))))}render(){const t=!!this.lead;console.log("imageSrc: ",this.imageSrc," & imagePosition: ",this.imagePosition);const e=!!this.imageSrc&&!!this.imagePosition;console.log("hasImage: ",e);const n=this.lead;const s={"stzh-pi-teaser-layout-item":true,"stzh-pi-teaser-layout-item--has-lead":t,"stzh-pi-teaser-layout-item--has-image":e};return i(a,{key:"6800fb97b1ec726ec3f09452a33100366d78ffac","has-lead":t,"has-image":e,"image-position":this.imagePosition,"content-size":this.contentSize},i("article",{key:"85b38929fec3ee38994782bc7321e78684e779fd",class:s,"aria-label":this.heading,role:"listitem"},e&&i("div",{key:"1923478de5ada40e71286e3eaa49d8cdf7017a92",class:"stzh-pi-teaser-layout-item__image"},i("img",{key:"c9b796b46a9eb43706924619910c4efafe16d355",src:this.imageSrc,alt:"Example image"})),i("div",{key:"eeaaf7e1adf48da141173b7ce7a63dc2ea3763a9",class:"stzh-pi-teaser-layout-item__wrapper"},i("div",{key:"6058d6be2b5124da300dd97733057d0c22e24d9f",class:"stzh-pi-teaser-layout-item__text"},this.dateline&&i("p",{key:"68bae848e3e1cf377b075c7d05fce9aad811ac76",class:"stzh-pi-teaser-layout-item__dateline"},this.dateline),this.renderHeading(),i("div",{key:"4e9705883f6f05ff52904322af547c85996da6df",class:"stzh-pi-teaser-layout-item__lead-wrapper"},i("div",{key:"3ced9f74e039e1cc456d4ef37074d8442844b857",class:"stzh-pi-teaser-layout-item__lead"},n)),this.date&&i("div",{key:"92cd55abb157637e1e0db08edb85463be3e622bb",class:"stzh-pi-teaser-layout-item__date"},this.date)))))}get element(){return n(this)}};o.style=r;export{o as stzh_pi_teaser_layout_item};
+//# sourceMappingURL=p-568ae693.entry.js.map

package/dist/stzh-components/p-568ae693.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhPiTeaserLayoutItemCss","StzhPiTeaserLayoutItemStyle0","StzhPiTeaserLayoutItem","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","console","log","imageSrc","imagePosition","hasImage","displayLead","classes","Host","key","contentSize","role","src","alt","dateline","date"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10});\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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text image image\"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\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(--grid-template-areas-no-image,\n      var(--grid-template-areas));\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}","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } 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-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\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  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\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-layout-item\",\n      originalEvent,\n      href: this.href,\n    });\n  };\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-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__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    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\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-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--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-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAA4B,8nbAClC,MAAAC,EAAeD,E,MCaFE,EAAsB,M,8DA8CzBC,KAAAC,gBAAmBC,IACzBF,KAAKG,UAAUC,KAAK,CAClBC,UAAW,6BACXH,gBACAI,KAAMN,KAAKM,MACX,E,mFApCuB,G,aAGD,G,0CAMoB,I,UAGvB,G,UAGA,G,iBAG8B,I,6BAqBrD,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,6CACTD,EAACH,EAAO,CAACI,MAAM,qCACbD,EAACD,EAAS,CACRG,IAAKC,GAAOxB,KAAKe,iBAAmBS,EACpCF,MAAM,yCACNhB,KAAMN,KAAKM,KACXmB,OAAQzB,KAAKyB,OACbC,QAAS1B,KAAKC,iBAEdoB,EAAA,OAAKE,IAAKC,GAAOxB,KAAKY,mBAAqBY,GAAwBxB,KAAK2B,W,CAOlF,MAAAC,GACE,MAAMC,IAAY7B,KAAK8B,KACvBC,QAAQC,IAAI,aAAchC,KAAKiC,SAAU,qBAAsBjC,KAAKkC,eACpE,MAAMC,IAAanC,KAAKiC,YAAcjC,KAAKkC,cAC3CH,QAAQC,IAAI,aAAcG,GAC1B,MAAMC,EAAcpC,KAAK8B,KAIzB,MAAMO,EAAU,CACd,6BAA8B,KAC9B,uCAAwCR,EACxC,wCAAyCM,GAG3C,OACEd,EAACiB,EAAI,CAAAC,IAAA,sDAAWV,EAAO,YAAaM,EAAQ,iBAAkBnC,KAAKkC,cAAa,eAAgBlC,KAAKwC,aACnGnB,EAAA,WAAAkB,IAAA,2CAASjB,MAAOe,EAAO,aAAcrC,KAAK2B,QAASc,KAAK,YACrDN,GACCd,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,qCACTD,EAAA,OAAAkB,IAAA,2CAAKG,IAAK1C,KAAKiC,SAAUU,IAAI,mBAIjCtB,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,uCACTD,EAAA,OAAAkB,IAAA,2CAAKjB,MAAO,oCACTtB,KAAK4C,UAAYvB,EAAA,KAAAkB,IAAA,2CAAGjB,MAAM,wCAAwCtB,KAAK4C,UACvE5C,KAAKiB,gBACNI,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,4CACTD,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,oCAAoCc,IAEhDpC,KAAK6C,MAAQxB,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,oCAAoCtB,KAAK6C,S"}

package/dist/stzh-components/{p-0cf1a45d.entry.js → p-5b30efeb.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,a as o,g as e}from"./p-ef5985a3.js";import{c as h,o as r,f as a,s as l,a as c,b as n,A as p}from"./p-995d3227.js";import{c as d}from"./p-f48422c4.js";import{i as z}from"./p-87c329f2.js";import{w as f}from"./p-70ec7e79.js";import{s as u,a as b}from"./p-2c0bec3e.js";import"./p-dae15605.js";const m=".sc-stzh-tooltip-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-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::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-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";const v=m;const y={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};const g={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};const k={ESC:27};let _=0;const w=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=t=>{if(t.keyCode===k.ESC){this.hide()}};this.computePosition=async()=>{if(!this.open){return}const{x:t=0,y:s=0,strategy:i="absolute",placement:o,middlewareData:e}=await h(this.triggerFirstElement,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[r({mainAxis:this.distance,crossAxis:this.skidding}),a({padding:5}),l({padding:5}),c({element:this.arrowElement,padding:5})]});this.middlewareData=e;this.computedPlacement=o;Object.assign(this.contentElement.style,{position:i,left:`${t}px`,top:`${s}px`});Object.assign(this.arrowElement.style,{left:t!=null?`${e.arrow.x}px`:"",top:s!=null?`${e.arrow.y}px`:""})};this.onClickTrigger=()=>{if(this.hasTrigger("click")){this.toggle()}};this.onMouseEnterTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=true;this.show()}};this.onMouseLeaveTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=false;document.addEventListener("mousemove",this.onMouseMoveDocument)}};this.onFocusTrigger=()=>{if(this.hasTrigger("focus")){this.show()}};this.onBlurTrigger=()=>{if(this.hasTrigger("focus")){this.hide()}};this.onMouseMoveDocument=t=>{const{clientX:s,clientY:i}=t;if(!this.computedPlacement){return true}const o=this.computedPlacement.split("-")[0];const e=this.middlewareData.offset;const h=this.contentElement.getBoundingClientRect();if(!e){return true}const r=o==="bottom"?e.y:0;const a=o==="top"?e.y:0;const l=o==="right"?e.x:0;const c=o==="left"?e.x:0;const n=h.top-i>r;const p=i-h.bottom>a;const d=h.left-s>l;const z=s-h.right>c;if(n||p||d||z){document.removeEventListener("mousemove",this.onMouseMoveDocument);if(!this.isHovering){this.hide()}}};this.init=()=>{var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){this.triggerFirstElement=s;s.addEventListener("click",this.onClickTrigger);s.addEventListener("mouseenter",this.onMouseEnterTrigger);s.addEventListener("mouseleave",this.onMouseLeaveTrigger);s.addEventListener("focusin",this.onFocusTrigger);s.addEventListener("focusout",this.onBlurTrigger)}};this.initializedTooltip=false;this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.type="overlay";this.size="default";this.skidding=0;this.distance=12;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return f(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return f(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}async openWatcher(t){if(!this.contentElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}await u(this.contentElement);this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;await b(this.contentElement,y.keyframes,y.options);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}await u(this.contentElement);await b(this.contentElement,g.keyframes,g.options);this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}}this.toggledByMethod=false}triggerWatcher(t){this._trigger=t.split(" ")}handleDocumentClick(t){if(!this.open){return}const s=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;const i=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(s&&!i&&this.hasTrigger("click")){this.hide()}}hasTrigger(t){return this._trigger.indexOf(t)>-1}async componentWillLoad(){this.id=`stzh-tooltip-${_++}`;this.triggerWatcher(this.trigger);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"tooltip")}}componentDidRender(){const t=z(this.triggerFirstElement);if(this.hasTrigger("click")){this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")||!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")||!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-content`)}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}}componentDidUpdate(){if(this.open&&!this.initializedTooltip){this.initializeAutoUpdate();this.initializeFocusTrap();this.initializedTooltip=true}if(this.initializedTooltip){this.computePosition();if(this.trap){this.trap.updateContainerElements(this.contentElement)}}}initializeAutoUpdate(){this.autoUpdateCleanup=n(this.element,this.contentElement,this.computePosition)}initializeFocusTrap(){if(this.interactive){this.trap=d(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true})}}componentDidLoad(){this.contentElement.hidden=!this.open;if(this.open&&this.trap){this.trap.activate()}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger);this.triggerFirstElement.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerFirstElement.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerFirstElement.removeEventListener("focusin",this.onFocusTrigger);this.triggerFirstElement.removeEventListener("focusout",this.onBlurTrigger)}}render(){const t={"stzh-tooltip":true,[`stzh-tooltip--type-${this.type}`]:true,[`stzh-tooltip--open`]:this.open,[`stzh-tooltip--placement-${this.computedPlacement}`]:!!this.computedPlacement};return i(o,{key:"f54ce964dd7fbf7c8cf639629ae9c6f3debe41b5"},i("div",{key:"e1bd6c9a8d5388378d9a1978c7350478c56f1da2",class:t},i("div",{key:"6b1a695d7f160377e89a4d64e3012022f1ef814b",class:"stzh-tooltip__trigger",ref:t=>this.triggerElement=t},i("slot",{key:"5c8ae192703254c6e0dd082eb2e021ec5c388bde"})),this.hasTrigger("click")&&i("div",{key:"5444340aa4e9e41ed1598e4fd94214f2aa962167",class:"stzh-tooltip__vhidden",id:`${this.id}-trigger-description`},this.localization.open),i("div",{key:"a210bef95fcb3b59cd5d763e8c4897a871538a4a",class:"stzh-tooltip__content",id:`${this.id}-content`,ref:t=>this.contentElement=t,tabindex:"-1","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},i("div",{key:"d6e69920cd80a3e5ae230a2a2320844b7d3640e5",class:"stzh-tooltip__arrow",ref:t=>this.arrowElement=t,innerHTML:p}),this.label&&i("h2",{key:"04acd151927077f8c88c4e3f864a0af189fe777a",id:`${this.id}-label`,class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&i("button",{key:"fb4d913114554c29f70a0c24d1cb916ae861bac0",class:"stzh-tooltip__close",onClick:()=>this.hide(),type:"button"},i("stzh-icon",{key:"7e08a05a8610bd9713a136e2a349b2361379b052",name:"close",class:"stzh-tooltip__icon"}),i("span",{key:"03bdeb548fed00dd6415fa756fc7486f2c068b50",class:"stzh-tooltip__vhidden"},this.localization.close)),i("stzh-text",Object.assign({key:"2808ef4f365f76b0555618699a4ff7d0650e6f3d",curve:this.type==="overlay"?"none":"caption"},this.type==="button"?{font:"heavy"}:{},{class:"stzh-tooltip__content-slot"}),this.content?this.content:i("slot",{name:"content"})))))}get element(){return e(this)}static get watchers(){return{open:["openWatcher"],trigger:["triggerWatcher"]}}};w.style=v;export{w as stzh_tooltip};
-//# sourceMappingURL=p-0cf1a45d.entry.js.map
+import{r as t,c as s,h as i,a as o,g as e}from"./p-ef5985a3.js";import{c as h,o as r,f as a,s as l,a as c,b as n,A as p}from"./p-995d3227.js";import{c as d}from"./p-f48422c4.js";import{i as z}from"./p-87c329f2.js";import{w as f}from"./p-70ec7e79.js";import{s as u,a as b}from"./p-2c0bec3e.js";import"./p-dae15605.js";const m=".sc-stzh-tooltip-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-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::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-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";const v=m;const y={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};const g={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};const k={ESC:27};let _=0;const w=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=t=>{if(t.keyCode===k.ESC){this.hide()}};this.computePosition=async()=>{if(!this.open){return}const{x:t=0,y:s=0,strategy:i="absolute",placement:o,middlewareData:e}=await h(this.triggerFirstElement,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[r({mainAxis:this.distance,crossAxis:this.skidding}),a({padding:5}),l({padding:5}),c({element:this.arrowElement,padding:5})]});this.middlewareData=e;this.computedPlacement=o;Object.assign(this.contentElement.style,{position:i,left:`${t}px`,top:`${s}px`});Object.assign(this.arrowElement.style,{left:t!=null?`${e.arrow.x}px`:"",top:s!=null?`${e.arrow.y}px`:""})};this.onClickTrigger=()=>{if(this.hasTrigger("click")){this.toggle()}};this.onMouseEnterTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=true;this.show()}};this.onMouseLeaveTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=false;document.addEventListener("mousemove",this.onMouseMoveDocument)}};this.onFocusTrigger=()=>{if(this.hasTrigger("focus")){this.show()}};this.onBlurTrigger=()=>{if(this.hasTrigger("focus")){this.hide()}};this.onMouseMoveDocument=t=>{const{clientX:s,clientY:i}=t;if(!this.computedPlacement){return true}const o=this.computedPlacement.split("-")[0];const e=this.middlewareData.offset;const h=this.contentElement.getBoundingClientRect();if(!e){return true}const r=o==="bottom"?e.y:0;const a=o==="top"?e.y:0;const l=o==="right"?e.x:0;const c=o==="left"?e.x:0;const n=h.top-i>r;const p=i-h.bottom>a;const d=h.left-s>l;const z=s-h.right>c;if(n||p||d||z){document.removeEventListener("mousemove",this.onMouseMoveDocument);if(!this.isHovering){this.hide()}}};this.init=()=>{var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){this.triggerFirstElement=s;s.addEventListener("click",this.onClickTrigger);s.addEventListener("mouseenter",this.onMouseEnterTrigger);s.addEventListener("mouseleave",this.onMouseLeaveTrigger);s.addEventListener("focusin",this.onFocusTrigger);s.addEventListener("focusout",this.onBlurTrigger)}};this.initializedTooltip=false;this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.type="overlay";this.size="default";this.skidding=0;this.distance=12;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return f(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return f(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}async openWatcher(t){if(!this.contentElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}await u(this.contentElement);this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;await b(this.contentElement,y.keyframes,y.options);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}await u(this.contentElement);await b(this.contentElement,g.keyframes,g.options);this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}}this.toggledByMethod=false}triggerWatcher(t){this._trigger=t.split(" ")}handleDocumentClick(t){if(!this.open){return}const s=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;const i=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(s&&!i&&this.hasTrigger("click")){this.hide()}}hasTrigger(t){return this._trigger.indexOf(t)>-1}async componentWillLoad(){this.id=`stzh-tooltip-${_++}`;this.triggerWatcher(this.trigger);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"tooltip")}}componentDidRender(){const t=z(this.triggerFirstElement);if(this.hasTrigger("click")){this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")||!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")||!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-content`)}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}}componentDidUpdate(){if(this.open&&!this.initializedTooltip){this.initializeAutoUpdate();this.initializeFocusTrap();this.initializedTooltip=true}if(this.initializedTooltip){this.computePosition();if(this.trap){this.trap.updateContainerElements(this.contentElement)}}}initializeAutoUpdate(){this.autoUpdateCleanup=n(this.element,this.contentElement,this.computePosition)}initializeFocusTrap(){if(this.interactive){this.trap=d(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true})}}componentDidLoad(){this.contentElement.hidden=!this.open;if(this.open&&this.trap){this.trap.activate()}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger);this.triggerFirstElement.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerFirstElement.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerFirstElement.removeEventListener("focusin",this.onFocusTrigger);this.triggerFirstElement.removeEventListener("focusout",this.onBlurTrigger)}}render(){const t={"stzh-tooltip":true,[`stzh-tooltip--type-${this.type}`]:true,[`stzh-tooltip--open`]:this.open,[`stzh-tooltip--placement-${this.computedPlacement}`]:!!this.computedPlacement};return i(o,{key:"67948b0604c4871d4899392840b2fdf271ea2121"},i("div",{key:"67f57022d1b018ad810f0b5358aaa812f4647bb8",class:t},i("div",{key:"ad0215e2fbdcb7b43496cd087069e3eade407033",class:"stzh-tooltip__trigger",ref:t=>this.triggerElement=t},i("slot",{key:"fe4761d1bbbf89e4b485b12d23372115d1b8ff61"})),this.hasTrigger("click")&&i("div",{key:"6620e0a3e9d70c83a0feb79267e4c7260b7e43fb",class:"stzh-tooltip__vhidden",id:`${this.id}-trigger-description`},this.localization.open),i("div",{key:"6e51c0a23b8c1d9fc6a7896e624cba9622c30db7",class:"stzh-tooltip__content",id:`${this.id}-content`,ref:t=>this.contentElement=t,tabindex:"-1","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},i("div",{key:"6eab6ee7e6868b89af87fd8682ec5156a1d38c13",class:"stzh-tooltip__arrow",ref:t=>this.arrowElement=t,innerHTML:p}),this.label&&i("h2",{key:"588bea989466372661403e88d968e8cf0f1ea250",id:`${this.id}-label`,class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&i("button",{key:"f38f700ab6d4de381d3ebe95a8d5848be8dc92a3",class:"stzh-tooltip__close",onClick:()=>this.hide(),type:"button"},i("stzh-icon",{key:"b44e77e22003362c138e336402f27f043b7276ea",name:"close",class:"stzh-tooltip__icon"}),i("span",{key:"e3074bb2ee0e793b9ac62fde8906cfcd4e7aaffa",class:"stzh-tooltip__vhidden"},this.localization.close)),i("stzh-text",Object.assign({key:"3821fd2e06d38551cd7e212aaa9cb93acfeef189",curve:this.type==="overlay"?"none":"caption"},this.type==="button"?{font:"heavy"}:{},{class:"stzh-tooltip__content-slot"}),this.content?this.content:i("slot",{name:"content"})))))}get element(){return e(this)}static get watchers(){return{open:["openWatcher"],trigger:["triggerWatcher"]}}};w.style=v;export{w as stzh_tooltip};
+//# sourceMappingURL=p-5b30efeb.entry.js.map