@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/collection/components/stzh-panorama/stzh-panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-panorama.js","sourceRoot":"","sources":["../../../../src/components/stzh-panorama/stzh-panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  PanoramaScene,\n  PanoramaScenesLibrary,\n  StzhDropdownChangeEvent,\n  StzhPanoramaChangeEvent,\n  StzhPanoramaFullscreenChangeEvent,\n  StzhPanoramaLoadEvent,\n  StzhPanoramaSceneChangeEvent,\n  StzhPanoramaZoomChangeEvent,\n} from \"../../index\";\n\nimport { StzhPanoramaLocalizedText } from \"./stzh-panorama.localization\";\n\nimport \"pannellum\";\n\nconst CLASS_HOTSPOT = \"stzh-panorama__hotspot\";\nconst CLASS_HOTSPOT_TOOLTIP = \"stzh-panorama__hotspot-tooltip\";\nconst CLASS_HOTSPOT_BUTTON = \"stzh-panorama__hotspot-button\";\nconst CLASS_HOTSPOT_BUTTON_SCENE = \"is-scene\";\nconst CLASS_HOTSPOT_BUTTON_INFO = \"is-info\";\nconst CLASS_HOTSPOT_BUTTON_LINK = \"is-link\";\n\nconst ICON_HOTSPOT_SCENE = \"arrow-up\";\nconst ICON_HOTSPOT_DEFAULT = \"info-help\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-panorama\",\n  styleUrl: \"stzh-panorama.scss\",\n})\nexport class StzhPanorama {\n  /** Translation strings */\n  @Prop() localization: StzhPanoramaLocalizedText;\n\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Current scene */\n  @Prop({ mutable: true }) scene: string;\n\n  /** Fade duration on scene change */\n  @Prop() sceneFadeDuration = 500;\n\n  /** Whether to autoload panorama on pageload */\n  @Prop() autoload: boolean = true;\n\n  /** If set to true, device orientation control will be used when the panorama is loaded, if the device supports it. If false, device orientation control needs to be activated by pressing a button. */\n  @Prop() orientationOnByDefault: boolean = false;\n\n  /** If set to false, moving/paning/zooming controls will be hidden. e.g. when embedding the panorama into content columns. */\n  @Prop() showControls: boolean = true;\n\n  /** If set to false, hotspots will be hidden. e.g. when embedding the panorama into content columns. */\n  @Prop() showHotspots: boolean = true;\n\n  /**\n   * Available scenes\n   *\n   * An array of objects including `sceneId`, `imageTitle`, `imageSrc`, optionally `imageAuthor`, `imageType`, `caption`, `pitch`, `yaw`, `hfov` and `hotspots`\n   * `hotspots` can be an array of objects including `pitch`, `yaw`, `type`, `text`, optionally `url`, `id`, `sceneId`, `targetPitch` and `targetYaw`\n   *\n   * See also https://pannellum.org/documentation/reference/\n   */\n  @Prop() scenes: PanoramaScene[] | string;\n  private _scenes: PanoramaScene[];\n  private _scenesLibrary: PanoramaScenesLibrary;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  /** Get viewer instance */\n  @Method()\n  async getViewer(): Promise<any> {\n    return this.viewer;\n  }\n\n  @Watch(\"scenes\")\n  scenesWatcher(newValue: PanoramaScene[] | string) {\n    if (!this.localization) {\n      return;\n    }\n\n    if (typeof newValue === \"string\") {\n      this._scenes = JSON.parse(newValue);\n    } else if (newValue) {\n      this._scenes = newValue;\n    } else {\n      throw new Error('\"scenes\" is empty');\n    }\n\n    const scenesLib: PanoramaScenesLibrary = {};\n\n    // copy object and modify scene hotspots to build own more accessible elements\n    this._scenes.forEach(scene => {\n      const { sceneId, imageTitle, imageSrc, imageAuthor, imageType, hotspots, ...sceneParams } = scene;\n\n      scenesLib[sceneId] = {\n        ...sceneParams,\n        type: imageType,\n        panorama: imageSrc,\n        hotSpots: this.showHotspots\n          ? hotspots.map(hotSpot => ({\n              ...hotSpot,\n              URL: \"\", // switch hotspot into non url info spot to be able to create accessible link\n              cssClass: CLASS_HOTSPOT,\n              createTooltipFunc: this.createTooltip,\n              createTooltipArgs: { ...hotSpot, url: hotSpot.url },\n            }))\n          : undefined,\n      };\n    });\n\n    this._scenesLibrary = scenesLib;\n  }\n\n  @Watch(\"scene\")\n  sceneWatcher(newValue: string) {\n    this.viewer.loadScene(newValue);\n  }\n\n  @Watch(\"autoload\")\n  @Watch(\"scenes\")\n  @Watch(\"type\")\n  @Watch(\"localization\")\n  @Watch(\"orientationOnByDefault\")\n  @Watch(\"sceneFadeDuration\")\n  updateWatcher() {\n    if (this.viewer) {\n      this.viewer.destroy();\n      this.viewer = null;\n    }\n  }\n\n  // @Listen(\"load\", { target: \"window\" })\n  // @Listen(\"deviceorientation\", { target: \"window\" })\n  // @Listen(\"pageshow\", { target: \"window\" })\n  // handleLoad() {\n  //   if (this.viewer) {\n  //     requestAnimationFrame(() => {\n  //       this.viewer.resize();\n  //     });\n  //   }\n  // }\n\n  /** Load event */\n  @Event() stzhLoad: EventEmitter<StzhPanoramaLoadEvent>;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhPanoramaChangeEvent>;\n\n  /** Fullscreen change event */\n  @Event()\n  stzhFullscreenChange: EventEmitter<StzhPanoramaFullscreenChangeEvent>;\n\n  /** Scene change event */\n  @Event() stzhSceneChange: EventEmitter<StzhPanoramaSceneChangeEvent>;\n\n  /** Zoom change event */\n  @Event() stzhZoomChange: EventEmitter<StzhPanoramaZoomChangeEvent>;\n\n  @State() isOrientationSupported = false;\n  @State() isOrientationActive = false;\n  @State() isFullscreen = false;\n\n  private viewer: any;\n  private containerElement: HTMLElement;\n  private actionRunning: { [key: string]: number } = {};\n  private controlAnimationTime: number = 500;\n\n  private createTooltip = (hotspotDiv, options) => {\n    const element = document.createElement(\"stzh-button\");\n    element.classList.add(CLASS_HOTSPOT_BUTTON);\n\n    if (options.type === \"scene\") {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_SCENE);\n    } else if (options.url && !options.text) {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_LINK);\n      element.setAttribute(\"href\", options.url);\n      element.setAttribute(\"target\", \"_blank\");\n    } else {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_INFO);\n    }\n\n    element.icon = options.type === \"scene\" ? ICON_HOTSPOT_SCENE : ICON_HOTSPOT_DEFAULT;\n    element.iconOnly = true;\n    element.rounded = true;\n    element.size = \"small\";\n    element.variant = \"secondary\";\n\n    if (options.text) {\n      const tooltip = document.createElement(\"stzh-tooltip\");\n      tooltip.label = this.localization.hotspotLabel;\n      tooltip.placement = \"top\";\n      tooltip.type = \"button\";\n      tooltip.className = CLASS_HOTSPOT_TOOLTIP;\n\n      if (options.url) {\n        const tooltipContentSlot = document.createElement(\"div\");\n        tooltipContentSlot.slot = \"content\";\n\n        const text = document.createElement(\"stzh-text\");\n        text.font = \"heavy\";\n        text.curve = \"caption\";\n        text.textContent = options.text;\n        tooltipContentSlot.appendChild(text);\n\n        const link = document.createElement(\"stzh-link\");\n        link.label = this.localization.moreInformation;\n        link.href = options.url;\n        link.target = \"_blank\";\n        link.icon = \"arrow-right\";\n        link.iconPosition = \"right\";\n        link.size = \"small\";\n        tooltipContentSlot.appendChild(link);\n\n        tooltip.appendChild(tooltipContentSlot);\n      } else {\n        tooltip.content = options.text;\n      }\n\n      tooltip.appendChild(element);\n      hotspotDiv.appendChild(tooltip);\n    } else {\n      hotspotDiv.appendChild(element);\n    }\n\n    // prevent that you can do panorama actions with arrow keys, zooming with shift etc.\n    element.addEventListener(\"keydown\", event => {\n      event.stopPropagation();\n    });\n  };\n\n  private handleSceneDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n    const scene = (await target.getValue()) as string;\n    this.scene = scene;\n  };\n\n  private handleControlsKeydown = (event: KeyboardEvent) => {\n    // prevent that you can do panorama actions with arrow keys, zooming with shift etc.\n    event.stopPropagation();\n  };\n\n  private action = (\n    type:\n      | \"zoomIn\"\n      | \"zoomOut\"\n      | \"fullscreen\"\n      | \"startOrientation\"\n      | \"stopOrientation\"\n      | \"panUp\"\n      | \"panDown\"\n      | \"panLeft\"\n      | \"panRight\"\n  ) => {\n    if (![\"startOrientation\", \"fullscreen\"].includes(type)) {\n      this.stopOrientation();\n    }\n\n    if (type === \"zoomIn\") {\n      this.executeAction(\"zoomIn\", this.viewer.getHfov, this.viewer.setHfov, -10);\n    } else if (type === \"zoomOut\") {\n      this.executeAction(\"zoomOut\", this.viewer.getHfov, this.viewer.setHfov, +10);\n    } else if (type === \"fullscreen\") {\n      this.viewer.toggleFullscreen();\n    } else if (type === \"startOrientation\") {\n      this.startOrientation();\n    } else if (type === \"panUp\") {\n      this.executeAction(\"panUp\", this.viewer.getPitch, this.viewer.setPitch, +10);\n    } else if (type === \"panDown\") {\n      this.executeAction(\"panDown\", this.viewer.getPitch, this.viewer.setPitch, -10);\n    } else if (type === \"panLeft\") {\n      this.executeAction(\"panLeft\", this.viewer.getYaw, this.viewer.setYaw, -10);\n    } else if (type === \"panRight\") {\n      this.executeAction(\"panRight\", this.viewer.getYaw, this.viewer.setYaw, +10);\n    }\n  };\n\n  private stopOrientation() {\n    if (this.viewer.isOrientationActive()) {\n      this.viewer.stopOrientation();\n\n      // trigger touchstart event to reset panorama rotation correctly\n      // old preview code:\n      // const evt = document.createEvent(\"HTMLEvents\");\n      // evt.initEvent(\"touchstart\", false, true);\n      // $(document).find(\".pnlm-dragfix\").get(0).dispatchEvent(evt);\n      // alternative: https://gist.github.com/morewry/538efb737ed9c4e432e4\n\n      var e = new window.Event(\"touchstart\");\n      this.element.querySelector(\".pnlm-dragfix\").dispatchEvent(e);\n\n      this.updateOrientationState();\n    }\n  }\n\n  private startOrientation() {\n    if (this.viewer.isOrientationSupported()) {\n      this.viewer.startOrientation();\n      this.updateOrientationState();\n    }\n  }\n\n  private updateOrientationState() {\n    this.isOrientationSupported = this.viewer.isOrientationSupported();\n    this.isOrientationActive = this.isOrientationSupported && this.viewer.isOrientationActive();\n  }\n\n  /**\n   * Execute a button control action.\n   * If the action is already runing/animating, add the value to the current position and set as new target.\n   */\n  private executeAction(name, getter, setter, value) {\n    this.actionRunning[name] =\n      typeof this.actionRunning[name] !== \"undefined\" && this.actionRunning[name] !== 0\n        ? this.actionRunning[name] + value\n        : getter() + value;\n\n    setter(this.actionRunning[name], this.controlAnimationTime, () => {\n      this.actionRunning = { [name]: 0 };\n    });\n  }\n\n  private initViewer() {\n    this.viewer = window.pannellum.viewer(\n      this.containerElement,\n      // https://pannellum.org/documentation/reference/\n      {\n        scenes: this._scenesLibrary,\n        default: {\n          firstScene: this.scene,\n          showControls: false, // we show our own controls (zoom in/out and fullscreen)\n          sceneFadeDuration: this.sceneFadeDuration,\n          autoLoad: this.autoload,\n          compass: false,\n          orientationOnByDefault: this.orientationOnByDefault,\n          strings: {\n            loadButtonLabel: this.localization.loadButtonLabel,\n            loadingLabel: this.localization.loadingLabel,\n            bylineLabel: this.localization.bylineLabel,\n            noPanoramaError: this.localization.noPanoramaError,\n            fileAccessError: this.localization.fileAccessError,\n            malformedURLError: this.localization.malformedURLError,\n            iOS8WebGLError: this.localization.iOS8WebGLError,\n            genericWebGLError: this.localization.genericWebGLError,\n            textureSizeError: this.localization.textureSizeError,\n            unknownError: this.localization.unknownError,\n          },\n        },\n      }\n    );\n\n    this.viewer.on(\"load\", () => {\n      if (this.viewer) {\n        // update classes for orientation control when a new scene has been loaded\n        this.updateOrientationState();\n        this.scene = this.viewer.getScene();\n\n        this.stzhLoad.emit({\n          component: \"stzh-panorama\",\n        });\n      }\n    });\n\n    this.viewer.on(\"touchstart\", () => {\n      // update classes for orientation control when user interacts with panorama\n      this.updateOrientationState();\n    });\n\n    this.viewer.on(\"fullscreenchange\", (status: boolean) => {\n      this.isFullscreen = status;\n\n      this.stzhFullscreenChange.emit({\n        component: \"stzh-panorama\",\n        value: this.isFullscreen,\n      });\n    });\n\n    this.viewer.on(\"scenechange\", (sceneId: string) => {\n      // set focus back to container when scene has been changed\n      this.containerElement.focus();\n\n      this.stzhSceneChange.emit({\n        component: \"stzh-panorama\",\n        value: sceneId,\n      });\n    });\n\n    this.viewer.on(\"zoomchange\", (zoom: number) => {\n      this.stzhZoomChange.emit({\n        component: \"stzh-panorama\",\n        value: zoom,\n      });\n    });\n\n    this.viewer.on(\"animatefinished\", (data: { pitch: number; yaw: number; hfov: number }) => {\n      this.stzhChange.emit({\n        component: \"stzh-panorama\",\n        value: data,\n      });\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"panorama\");\n    }\n\n    this.scenesWatcher(this.scenes);\n  }\n\n  async componentDidRender() {\n    if (this.viewer) {\n      return;\n    }\n\n    this.initViewer();\n  }\n\n  disconnectedCallback() {\n    if (this.viewer) {\n      this.viewer.destroy();\n      this.viewer = null;\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-panorama\": true,\n      \"stzh-panorama--is-motion\": this.isOrientationActive,\n      \"stzh-panorama--is-fullscreen\": this.isFullscreen,\n    };\n\n    const sceneOptions = this._scenes.map(({ sceneId, imageTitle }) => ({\n      value: sceneId,\n      text: imageTitle,\n    }));\n\n    const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-figure\n            class=\"stzh-panorama__figure\"\n            heading={this.heading}\n            caption={currentScene.caption || this.caption}\n            copyright={currentScene.copyright || this.copyright}\n          >\n            <stzh-ratio>\n              <div\n                ref={el => (this.containerElement = el as HTMLElement)}\n                class=\"stzh-panorama__container\"\n                tabindex=\"0\"\n              >\n                <div class=\"stzh-panorama__sceneselector\">\n                  {sceneOptions.length > 1 && (\n                    <stzh-dropdown\n                      class={\"stzh-panorama__sceneselector-dropdown\"}\n                      size={\"small\"}\n                      popoverPlacement={\"top\"}\n                      label={this.localization.sceneLabel}\n                      labelHidden={true}\n                      noSearch={true}\n                      items={[this.scene]}\n                      options={sceneOptions}\n                      onStzhChange={this.handleSceneDropdownChange}\n                    ></stzh-dropdown>\n                  )}\n                  <div class=\"stzh-panorama__copyright\">\n                    {currentScene.imageAuthor || currentScene.copyright || this.copyright}\n                  </div>\n                </div>\n                <div class=\"stzh-panorama__controls\" onKeyDown={this.handleControlsKeydown}>\n                  {this.showControls && (\n                    <Fragment>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panLeft}\n                        variant=\"secondary\"\n                        icon=\"arrow-left\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panLeft\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panRight}\n                        variant=\"secondary\"\n                        icon=\"arrow-right\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panRight\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panUp}\n                        variant=\"secondary\"\n                        icon=\"arrow-up\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panUp\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panDown}\n                        variant=\"secondary\"\n                        icon=\"arrow-down\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panDown\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.zoomIn}\n                        variant=\"secondary\"\n                        icon=\"plus\"\n                        size=\"small\"\n                        onClick={() => this.action(\"zoomIn\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.zoomOut}\n                        variant=\"secondary\"\n                        icon=\"minus\"\n                        size=\"small\"\n                        onClick={() => this.action(\"zoomOut\")}\n                      ></stzh-button>\n                    </Fragment>\n                  )}\n\n                  {this.isOrientationSupported && (\n                    <stzh-button\n                      class=\"stzh-panorama__control\"\n                      variant=\"secondary\"\n                      a11yLabel={\n                        this.isOrientationActive\n                          ? this.localization.stopOrientation\n                          : this.localization.startOrientation\n                      }\n                      icon={this.isOrientationActive ? \"target-bullet\" : \"target\"}\n                      iconOnly={true}\n                      size=\"small\"\n                      onClick={() => this.action(this.isOrientationActive ? \"stopOrientation\" : \"startOrientation\")}\n                    ></stzh-button>\n                  )}\n\n                  <stzh-button\n                    class=\"stzh-panorama__control\"\n                    variant=\"secondary\"\n                    a11yLabel={\n                      this.isFullscreen\n                        ? this.localization.disableFullscreenLabel\n                        : this.localization.enableFullscreenLabel\n                    }\n                    icon={this.isFullscreen ? \"shrink\" : \"expand\"}\n                    iconOnly={true}\n                    size=\"small\"\n                    onClick={() => this.action(\"fullscreen\")}\n                  ></stzh-button>\n                </div>\n              </div>\n            </stzh-ratio>\n          </stzh-figure>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-panorama.js","sourceRoot":"","sources":["../../../../src/components/stzh-panorama/stzh-panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  PanoramaScene,\n  PanoramaScenesLibrary,\n  StzhDropdownChangeEvent,\n  StzhPanoramaChangeEvent,\n  StzhPanoramaFullscreenChangeEvent,\n  StzhPanoramaLoadEvent,\n  StzhPanoramaSceneChangeEvent,\n  StzhPanoramaZoomChangeEvent,\n} from \"../../index\";\n\nimport { StzhPanoramaLocalizedText } from \"./stzh-panorama.localization\";\n\nimport \"pannellum\";\n\nconst CLASS_HOTSPOT = \"stzh-panorama__hotspot\";\nconst CLASS_HOTSPOT_TOOLTIP = \"stzh-panorama__hotspot-tooltip\";\nconst CLASS_HOTSPOT_BUTTON = \"stzh-panorama__hotspot-button\";\nconst CLASS_HOTSPOT_BUTTON_SCENE = \"is-scene\";\nconst CLASS_HOTSPOT_BUTTON_INFO = \"is-info\";\nconst CLASS_HOTSPOT_BUTTON_LINK = \"is-link\";\n\nconst ICON_HOTSPOT_SCENE = \"arrow-up\";\nconst ICON_HOTSPOT_DEFAULT = \"info-help\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-panorama\",\n  styleUrl: \"stzh-panorama.scss\",\n})\nexport class StzhPanorama {\n  /** Translation strings */\n  @Prop() localization: StzhPanoramaLocalizedText;\n\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Current scene */\n  @Prop({ mutable: true }) scene: string;\n\n  /** Fade duration on scene change */\n  @Prop() sceneFadeDuration = 500;\n\n  /** Whether to autoload panorama on pageload */\n  @Prop() autoload: boolean = true;\n\n  /** If set to true, device orientation control will be used when the panorama is loaded, if the device supports it. If false, device orientation control needs to be activated by pressing a button. */\n  @Prop() orientationOnByDefault: boolean = false;\n\n  /** If set to false, moving/paning/zooming controls will be hidden. e.g. when embedding the panorama into content columns. */\n  @Prop() showControls: boolean = true;\n\n  /** If set to false, hotspots will be hidden. e.g. when embedding the panorama into content columns. */\n  @Prop() showHotspots: boolean = true;\n\n  /**\n   * Available scenes\n   *\n   * An array of objects including `sceneId`, `imageTitle`, `imageSrc`, optionally `imageAuthor`, `imageType`, `caption`, `pitch`, `yaw`, `hfov` and `hotspots`\n   * `hotspots` can be an array of objects including `pitch`, `yaw`, `type`, `text`, optionally `url`, `id`, `sceneId`, `targetPitch` and `targetYaw`\n   *\n   * See also https://pannellum.org/documentation/reference/\n   */\n  @Prop() scenes: PanoramaScene[] | string;\n  private _scenes: PanoramaScene[];\n  private _scenesLibrary: PanoramaScenesLibrary;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  /** Get viewer instance */\n  @Method()\n  async getViewer(): Promise<any> {\n    return this.viewer;\n  }\n\n  @Watch(\"scenes\")\n  scenesWatcher(newValue: PanoramaScene[] | string) {\n    if (!this.localization) {\n      return;\n    }\n\n    if (typeof newValue === \"string\") {\n      this._scenes = JSON.parse(newValue);\n    } else if (newValue) {\n      this._scenes = newValue;\n    } else {\n      throw new Error('\"scenes\" is empty');\n    }\n\n    const scenesLib: PanoramaScenesLibrary = {};\n\n    // copy object and modify scene hotspots to build own more accessible elements\n    this._scenes.forEach(scene => {\n      const { sceneId, imageTitle, imageSrc, imageAuthor, imageType, hotspots, ...sceneParams } = scene;\n\n      scenesLib[sceneId] = {\n        ...sceneParams,\n        type: imageType,\n        panorama: imageSrc,\n        hotSpots: this.showHotspots\n          ? hotspots.map(hotSpot => ({\n              ...hotSpot,\n              URL: \"\", // switch hotspot into non url info spot to be able to create accessible link\n              cssClass: CLASS_HOTSPOT,\n              createTooltipFunc: this.createTooltip,\n              createTooltipArgs: { ...hotSpot, url: hotSpot.url },\n            }))\n          : undefined,\n      };\n    });\n\n    this._scenesLibrary = scenesLib;\n  }\n\n  @Watch(\"scene\")\n  sceneWatcher(newValue: string) {\n    this.viewer.loadScene(newValue);\n  }\n\n  @Watch(\"autoload\")\n  @Watch(\"scenes\")\n  @Watch(\"type\")\n  @Watch(\"localization\")\n  @Watch(\"orientationOnByDefault\")\n  @Watch(\"sceneFadeDuration\")\n  updateWatcher() {\n    if (this.viewer) {\n      this.viewer.destroy();\n      this.viewer = null;\n    }\n  }\n\n  // @Listen(\"load\", { target: \"window\" })\n  // @Listen(\"deviceorientation\", { target: \"window\" })\n  // @Listen(\"pageshow\", { target: \"window\" })\n  // handleLoad() {\n  //   if (this.viewer) {\n  //     requestAnimationFrame(() => {\n  //       this.viewer.resize();\n  //     });\n  //   }\n  // }\n\n  /** Load event */\n  @Event() stzhLoad: EventEmitter<StzhPanoramaLoadEvent>;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhPanoramaChangeEvent>;\n\n  /** Fullscreen change event */\n  @Event()\n  stzhFullscreenChange: EventEmitter<StzhPanoramaFullscreenChangeEvent>;\n\n  /** Scene change event */\n  @Event() stzhSceneChange: EventEmitter<StzhPanoramaSceneChangeEvent>;\n\n  /** Zoom change event */\n  @Event() stzhZoomChange: EventEmitter<StzhPanoramaZoomChangeEvent>;\n\n  @State() isOrientationSupported = false;\n  @State() isOrientationActive = false;\n  @State() isFullscreen = false;\n\n  private viewer: any;\n  private containerElement: HTMLElement;\n  private actionRunning: { [key: string]: number } = {};\n  private controlAnimationTime: number = 500;\n\n  private createTooltip = (hotspotDiv, options) => {\n    const element = document.createElement(\"stzh-button\");\n    element.classList.add(CLASS_HOTSPOT_BUTTON);\n\n    if (options.type === \"scene\") {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_SCENE);\n    } else if (options.url && !options.text) {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_LINK);\n      element.setAttribute(\"href\", options.url);\n      element.setAttribute(\"target\", \"_blank\");\n    } else {\n      element.classList.add(CLASS_HOTSPOT_BUTTON_INFO);\n    }\n\n    element.icon = options.type === \"scene\" ? ICON_HOTSPOT_SCENE : ICON_HOTSPOT_DEFAULT;\n    element.iconOnly = true;\n    element.rounded = true;\n    element.size = \"small\";\n    element.variant = \"secondary\";\n\n    if (options.text) {\n      const tooltip = document.createElement(\"stzh-tooltip\");\n      tooltip.label = this.localization.hotspotLabel;\n      tooltip.placement = \"top\";\n      tooltip.type = \"button\";\n      tooltip.className = CLASS_HOTSPOT_TOOLTIP;\n\n      if (options.url) {\n        const tooltipContentSlot = document.createElement(\"div\");\n        tooltipContentSlot.slot = \"content\";\n\n        const text = document.createElement(\"stzh-text\");\n        text.font = \"heavy\";\n        text.curve = \"caption\";\n        text.textContent = options.text;\n        tooltipContentSlot.appendChild(text);\n\n        const link = document.createElement(\"stzh-link\");\n        link.label = this.localization.moreInformation;\n        link.href = options.url;\n        link.target = \"_blank\";\n        link.icon = \"arrow-right\";\n        link.iconPosition = \"right\";\n        link.size = \"small\";\n        tooltipContentSlot.appendChild(link);\n\n        tooltip.appendChild(tooltipContentSlot);\n      } else {\n        tooltip.content = options.text;\n      }\n\n      tooltip.appendChild(element);\n      hotspotDiv.appendChild(tooltip);\n    } else {\n      hotspotDiv.appendChild(element);\n    }\n\n    // prevent that you can do panorama actions with arrow keys, zooming with shift etc.\n    element.addEventListener(\"keydown\", event => {\n      event.stopPropagation();\n    });\n  };\n\n  private handleSceneDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n    const scene = (await target.getValue()) as string;\n    this.scene = scene;\n  };\n\n  private handleControlsKeydown = (event: KeyboardEvent) => {\n    // prevent that you can do panorama actions with arrow keys, zooming with shift etc.\n    event.stopPropagation();\n  };\n\n  private action = (\n    type:\n      | \"zoomIn\"\n      | \"zoomOut\"\n      | \"fullscreen\"\n      | \"startOrientation\"\n      | \"stopOrientation\"\n      | \"panUp\"\n      | \"panDown\"\n      | \"panLeft\"\n      | \"panRight\"\n  ) => {\n    if (![\"startOrientation\", \"fullscreen\"].includes(type)) {\n      this.stopOrientation();\n    }\n\n    if (type === \"zoomIn\") {\n      this.executeAction(\"zoomIn\", this.viewer.getHfov, this.viewer.setHfov, -10);\n    } else if (type === \"zoomOut\") {\n      this.executeAction(\"zoomOut\", this.viewer.getHfov, this.viewer.setHfov, +10);\n    } else if (type === \"fullscreen\") {\n      this.viewer.toggleFullscreen();\n    } else if (type === \"startOrientation\") {\n      this.startOrientation();\n    } else if (type === \"panUp\") {\n      this.executeAction(\"panUp\", this.viewer.getPitch, this.viewer.setPitch, +10);\n    } else if (type === \"panDown\") {\n      this.executeAction(\"panDown\", this.viewer.getPitch, this.viewer.setPitch, -10);\n    } else if (type === \"panLeft\") {\n      this.executeAction(\"panLeft\", this.viewer.getYaw, this.viewer.setYaw, -10);\n    } else if (type === \"panRight\") {\n      this.executeAction(\"panRight\", this.viewer.getYaw, this.viewer.setYaw, +10);\n    }\n  };\n\n  private stopOrientation() {\n    if (this.viewer.isOrientationActive()) {\n      this.viewer.stopOrientation();\n\n      // trigger touchstart event to reset panorama rotation correctly\n      // old preview code:\n      // const evt = document.createEvent(\"HTMLEvents\");\n      // evt.initEvent(\"touchstart\", false, true);\n      // $(document).find(\".pnlm-dragfix\").get(0).dispatchEvent(evt);\n      // alternative: https://gist.github.com/morewry/538efb737ed9c4e432e4\n\n      var e = new window.Event(\"touchstart\");\n      this.element.querySelector(\".pnlm-dragfix\").dispatchEvent(e);\n\n      this.updateOrientationState();\n    }\n  }\n\n  private startOrientation() {\n    if (this.viewer.isOrientationSupported()) {\n      this.viewer.startOrientation();\n      this.updateOrientationState();\n    }\n  }\n\n  private updateOrientationState() {\n    this.isOrientationSupported = this.viewer.isOrientationSupported();\n    this.isOrientationActive = this.isOrientationSupported && this.viewer.isOrientationActive();\n  }\n\n  /**\n   * Execute a button control action.\n   * If the action is already runing/animating, add the value to the current position and set as new target.\n   */\n  private executeAction(name, getter, setter, value) {\n    this.actionRunning[name] =\n      typeof this.actionRunning[name] !== \"undefined\" && this.actionRunning[name] !== 0\n        ? this.actionRunning[name] + value\n        : getter() + value;\n\n    setter(this.actionRunning[name], this.controlAnimationTime, () => {\n      this.actionRunning = { [name]: 0 };\n    });\n  }\n\n  private initViewer() {\n    this.viewer = window.pannellum.viewer(\n      this.containerElement,\n      // https://pannellum.org/documentation/reference/\n      {\n        scenes: this._scenesLibrary,\n        default: {\n          firstScene: this.scene,\n          showControls: false, // we show our own controls (zoom in/out and fullscreen)\n          sceneFadeDuration: this.sceneFadeDuration,\n          autoLoad: this.autoload,\n          compass: false,\n          orientationOnByDefault: this.orientationOnByDefault,\n          strings: {\n            loadButtonLabel: this.localization.loadButtonLabel,\n            loadingLabel: this.localization.loadingLabel,\n            bylineLabel: this.localization.bylineLabel,\n            noPanoramaError: this.localization.noPanoramaError,\n            fileAccessError: this.localization.fileAccessError,\n            malformedURLError: this.localization.malformedURLError,\n            iOS8WebGLError: this.localization.iOS8WebGLError,\n            genericWebGLError: this.localization.genericWebGLError,\n            textureSizeError: this.localization.textureSizeError,\n            unknownError: this.localization.unknownError,\n          },\n        },\n      }\n    );\n\n    this.viewer.on(\"load\", () => {\n      if (this.viewer) {\n        // update classes for orientation control when a new scene has been loaded\n        this.updateOrientationState();\n        this.scene = this.viewer.getScene();\n\n        this.stzhLoad.emit({\n          component: \"stzh-panorama\",\n        });\n      }\n    });\n\n    this.viewer.on(\"touchstart\", () => {\n      // update classes for orientation control when user interacts with panorama\n      this.updateOrientationState();\n    });\n\n    this.viewer.on(\"fullscreenchange\", (status: boolean) => {\n      this.isFullscreen = status;\n\n      this.stzhFullscreenChange.emit({\n        component: \"stzh-panorama\",\n        value: this.isFullscreen,\n      });\n    });\n\n    this.viewer.on(\"scenechange\", (sceneId: string) => {\n      // set focus back to container when scene has been changed\n      this.containerElement.focus();\n\n      this.stzhSceneChange.emit({\n        component: \"stzh-panorama\",\n        value: sceneId,\n      });\n    });\n\n    this.viewer.on(\"zoomchange\", (zoom: number) => {\n      this.stzhZoomChange.emit({\n        component: \"stzh-panorama\",\n        value: zoom,\n      });\n    });\n\n    this.viewer.on(\"animatefinished\", (data: { pitch: number; yaw: number; hfov: number }) => {\n      this.stzhChange.emit({\n        component: \"stzh-panorama\",\n        value: data,\n      });\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"panorama\");\n    }\n\n    this.scenesWatcher(this.scenes);\n  }\n\n  async componentDidRender() {\n    if (this.viewer) {\n      return;\n    }\n\n    this.initViewer();\n  }\n\n  disconnectedCallback() {\n    if (this.viewer) {\n      this.viewer.destroy();\n      this.viewer = null;\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-panorama\": true,\n      \"stzh-panorama--is-motion\": this.isOrientationActive,\n      \"stzh-panorama--is-fullscreen\": this.isFullscreen,\n    };\n\n    const sceneOptions = this._scenes.map(({ sceneId, imageTitle }) => ({\n      value: sceneId,\n      text: imageTitle,\n    }));\n\n    const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-figure\n            class=\"stzh-panorama__figure\"\n            heading={this.heading}\n            caption={currentScene.caption || this.caption}\n            copyright={currentScene.copyright || this.copyright}\n          >\n            <stzh-ratio>\n              <div\n                ref={el => (this.containerElement = el as HTMLElement)}\n                class=\"stzh-panorama__container\"\n                tabindex=\"0\"\n              >\n                <div class=\"stzh-panorama__sceneselector\">\n                  {sceneOptions.length > 1 && (\n                    <stzh-dropdown\n                      class={\"stzh-panorama__sceneselector-dropdown\"}\n                      size={\"small\"}\n                      popoverPlacement={\"top\"}\n                      label={this.localization.sceneLabel}\n                      labelHidden={true}\n                      noSearch={true}\n                      items={[this.scene]}\n                      options={sceneOptions}\n                      onStzhChange={this.handleSceneDropdownChange}\n                    ></stzh-dropdown>\n                  )}\n                  {(currentScene.imageAuthor || currentScene.copyright || this.copyright) && (\n                    <div class=\"stzh-panorama__copyright\">\n                      {currentScene.imageAuthor || currentScene.copyright || this.copyright}\n                    </div>\n                  )}\n                </div>\n                <div class=\"stzh-panorama__controls\" onKeyDown={this.handleControlsKeydown}>\n                  {this.showControls && (\n                    <Fragment>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panLeft}\n                        variant=\"secondary\"\n                        icon=\"arrow-left\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panLeft\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panRight}\n                        variant=\"secondary\"\n                        icon=\"arrow-right\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panRight\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panUp}\n                        variant=\"secondary\"\n                        icon=\"arrow-up\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panUp\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.panDown}\n                        variant=\"secondary\"\n                        icon=\"arrow-down\"\n                        size=\"small\"\n                        onClick={() => this.action(\"panDown\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.zoomIn}\n                        variant=\"secondary\"\n                        icon=\"plus\"\n                        size=\"small\"\n                        onClick={() => this.action(\"zoomIn\")}\n                      ></stzh-button>\n                      <stzh-button\n                        class=\"stzh-panorama__control stzh-panorama__control--show-medium\"\n                        iconOnly={true}\n                        a11y-label={this.localization.zoomOut}\n                        variant=\"secondary\"\n                        icon=\"minus\"\n                        size=\"small\"\n                        onClick={() => this.action(\"zoomOut\")}\n                      ></stzh-button>\n                    </Fragment>\n                  )}\n\n                  {this.isOrientationSupported && (\n                    <stzh-button\n                      class=\"stzh-panorama__control\"\n                      variant=\"secondary\"\n                      a11yLabel={\n                        this.isOrientationActive\n                          ? this.localization.stopOrientation\n                          : this.localization.startOrientation\n                      }\n                      icon={this.isOrientationActive ? \"target-bullet\" : \"target\"}\n                      iconOnly={true}\n                      size=\"small\"\n                      onClick={() => this.action(this.isOrientationActive ? \"stopOrientation\" : \"startOrientation\")}\n                    ></stzh-button>\n                  )}\n\n                  <stzh-button\n                    class=\"stzh-panorama__control\"\n                    variant=\"secondary\"\n                    a11yLabel={\n                      this.isFullscreen\n                        ? this.localization.disableFullscreenLabel\n                        : this.localization.enableFullscreenLabel\n                    }\n                    icon={this.isFullscreen ? \"shrink\" : \"expand\"}\n                    iconOnly={true}\n                    size=\"small\"\n                    onClick={() => this.action(\"fullscreen\")}\n                  ></stzh-button>\n                </div>\n              </div>\n            </stzh-ratio>\n          </stzh-figure>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-popover/stzh-popover.js

@@ -1,10 +1,10 @@
-import { Host, h, } from "@stencil/core";
-import { computePosition, offset, shift, flip, arrow, autoUpdate, } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
 import { isStzhElement } from "../../utils/utils";
-import { media } from "../../utils/media-utils";
+import { addMediaChangeListener, media, removeMediaChangeListener } from "../../utils/media-utils";
 import { waitForEvent } from "../../utils/event-utils";
-import { stopAnimations, animateTo } from "../../utils/animation-utils";
+import { animateTo, stopAnimations } from "../../utils/animation-utils";
 import Arrow from "../stzh-tooltip/assets/arrow.svg";
 const ANIMATION_SHOW_DURATION = 200;
 const ANIMATION_HIDE_DURATION = 300;
@@ -13,57 +13,45 @@ const ANIMATION_HIDE_DURATION_SMALL = 200;
 function animationContentWrapperShow() {
   const isSmall = media("small").matches;
   return {
-    keyframes: [
-      { opacity: "0" },
-      { opacity: "1" }
-    ],
+    keyframes: [{ opacity: "0" }, { opacity: "1" }],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: "linear"
-    }
+      easing: "linear",
+    },
   };
 }
 function animationContentWrapperHide() {
   const isSmall = media("small").matches;
   return {
-    keyframes: [
-      { opacity: "1" },
-      { opacity: "0" }
-    ],
+    keyframes: [{ opacity: "1" }, { opacity: "0" }],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: "linear"
-    }
+      easing: "linear",
+    },
   };
 }
 function animationDialogShow() {
   const isSmall = media("small").matches;
   return {
-    keyframes: [
-      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" },
-      { transform: "translateY(0px)" }
-    ],
+    keyframes: [{ transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }, { transform: "translateY(0px)" }],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: "linear"
-    }
+      easing: "linear",
+    },
   };
 }
 function animationDialogHide() {
   const isSmall = media("small").matches;
   return {
-    keyframes: [
-      { transform: "translateY(0px)" },
-      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }
-    ],
+    keyframes: [{ transform: "translateY(0px)" }, { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: "linear"
-    }
+      easing: "linear",
+    },
   };
 }
 const keyCode = {
-  ESC: 27
+  ESC: 27,
 };
 const CLASS_BODY_OPEN = "stzh-popover-open";
 let popoverCounter = 0;
@@ -77,6 +65,14 @@ export class StzhPopover {
   constructor() {
     this.initialTouchX = null;
     this.initialTouchY = null;
+    this.mediaChangeHandler = () => {
+      const isStzhHeaderStuck = document.documentElement.style.getPropertyValue("--stzh-header-is-stuck");
+      this.isHeaderStuckAndViewportMicro =
+        !media("small").matches && isStzhHeaderStuck === "1" && this.hasStzhHeaderParent;
+      if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {
+        this.branchInFromBody();
+      }
+    };
     this.handleKeydown = (event) => {
       if (event.keyCode === keyCode.ESC) {
         this.hide();
@@ -90,22 +86,22 @@ export class StzhPopover {
         const middleware = [
           offset({
             mainAxis: this.distance,
-            crossAxis: this.skidding
+            crossAxis: this.skidding,
           }),
           flip({
-            padding: 5
+            padding: 5,
           }),
           shift({
-            padding: 5
-          })
+            padding: 5,
+          }),
         ];
         if (this.variant === "tooltip") {
           middleware.push(arrow({
             element: this.arrowElement,
-            padding: 5
+            padding: 5,
           }));
         }
-        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerFirstElement, this.dialogElement, {
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData, } = await computePosition(this.triggerFirstElement, this.dialogElement, {
           strategy: this.strategy,
           placement: this.placement,
           middleware,
@@ -150,8 +146,7 @@ export class StzhPopover {
       const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
       const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
       const threshold = 70;
-      const isYSwipe = Math.abs(distY) >= threshold
-        && Math.abs(distX) <= threshold;
+      const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;
       if (isYSwipe) {
         this.hide();
       }
@@ -162,8 +157,7 @@ export class StzhPopover {
       var _a;
       let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (!trigger) {
-        const defaultSlot = Array.from(this.element.children)
-          .find(child => !child.hasAttribute("slot"));
+        const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute("slot"));
         trigger = defaultSlot;
       }
       if (trigger) {
@@ -182,12 +176,19 @@ export class StzhPopover {
     this.strategy = "absolute";
     this.localization = undefined;
     this.computedPlacement = undefined;
+    this.isHeaderStuckAndViewportMicro = undefined;
+    this.isBranchedOutToBody = undefined;
+    this.hasStzhHeaderParent = undefined;
   }
   /** Show popover content */
   async show() {
     if (this.open) {
       return;
     }
+    this.mediaChangeHandler();
+    if (this.isHeaderStuckAndViewportMicro) {
+      this.branchOutToBody();
+    }
     this.toggledByMethod = true;
     this.open = true;
     return waitForEvent(this.element, "stzhOpened");
@@ -199,7 +200,12 @@ export class StzhPopover {
     }
     this.toggledByMethod = true;
     this.open = false;
-    return waitForEvent(this.element, "stzhClosed");
+    await waitForEvent(this.element, "stzhClosed");
+    this.mediaChangeHandler();
+    if (this.isHeaderStuckAndViewportMicro) {
+      this.branchInFromBody();
+    }
+    return true;
   }
   /** Toggle popover content */
   async toggle() {
@@ -217,10 +223,8 @@ export class StzhPopover {
     if (!this.open) {
       return;
     }
-    const isClickOutside = event.target !== this.dialogElement
-      && this.dialogElement.contains(event.target) === false;
-    const isClickTrigger = event.target === this.triggerElement
-      || this.triggerElement.contains(event.target);
+    const isClickOutside = event.target !== this.dialogElement && this.dialogElement.contains(event.target) === false;
+    const isClickTrigger = event.target === this.triggerElement || this.triggerElement.contains(event.target);
     if (isClickOutside && !isClickTrigger) {
       this.hide();
     }
@@ -240,7 +244,7 @@ export class StzhPopover {
       await Promise.all([
         stopAnimations(this.contentWrapperElement),
         stopAnimations(this.contentElement),
-        stopAnimations(this.dialogElement)
+        stopAnimations(this.dialogElement),
       ]);
       // safari seems to need will-change,
       // otherwise it has problems animating the element with the drop shadow
@@ -248,11 +252,11 @@ export class StzhPopover {
       this.contentWrapperElement.hidden = false;
       await Promise.all([
         animateTo(media("small").matches ? this.dialogElement : this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options),
       ]);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
-          component: "stzh-popover"
+          component: "stzh-popover",
         });
       }
     }
@@ -267,7 +271,7 @@ export class StzhPopover {
       await Promise.all([
         stopAnimations(this.contentWrapperElement),
         stopAnimations(this.contentElement),
-        stopAnimations(this.dialogElement)
+        stopAnimations(this.dialogElement),
       ]);
       await Promise.all([
         animateTo(media("small").matches ? this.dialogElement : this.contentWrapperElement, animationHide.keyframes, animationHide.options),
@@ -277,7 +281,7 @@ export class StzhPopover {
       this.dialogElement.style.willChange = "auto";
       if (this.toggledByMethod) {
         this.stzhClosed.emit({
-          component: "stzh-popover"
+          component: "stzh-popover",
         });
       }
     }
@@ -291,8 +295,30 @@ export class StzhPopover {
       this.distance = this.variant === "tooltip" ? 12 : 8;
     }
   }
+  setStzhHeaderParent() {
+    let parent = this.element.parentElement;
+    while (parent) {
+      if (parent.tagName && parent.tagName.toLowerCase() === "stzh-header") {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+  branchOutToBody() {
+    document.body.append(this.element);
+    this.parentNode.appendChild(this.triggerElement);
+    this.isBranchedOutToBody = true;
+  }
+  branchInFromBody() {
+    this.parentNode.appendChild(this.element);
+    this.rootElement.prepend(this.triggerElement);
+    this.isBranchedOutToBody = false;
+  }
   async componentWillLoad() {
     this.id = `stzh-popover-${popoverCounter++}`;
+    this.parentNode = this.element.parentNode;
+    this.hasStzhHeaderParent = this.setStzhHeaderParent();
     this.distanceWatcher(this.distance);
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "popover");
@@ -301,8 +327,7 @@ export class StzhPopover {
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
     const isStzh = isStzhElement(this.triggerFirstElement);
-    this.triggerFirstElement
-      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "true");
+    this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
@@ -310,30 +335,27 @@ export class StzhPopover {
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
     const isStzh = isStzhElement(this.triggerFirstElement);
-    this.triggerFirstElement
-      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "false");
+    this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
   }
   componentDidRender() {
     this.computePosition();
+    this.mediaChangeHandler();
     this.open ? this.popoverShown() : this.popoverHidden();
     const isStzh = isStzhElement(this.triggerFirstElement);
-    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby"))
-      || (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
-      this.triggerFirstElement
-        .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
     }
-    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-label"))
-      || (!isStzh && !this.triggerFirstElement.getAttribute("aria-label"))) {
-      this.triggerFirstElement
-        .setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-label")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("aria-label"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
     }
-    if ((isStzh && !this.triggerFirstElement.getAttribute("analytics-id"))
-      || (!isStzh && !this.triggerFirstElement.getAttribute("s-object-id"))) {
-      this.triggerFirstElement
-        .setAttribute(isStzh ? "analytics-id" : "s-object-id", this.label);
+    if ((isStzh && !this.triggerFirstElement.getAttribute("analytics-id")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("s-object-id"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "analytics-id" : "s-object-id", this.label);
     }
   }
   componentDidUpdate() {
@@ -345,21 +367,23 @@ export class StzhPopover {
     this.trap = createFocusTrap(this.dialogElement, {
       fallbackFocus: this.dialogElement,
       clickOutsideDeactivates: true,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: true,
     });
     if (this.open) {
       this.popoverShown();
     }
   }
   connectedCallback() {
+    addMediaChangeListener(this.mediaChangeHandler);
     this.init();
     this.observer = new MutationObserver(this.init);
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
   disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
     if (this.observer) {
       this.observer.disconnect();
     }
@@ -377,10 +401,9 @@ export class StzhPopover {
       [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
       [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,
       [`stzh-popover--${this.size}`]: !!this.size,
-      [`stzh-popover--${this.variant}`]: !!this.variant
+      [`stzh-popover--${this.variant}`]: !!this.variant,
     };
-    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
-      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))), h("div", { class: "stzh-popover__content-slot-wrapper" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" })), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))))))))));
+    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, ref: el => (this.rootElement = el) }, h("div", { ref: el => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { ref: el => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: el => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: el => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" && (h("div", { class: "stzh-popover__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow })), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))), h("div", { class: "stzh-popover__content-slot-wrapper" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" })), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))))))))));
   }
   static get is() { return "stzh-popover"; }
   static get encapsulation() { return "scoped"; }
@@ -588,7 +611,10 @@ export class StzhPopover {
   }
   static get states() {
     return {
-      "computedPlacement": {}
+      "computedPlacement": {},
+      "isHeaderStuckAndViewportMicro": {},
+      "isBranchedOutToBody": {},
+      "hasStzhHeaderParent": {}
     };
   }
   static get events() {
@@ -699,7 +725,7 @@ export class StzhPopover {
       },
       "hide": {
         "complexType": {
-          "signature": "() => Promise<void>",
+          "signature": "() => Promise<boolean>",
           "parameters": [],
           "references": {
             "Promise": {
@@ -707,7 +733,7 @@ export class StzhPopover {
               "id": "global::Promise"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<boolean>"
         },
         "docs": {
           "text": "Hide popover content",
@@ -716,7 +742,7 @@ export class StzhPopover {
       },
       "toggle": {
         "complexType": {
-          "signature": "() => Promise<void>",
+          "signature": "() => Promise<boolean | void>",
           "parameters": [],
           "references": {
             "Promise": {
@@ -724,7 +750,7 @@ export class StzhPopover {
               "id": "global::Promise"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<boolean | void>"
         },
         "docs": {
           "text": "Toggle popover content",