@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/cjs/stzh-pagetitle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberCloseEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-height\", hasDisturber ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-stuck-height\", isStuck ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  }\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const tagSlotUsed = hasSlot(this.element, 'tag');\n    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline &&\n                  <div class=\"stzh-pagetitle__dateline\">\n                    {this.dateline}\n                  </div>\n                }\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div\n                class=\"stzh-pagetitle__disturber\"\n                ref={(el) => (this.disturberElement = el as HTMLDivElement)}\n              >\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-height\",\n      hasDisturber ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-stuck-height\",\n      isStuck ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true,\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true,\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true,\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const tagSlotUsed = hasSlot(this.element, \"tag\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-panorama.cjs.entry.js

@@ -115,7 +115,7 @@ c){if(!b.hotSpots)return !1;for(var d=0;d<b.hotSpots.length;d++)if(b.hotSpots[d]
 function(){Za=!0;clearTimeout(Qa);C&&C.destroy();Sa&&(g.removeEventListener("mousemove",ua,!1),g.removeEventListener("mouseup",ma,!1),s.removeEventListener("mozfullscreenchange",d,!1),s.removeEventListener("webkitfullscreenchange",d,!1),s.removeEventListener("msfullscreenchange",d,!1),s.removeEventListener("fullscreenchange",d,!1),E.removeEventListener("resize",z,!1),E.removeEventListener("orientationchange",z,!1),s.removeEventListener("keydown",V,!1),s.removeEventListener("keyup",R,!1),s.removeEventListener("blur",
 $,!1),g.removeEventListener("mouseleave",ma,!1));s.innerHTML="";s.classList.remove("pnlm-container");};}return {viewer:function(g,k){return new Ba(g,k)}}}(window,document);
 
-const stzhPanoramaCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica, \"Nimbus Sans L\", \"Liberation Sans\", Arial, sans-serif;background:#f4f4f4 url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A\") repeat;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:-webkit-grab;cursor:grab;cursor:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A\") 12 8, default}.pnlm-grabbing{cursor:-webkit-grabbing;cursor:grabbing;cursor:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A\") 12 8, default}.pnlm-sprite{background-image:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A\")}.pnlm-container:-webkit-full-screen{height:100% !important;width:100% !important;position:static !important}.pnlm-container:fullscreen{height:100% !important;width:100% !important;position:static !important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:0.25rem;background-color:#fff;border:0.0625rem solid #999;border-color:rgba(0, 0, 0, 0.4);border-radius:0.1875rem;cursor:pointer;z-index:2;transform:translateZ(624.9375rem)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:0.25rem;z-index:1}.pnlm-zoom-controls{width:1.625rem;height:3.25rem}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:0.1875rem 0.1875rem 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -1.625rem;border-top:0.0625rem solid #ddd;border-top-color:rgba(0, 0, 0, 0.1);border-radius:0 0 0.1875rem 0.1875rem}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:1.625rem;height:1.625rem}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:1.625rem;height:1.625rem;margin:-0.8125rem 0 0 -0.8125rem;background-color:rgba(255, 255, 255, 0.5);border-radius:0.8125rem;display:none}.pnlm-orientation-button-inactive{background-position:0 -9.75rem}.pnlm-orientation-button-active{background-position:0 -11.375rem}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -3.25rem}.pnlm-fullscreen-toggle-button-active{background-position:0 -4.875rem}.pnlm-panorama-info{position:absolute;bottom:0.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0 0.1875rem 0.1875rem 0;padding-right:0.625rem;color:#fff;text-align:left;display:none;z-index:2;transform:translateZ(624.9375rem)}.pnlm-title-box{position:relative;font-size:1.25rem;display:table;padding-left:0.3125rem;margin-bottom:0.1875rem}.pnlm-author-box{position:relative;font-size:0.75rem;display:table;padding-left:0.3125rem}.pnlm-load-box{position:absolute;top:50%;left:50%;width:12.5rem;height:9.375rem;margin:-4.6875rem 0 0 -6.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;text-align:center;font-size:1.25rem;display:none;color:#fff}.pnlm-load-box p{margin:1.25rem 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;margin:-0.625rem 0 0 -0.625rem;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:0.625rem;width:0.625rem;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:0.625rem;top:0}50%{left:0.625rem;top:0.625rem}75%{left:0;top:0.625rem}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:12.5rem;height:6.25rem;margin:-3.125rem 0 0 -6.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;text-align:center;font-size:1.25rem;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0, 0, 0, 0.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:0.9375rem;position:absolute;top:50%;left:50%;width:12.5rem;height:9.375rem;margin:-4.6875rem 0 0 -6.25rem;background-color:#000;border-radius:0.1875rem;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 0.3125rem 0 0.3125rem}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:0.6875rem;line-height:0.6875rem;color:#fff;padding:0.3125rem 0.5rem 0.3125rem 0.5rem;background:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;position:absolute;top:3.125rem;left:3.125rem;display:none;opacity:0;transition:opacity 0.3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:1.625rem;width:1.625rem;border-radius:0.8125rem}.pnlm-hotspot:hover{background-color:rgba(255, 255, 255, 0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -6.5rem}.pnlm-hotspot.pnlm-scene{background-position:0 -8.125rem}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:0.1875rem;background-color:rgba(0, 0, 0, 0.7);color:#fff;text-align:center;max-width:12.5rem;padding:0.3125rem 0.625rem;margin-left:-13.75rem;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:\"\";position:absolute;width:0;height:0;border-width:0.625rem;border-style:solid;border-color:rgba(0, 0, 0, 0.7) transparent transparent transparent;bottom:-1.25rem;left:-0.625rem;margin:0 50%}.pnlm-compass{position:absolute;width:3.125rem;height:3.125rem;right:0.25rem;bottom:0.25rem;border-radius:1.5625rem;background-image:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A\");cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:9.375rem;margin:0 auto;border:#fff 0.0625rem solid;height:0.375rem}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:0.75rem}.pnlm-fade-img{position:absolute;top:0;left:0}.pnlm-pointer{cursor:pointer}stzh-panorama{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;}stzh-panorama[hidden]{display:none}stzh-panorama::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-panorama::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-panorama *,stzh-panorama *::before,stzh-panorama *::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)}stzh-panorama .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-panorama .stzh-fylingfocus-focused{outline-style:none !important}stzh-panorama .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-panorama{}.stzh-panorama__hotspot{width:2.5rem;height:2.5rem}.stzh-panorama stzh-button.stzh-panorama__hotspot-button,.stzh-panorama stzh-button.stzh-panorama__control{--box-shadow:var(--stzh-box-shadow-popover);--border-width:0px}.stzh-panorama stzh-button.stzh-panorama__hotspot-button.is-info{--cursor:default}.stzh-panorama__hotspot-tooltip{white-space:nowrap}.stzh-panorama__controls{bottom:var(--stzh-space-small);right:var(--stzh-space-small);z-index:2;pointer-events:none;position:absolute;display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-panorama__controls{bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-panorama__controls{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-panorama__controls{right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-panorama__controls{right:var(--stzh-space-large)}}@media print{.stzh-panorama__controls{display:none}}.stzh-panorama__control{pointer-events:all}.stzh-panorama__zoom-control{display:flex;flex-direction:column;box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--stzh-button-border-radius);visibility:hidden}.stzh-panorama__zoom-control stzh-button.stzh-panorama__control{--box-shadow:none}.stzh-panorama__zoom-control stzh-button.stzh-panorama__control.is-zoom-in{--border-radius:var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0 0;margin-bottom:0.125rem}.stzh-panorama__zoom-control stzh-button.stzh-panorama__control.is-zoom-out{--border-radius:0 0 var(--stzh-button-border-radius) var(--stzh-button-border-radius)}.stzh-panorama__outside-controls{margin-top:var(--stzh-space-xxlarge);display:flex;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-small);column-gap:var(--stzh-space-small);row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-panorama__outside-controls{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-panorama__outside-controls{margin-top:var(--stzh-space-xxxxlarge)}}@media print{.stzh-panorama__outside-controls{display:none}}.stzh-panorama__outside-scenes-control{--border-color:var(--stzh-color-primary);width:auto}.stzh-panorama--is-fullscreen .stzh-panorama__zoom-control{visibility:visible}";
+const stzhPanoramaCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica, \"Nimbus Sans L\", \"Liberation Sans\", Arial, sans-serif;background:#f4f4f4 url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A\") repeat;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:-webkit-grab;cursor:grab;cursor:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A\") 12 8, default}.pnlm-grabbing{cursor:-webkit-grabbing;cursor:grabbing;cursor:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A\") 12 8, default}.pnlm-sprite{background-image:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A\")}.pnlm-container:-webkit-full-screen{height:100% !important;width:100% !important;position:static !important}.pnlm-container:fullscreen{height:100% !important;width:100% !important;position:static !important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:0.25rem;background-color:#fff;border:0.0625rem solid #999;border-color:rgba(0, 0, 0, 0.4);border-radius:0.1875rem;cursor:pointer;z-index:2;transform:translateZ(624.9375rem)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:0.25rem;z-index:1}.pnlm-zoom-controls{width:1.625rem;height:3.25rem}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:0.1875rem 0.1875rem 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -1.625rem;border-top:0.0625rem solid #ddd;border-top-color:rgba(0, 0, 0, 0.1);border-radius:0 0 0.1875rem 0.1875rem}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:1.625rem;height:1.625rem}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:1.625rem;height:1.625rem;margin:-0.8125rem 0 0 -0.8125rem;background-color:rgba(255, 255, 255, 0.5);border-radius:0.8125rem;display:none}.pnlm-orientation-button-inactive{background-position:0 -9.75rem}.pnlm-orientation-button-active{background-position:0 -11.375rem}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -3.25rem}.pnlm-fullscreen-toggle-button-active{background-position:0 -4.875rem}.pnlm-panorama-info{position:absolute;bottom:0.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0 0.1875rem 0.1875rem 0;padding-right:0.625rem;color:#fff;text-align:left;display:none;z-index:2;transform:translateZ(624.9375rem)}.pnlm-title-box{position:relative;font-size:1.25rem;display:table;padding-left:0.3125rem;margin-bottom:0.1875rem}.pnlm-author-box{position:relative;font-size:0.75rem;display:table;padding-left:0.3125rem}.pnlm-load-box{position:absolute;top:50%;left:50%;width:12.5rem;height:9.375rem;margin:-4.6875rem 0 0 -6.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;text-align:center;font-size:1.25rem;display:none;color:#fff}.pnlm-load-box p{margin:1.25rem 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;margin:-0.625rem 0 0 -0.625rem;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:0.625rem;width:0.625rem;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:0.625rem;top:0}50%{left:0.625rem;top:0.625rem}75%{left:0;top:0.625rem}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:12.5rem;height:6.25rem;margin:-3.125rem 0 0 -6.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;text-align:center;font-size:1.25rem;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0, 0, 0, 0.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:0.9375rem;position:absolute;top:50%;left:50%;width:12.5rem;height:9.375rem;margin:-4.6875rem 0 0 -6.25rem;background-color:#000;border-radius:0.1875rem;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 0.3125rem 0 0.3125rem}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:0.6875rem;line-height:0.6875rem;color:#fff;padding:0.3125rem 0.5rem 0.3125rem 0.5rem;background:rgba(0, 0, 0, 0.7);border-radius:0.1875rem;position:absolute;top:3.125rem;left:3.125rem;display:none;opacity:0;transition:opacity 0.3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:1.625rem;width:1.625rem;border-radius:0.8125rem}.pnlm-hotspot:hover{background-color:rgba(255, 255, 255, 0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -6.5rem}.pnlm-hotspot.pnlm-scene{background-position:0 -8.125rem}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:0.1875rem;background-color:rgba(0, 0, 0, 0.7);color:#fff;text-align:center;max-width:12.5rem;padding:0.3125rem 0.625rem;margin-left:-13.75rem;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:\"\";position:absolute;width:0;height:0;border-width:0.625rem;border-style:solid;border-color:rgba(0, 0, 0, 0.7) transparent transparent transparent;bottom:-1.25rem;left:-0.625rem;margin:0 50%}.pnlm-compass{position:absolute;width:3.125rem;height:3.125rem;right:0.25rem;bottom:0.25rem;border-radius:1.5625rem;background-image:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A\");cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:9.375rem;margin:0 auto;border:#fff 0.0625rem solid;height:0.375rem}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:0.75rem}.pnlm-fade-img{position:absolute;top:0;left:0}.pnlm-pointer{cursor:pointer}stzh-panorama{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;}stzh-panorama[hidden]{display:none}stzh-panorama::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-panorama::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-panorama *,stzh-panorama *::before,stzh-panorama *::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)}stzh-panorama .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-panorama .stzh-fylingfocus-focused{outline-style:none !important}stzh-panorama .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-panorama__hotspot{width:2.5rem;height:2.5rem}.stzh-panorama stzh-button.stzh-panorama__hotspot-button,.stzh-panorama stzh-button.stzh-panorama__control{--box-shadow:var(--stzh-box-shadow-popover);--border-width:0px}.stzh-panorama stzh-button.stzh-panorama__hotspot-button.is-info{--cursor:default}.stzh-panorama__hotspot-tooltip{white-space:nowrap}.stzh-panorama__sceneselector{bottom:var(--stzh-space-xsmall);left:var(--stzh-space-xsmall);z-index:2;position:absolute;display:flex;gap:var(--stzh-space-xsmall)}@media print{.stzh-panorama__sceneselector{display:none}}@media screen and (min-width: 900px){.stzh-panorama__sceneselector{bottom:var(--stzh-space-large);left:var(--stzh-space-large)}}.stzh-panorama__sceneselector-dropdown{--color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-grey90);--icon-angle-color:var(--stzh-color-grey80);--hover-icon-angle-color:var(--stzh-color-grey80);--border-color:var(--stzh-color-white);--hover-border-color:var(--stzh-color-white);--focus-border-color:var(--stzh-color-white);--focus-background-color:var(--stzh-color-white)}.stzh-panorama__sceneselector-dropdown *{box-sizing:border-box}.stzh-panorama__copyright{background-color:var(--stzh-color-black50op);color:var(--stzh-color-white80op);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);white-space:nowrap;display:flex;justify-content:center;align-items:center}.stzh-panorama__controls{bottom:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall);z-index:2;pointer-events:none;position:absolute;display:flex;flex-direction:row;gap:var(--stzh-space-xxsmall)}@media print{.stzh-panorama__controls{display:none}}@media screen and (min-width: 900px){.stzh-panorama__controls{bottom:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-panorama__control{pointer-events:all}.stzh-panorama__control--show-medium{visibility:hidden}@media screen and (min-width: 900px){.stzh-panorama__control--show-medium{visibility:visible}}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -153,7 +153,7 @@ const StzhPanorama = class {
       if (options.type === "scene") {
         element.classList.add(CLASS_HOTSPOT_BUTTON_SCENE);
       }
-      else if (options.url) {
+      else if (options.url && !options.text) {
         element.classList.add(CLASS_HOTSPOT_BUTTON_LINK);
         element.setAttribute("href", options.url);
         element.setAttribute("target", "_blank");
@@ -169,9 +169,30 @@ const StzhPanorama = class {
       if (options.text) {
         const tooltip = document.createElement("stzh-tooltip");
         tooltip.label = this.localization.hotspotLabel;
-        tooltip.content = options.text;
         tooltip.placement = "top";
+        tooltip.type = "button";
         tooltip.className = CLASS_HOTSPOT_TOOLTIP;
+        if (options.url) {
+          const tooltipContentSlot = document.createElement("div");
+          tooltipContentSlot.slot = "content";
+          const text = document.createElement("stzh-text");
+          text.font = "heavy";
+          text.curve = "caption";
+          text.textContent = options.text;
+          tooltipContentSlot.appendChild(text);
+          const link = document.createElement("stzh-link");
+          link.label = this.localization.moreInformation;
+          link.href = options.url;
+          link.target = "_blank";
+          link.icon = "arrow-right";
+          link.iconPosition = "right";
+          link.size = "small";
+          tooltipContentSlot.appendChild(link);
+          tooltip.appendChild(tooltipContentSlot);
+        }
+        else {
+          tooltip.content = options.text;
+        }
         tooltip.appendChild(element);
         hotspotDiv.appendChild(tooltip);
       }
@@ -179,13 +200,13 @@ const StzhPanorama = class {
         hotspotDiv.appendChild(element);
       }
       // prevent that you can do panorama actions with arrow keys, zooming with shift etc.
-      element.addEventListener("keydown", (event) => {
+      element.addEventListener("keydown", event => {
         event.stopPropagation();
       });
     };
     this.handleSceneDropdownChange = async (event) => {
       const target = event.target;
-      const scene = await target.getValue();
+      const scene = (await target.getValue());
       this.scene = scene;
     };
     this.handleControlsKeydown = (event) => {
@@ -223,11 +244,14 @@ const StzhPanorama = class {
     };
     this.localization = undefined;
     this.caption = "";
+    this.heading = "";
     this.copyright = "";
     this.scene = undefined;
     this.sceneFadeDuration = 500;
     this.autoload = true;
     this.orientationOnByDefault = false;
+    this.showControls = true;
+    this.showHotspots = true;
     this.scenes = undefined;
     this.isOrientationSupported = false;
     this.isOrientationActive = false;
@@ -252,9 +276,11 @@ const StzhPanorama = class {
     }
     const scenesLib = {};
     // copy object and modify scene hotspots to build own more accessible elements
-    this._scenes.forEach((scene) => {
+    this._scenes.forEach(scene => {
       const { sceneId, imageTitle, imageSrc, imageAuthor, imageType, hotspots } = scene, sceneParams = __rest(scene, ["sceneId", "imageTitle", "imageSrc", "imageAuthor", "imageType", "hotspots"]);
-      scenesLib[sceneId] = Object.assign(Object.assign({}, sceneParams), { title: imageTitle, author: imageAuthor ? `${this.localization.by} ${imageAuthor}` : "", type: imageType, panorama: imageSrc, hotSpots: hotspots.map(hotSpot => (Object.assign(Object.assign({}, hotSpot), { URL: "", cssClass: CLASS_HOTSPOT, createTooltipFunc: this.createTooltip, createTooltipArgs: Object.assign(Object.assign({}, hotSpot), { url: hotSpot.url }) }))) });
+      scenesLib[sceneId] = Object.assign(Object.assign({}, sceneParams), { type: imageType, panorama: imageSrc, hotSpots: this.showHotspots
+          ? hotspots.map(hotSpot => (Object.assign(Object.assign({}, hotSpot), { URL: "", cssClass: CLASS_HOTSPOT, createTooltipFunc: this.createTooltip, createTooltipArgs: Object.assign(Object.assign({}, hotSpot), { url: hotSpot.url }) })))
+          : undefined });
     });
     this._scenesLibrary = scenesLib;
   }
@@ -296,9 +322,10 @@ const StzhPanorama = class {
    * If the action is already runing/animating, add the value to the current position and set as new target.
    */
   executeAction(name, getter, setter, value) {
-    this.actionRunning[name] = typeof this.actionRunning[name] !== "undefined" && this.actionRunning[name] !== 0
-      ? this.actionRunning[name] + value
-      : getter() + value;
+    this.actionRunning[name] =
+      typeof this.actionRunning[name] !== "undefined" && this.actionRunning[name] !== 0
+        ? this.actionRunning[name] + value
+        : getter() + value;
     setter(this.actionRunning[name], this.controlAnimationTime, () => {
       this.actionRunning = { [name]: 0 };
     });
@@ -326,7 +353,7 @@ const StzhPanorama = class {
           genericWebGLError: this.localization.genericWebGLError,
           textureSizeError: this.localization.textureSizeError,
           unknownError: this.localization.unknownError,
-        }
+        },
       },
     });
     this.viewer.on("load", () => {
@@ -335,7 +362,7 @@ const StzhPanorama = class {
         this.updateOrientationState();
         this.scene = this.viewer.getScene();
         this.stzhLoad.emit({
-          component: "stzh-panorama"
+          component: "stzh-panorama",
         });
       }
     });
@@ -347,7 +374,7 @@ const StzhPanorama = class {
       this.isFullscreen = status;
       this.stzhFullscreenChange.emit({
         component: "stzh-panorama",
-        value: this.isFullscreen
+        value: this.isFullscreen,
       });
     });
     this.viewer.on("scenechange", (sceneId) => {
@@ -355,19 +382,19 @@ const StzhPanorama = class {
       this.containerElement.focus();
       this.stzhSceneChange.emit({
         component: "stzh-panorama",
-        value: sceneId
+        value: sceneId,
       });
     });
     this.viewer.on("zoomchange", (zoom) => {
       this.stzhZoomChange.emit({
         component: "stzh-panorama",
-        value: zoom
+        value: zoom,
       });
     });
     this.viewer.on("animatefinished", (data) => {
       this.stzhChange.emit({
         component: "stzh-panorama",
-        value: data
+        value: data,
       });
     });
   }
@@ -395,17 +422,16 @@ const StzhPanorama = class {
       "stzh-panorama--is-motion": this.isOrientationActive,
       "stzh-panorama--is-fullscreen": this.isFullscreen,
     };
-    const sceneOptions = this._scenes
-      .map(({ sceneId, imageTitle }) => ({
+    const sceneOptions = this._scenes.map(({ sceneId, imageTitle }) => ({
       value: sceneId,
-      text: imageTitle
+      text: imageTitle,
     }));
-    const currentScene = this._scenes
-      .find(({ sceneId }) => sceneId === this.scene);
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("stzh-figure", { class: "stzh-panorama__figure", caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, index.h("stzh-ratio", null, index.h("div", { ref: (el) => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, index.h("div", { class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, index.h("div", { class: "stzh-panorama__zoom-control" }, index.h("stzh-button", { class: "stzh-panorama__control is-zoom-in", variant: "secondary", a11yLabel: this.localization.zoomIn, icon: "plus", iconOnly: true, size: "small", onClick: () => this.action("zoomIn") }), index.h("stzh-button", { class: "stzh-panorama__control is-zoom-out", variant: "secondary", a11yLabel: this.localization.zoomOut, icon: "minus", iconOnly: true, size: "small", onClick: () => this.action("zoomOut") })), this.isOrientationSupported &&
-      index.h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive ? this.localization.stopOrientation : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") }), index.h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen ? this.localization.disableFullscreenLabel : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))), index.h("div", { class: "stzh-panorama__outside-controls" }, index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }), this.isOrientationSupported &&
-      index.h("stzh-button", { class: "stzh-panorama__outside-control", variant: "secondary", label: this.isOrientationActive ? this.localization.stopOrientation : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.isFullscreen ? this.localization.disableFullscreenLabel : this.localization.enableFullscreenLabel, variant: "secondary", icon: "expand", size: "small", onClick: () => this.action("fullscreen") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), index.h("stzh-button", { class: "stzh-panorama__outside-control", label: this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), sceneOptions.length > 1 &&
-      index.h("stzh-dropdown", { class: "stzh-panorama__outside-scenes-control", size: "small", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })))));
+    const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("stzh-figure", { class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, index.h("stzh-ratio", null, index.h("div", { ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, index.h("div", { class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (index.h("stzh-dropdown", { class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), index.h("div", { class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright)), index.h("div", { class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (index.h(index.Fragment, null, index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), index.h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (index.h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        ? this.localization.stopOrientation
+        : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), index.h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+        ? this.localization.disableFullscreenLabel
+        : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {