@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/src/OverlayStack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OverlayStack.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Overlay } from './Overlay.js';\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n    private get document(): Document {\n        return this.root.ownerDocument /* c8 ignore next */ || document;\n    }\n\n    private pointerdownPath?: EventTarget[];\n\n    private root: HTMLElement = document.body;\n\n    stack: Overlay[] = [];\n\n    constructor() {\n        this.bindEvents();\n    }\n\n    bindEvents(): void {\n        this.document.addEventListener('pointerdown', this.handlePointerdown);\n        this.document.addEventListener('pointerup', this.handlePointerup);\n        this.document.addEventListener('keydown', this.handleKeydown);\n    }\n\n    private closeOverlay(overlay: Overlay): void {\n        const overlayIndex = this.stack.indexOf(overlay);\n        if (overlayIndex > -1) {\n            this.stack.splice(overlayIndex, 1);\n        }\n        overlay.open = false;\n    }\n\n    /**\n     * Cach the `pointerdownTarget` for later testing\n     *\n     * @param event {ClickEvent}\n     */\n    handlePointerdown = (event: Event): void => {\n        this.pointerdownPath = event.composedPath();\n    };\n\n    /**\n     * Close all overlays that are not ancestors of this click event\n     *\n     * @param event {ClickEvent}\n     */\n    handlePointerup = (): void => {\n        if (!this.stack.length) return;\n        if (!this.pointerdownPath?.length) return;\n\n        // Test against the composed path in `pointerdown` in case the visitor moved their\n        // pointer during the course of the interaction.\n        const composedPath = this.pointerdownPath;\n        this.pointerdownPath = undefined;\n        const nonAncestorOverlays = this.stack.filter((overlay) => {\n            const inStack = composedPath.find(\n                (el) => el === overlay || el === overlay?.triggerElement\n            );\n            return !inStack && !overlay.shouldPreventClose();\n        }) as Overlay[];\n        nonAncestorOverlays.reverse();\n        nonAncestorOverlays.forEach((overlay) => {\n            this.closeOverlay(overlay);\n            let parentToClose = overlay.parentOverlayToForceClose;\n            while (parentToClose) {\n                this.closeOverlay(parentToClose);\n                parentToClose = parentToClose.parentOverlayToForceClose;\n            }\n        });\n    };\n\n    handleBeforetoggle = (event: Event): void => {\n        const { target, newState: open } = event as Event & {\n            newState: string;\n        };\n        if (open === 'open') return;\n        this.closeOverlay(target as Overlay);\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        if (event.code !== 'Escape') return;\n        const last = this.stack.at(-1);\n        if (last?.type === 'page') {\n            event.preventDefault();\n            return;\n        }\n        if (supportsPopover) return;\n        if (!this.stack.length) return;\n\n        if (!last) return;\n        this.closeOverlay(last);\n    };\n\n    /**\n     * Get an array of Overlays that all share the same trigger element.\n     *\n     * @param triggerElement {HTMLELement}\n     * @returns {Overlay[]}\n     */\n    overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {\n        return this.stack.filter(\n            (overlay) => overlay.triggerElement === triggerElement\n        );\n    }\n\n    /**\n     * When overlays are added manage the open state of exisiting overlays appropriately:\n     * - 'modal': should close other overlays\n     * - 'page': should close other overlays\n     * - 'hint': shouldn't close other overlays\n     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n     * - 'manual': shouldn't close other overlays\n     */\n    add(overlay: Overlay): void {\n        if (this.stack.includes(overlay)) {\n            const overlayIndex = this.stack.indexOf(overlay);\n            if (overlayIndex > -1) {\n                this.stack.splice(overlayIndex, 1);\n                this.stack.push(overlay);\n            }\n            return;\n        }\n        if (\n            overlay.type === 'auto' ||\n            overlay.type === 'modal' ||\n            overlay.type === 'page'\n        ) {\n            // manage closing open overlays\n            const queryPathEventName = 'sp-overlay-query-path';\n            const queryPathEvent = new Event(queryPathEventName, {\n                composed: true,\n                bubbles: true,\n            });\n            overlay.addEventListener(\n                queryPathEventName,\n                (event: Event) => {\n                    const path = event.composedPath();\n                    this.stack.forEach((overlayEl) => {\n                        const inPath = path.find((el) => el === overlayEl);\n                        if (!inPath && overlayEl.type !== 'manual') {\n                            this.closeOverlay(overlayEl);\n                        }\n                    });\n                },\n                { once: true }\n            );\n            overlay.dispatchEvent(queryPathEvent);\n        } else if (overlay.type === 'hint') {\n            this.stack.forEach((overlayEl) => {\n                if (overlayEl.type === 'hint') {\n                    this.closeOverlay(overlayEl);\n                }\n            });\n        }\n        requestAnimationFrame(() => {\n            this.stack.push(overlay);\n            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n                once: true,\n            });\n        });\n    }\n\n    remove(overlay: Overlay): void {\n        this.closeOverlay(overlay);\n    }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
+  "mappings": "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",
+  "names": ["supportsPopover", "OverlayStack", "event", "_a", "composedPath", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "triggerElement", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
+}

package/src/OverlayTrigger.d.ts

@@ -1,11 +1,8 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-import { OverlayOptions, OverlayTriggerInteractions, Placement, TriggerInteractions } from './overlay-types';
+import type { Placement } from '@floating-ui/dom';
+import type { Overlay } from './Overlay.js';
+import type { OverlayTriggerInteractions } from './overlay-types';
 export declare type OverlayContentTypes = 'click' | 'hover' | 'longpress';
-export declare const LONGPRESS_INSTRUCTIONS: {
-    touch: string;
-    keyboard: string;
-    mouse: string;
-};
 /**
  * @element overlay-trigger
  *
@@ -18,50 +15,37 @@ export declare const LONGPRESS_INSTRUCTIONS: {
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export declare class OverlayTrigger extends SpectrumElement {
-    private closeClickOverlay?;
-    private closeLongpressOverlay?;
-    private closeHoverOverlay?;
     static get styles(): CSSResultArray;
+    content: string;
     /**
-     * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
      * @attr
      */
-    placement: Placement;
+    placement?: Placement;
     type?: OverlayTriggerInteractions;
     offset: number;
     open?: OverlayContentTypes;
     disabled: boolean;
-    hasLongpressContent: boolean;
-    private longpressDescriptor?;
-    private clickContent?;
-    private longpressContent?;
-    private hoverContent?;
-    private targetContent?;
-    private overlaidContent?;
-    private _longpressId;
-    private handleClose;
+    private clickContent;
+    private clickPlacement?;
+    private longpressContent;
+    private longpressPlacement?;
+    private hoverContent;
+    private hoverPlacement?;
+    private targetContent;
+    clickOverlayElement: Overlay;
+    longpressOverlayElement: Overlay;
+    hoverOverlayElement: Overlay;
+    private getAssignedElementsFromSlot;
+    private handleTriggerContent;
+    private handleSlotContent;
+    private handleBeforetoggle;
+    protected update(changes: PropertyValues): void;
+    protected renderSlot(name: string): TemplateResult;
+    protected renderClickOverlay(): TemplateResult;
+    protected renderHoverOverlay(): TemplateResult;
+    protected renderLongpressOverlay(): TemplateResult;
     protected render(): TemplateResult;
-    protected updated(changes: PropertyValues<this>): void;
-    protected manageLongpressDescriptor(): void;
-    private closeAllOverlays;
-    private manageOpen;
-    private openOverlay;
-    static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
-    private get overlayOptions();
-    private onTrigger;
-    private prepareToFocusOverlayContent;
-    onTriggerClick(): Promise<void>;
-    private _longpressEvent?;
-    private onTriggerLongpress;
-    private abortOverlay;
-    onTriggerMouseEnter(): Promise<void>;
-    private onClickSlotChange;
-    private onLongpressSlotChange;
-    private onHoverSlotChange;
-    private onTargetSlotChange;
-    private extractSlotContentFromEvent;
-    private openStatePromise;
-    private openStateResolver;
+    protected updated(changes: PropertyValues): void;
     protected getUpdateComplete(): Promise<boolean>;
-    disconnectedCallback(): void;
 }

package/src/OverlayTrigger.dev.js

@@ -16,346 +16,222 @@ import {
 } from "@spectrum-web-components/base";
 import {
   property,
+  query,
   state
 } from "@spectrum-web-components/base/src/decorators.js";
-import { firstFocusableIn } from "@spectrum-web-components/shared/src/first-focusable-in.js";
-import {
-  isAndroid,
-  isIOS
-} from "@spectrum-web-components/shared/src/platform.js";
-import { openOverlay } from "./loader.dev.js";
 import overlayTriggerStyles from "./overlay-trigger.css.js";
-export const LONGPRESS_INSTRUCTIONS = {
-  touch: "Double tap and long press for additional options",
-  keyboard: "Press Space or Alt+Down Arrow for additional options",
-  mouse: "Click and hold for additional options"
-};
-const _OverlayTrigger = class _OverlayTrigger extends SpectrumElement {
+export class OverlayTrigger extends SpectrumElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
+    this.content = "click hover longpress";
     this.offset = 6;
     this.disabled = false;
-    this.hasLongpressContent = false;
-    this._longpressId = `longpress-describedby-descriptor`;
-    this.abortOverlay = () => {
-      return;
-    };
-    this.openStatePromise = Promise.resolve();
+    this.clickContent = [];
+    this.longpressContent = [];
+    this.hoverContent = [];
+    this.targetContent = [];
   }
   static get styles() {
     return [overlayTriggerStyles];
   }
-  handleClose(event) {
-    if (event && event.detail.interaction !== this.open && event.detail.interaction !== this.type) {
-      return;
-    }
-    this.removeAttribute("open");
+  getAssignedElementsFromSlot(slot) {
+    return slot.assignedElements({ flatten: true });
   }
-  render() {
-    return html`
-            <slot
-                id="trigger"
-                @click=${this.onTrigger}
-                @longpress=${this.onTrigger}
-                @mouseenter=${this.onTrigger}
-                @mouseleave=${this.onTrigger}
-                @focusin=${this.onTrigger}
-                @focusout=${this.onTrigger}
-                @sp-closed=${this.handleClose}
-                @slotchange=${this.onTargetSlotChange}
-                name="trigger"
-            ></slot>
-            <div id="overlay-content">
-                <slot
-                    @slotchange=${this.onClickSlotChange}
-                    name="click-content"
-                ></slot>
-                <slot
-                    @slotchange=${this.onLongpressSlotChange}
-                    name="longpress-content"
-                ></slot>
-                <slot
-                    @slotchange=${this.onHoverSlotChange}
-                    name="hover-content"
-                ></slot>
-                <slot name=${this._longpressId}></slot>
-            </div>
-        `;
+  handleTriggerContent(event) {
+    this.targetContent = this.getAssignedElementsFromSlot(event.target);
   }
-  updated(changes) {
-    super.updated(changes);
-    if (this.disabled && changes.has("disabled")) {
-      this.closeAllOverlays();
+  handleSlotContent(event) {
+    switch (event.target.name) {
+      case "click-content":
+        this.clickContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+      case "longpress-content":
+        this.longpressContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+      case "hover-content":
+        this.hoverContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+    }
+  }
+  handleBeforetoggle(event) {
+    const { target } = event;
+    let type;
+    if (target === this.clickOverlayElement) {
+      type = "click";
+    } else if (target === this.longpressOverlayElement) {
+      type = "longpress";
+    } else if (target === this.hoverOverlayElement) {
+      type = "hover";
+    } else {
       return;
     }
-    if (changes.has("open")) {
-      this.manageOpen();
-    }
-    if (changes.has("hasLongpressContent")) {
-      this.manageLongpressDescriptor();
+    if (event.newState === "open") {
+      this.open = type;
+    } else if (this.open === type) {
+      this.open = void 0;
     }
   }
-  manageLongpressDescriptor() {
-    const trigger = this.querySelector(
-      '[slot="trigger"]'
-    );
-    const ariaDescribedby = trigger.getAttribute("aria-describedby");
-    let descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
-    if (this.hasLongpressContent) {
-      if (!this.longpressDescriptor) {
-        this.longpressDescriptor = document.createElement(
-          "div"
-        );
-        this.longpressDescriptor.id = this._longpressId;
-        this.longpressDescriptor.slot = this._longpressId;
-      }
-      const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
-      this.longpressDescriptor.textContent = LONGPRESS_INSTRUCTIONS[messageType];
-      this.appendChild(this.longpressDescriptor);
-      descriptors.push(this._longpressId);
-    } else {
-      if (this.longpressDescriptor)
-        this.longpressDescriptor.remove();
-      descriptors = descriptors.filter(
-        (descriptor) => descriptor !== this._longpressId
-      );
+  update(changes) {
+    var _a, _b, _c, _d, _e, _f;
+    if (changes.has("clickContent")) {
+      this.clickPlacement = ((_a = this.clickContent[0]) == null ? void 0 : _a.getAttribute("placement")) || ((_b = this.clickContent[0]) == null ? void 0 : _b.getAttribute(
+        "direction"
+      )) || void 0;
     }
-    if (descriptors.length) {
-      trigger.setAttribute("aria-describedby", descriptors.join(" "));
-    } else {
-      trigger.removeAttribute("aria-describedby");
+    if (changes.has("hoverContent")) {
+      this.hoverPlacement = ((_c = this.hoverContent[0]) == null ? void 0 : _c.getAttribute("placement")) || ((_d = this.hoverContent[0]) == null ? void 0 : _d.getAttribute(
+        "direction"
+      )) || void 0;
     }
+    if (changes.has("longpressContent")) {
+      this.longpressPlacement = ((_e = this.longpressContent[0]) == null ? void 0 : _e.getAttribute("placement")) || ((_f = this.longpressContent[0]) == null ? void 0 : _f.getAttribute(
+        "direction"
+      )) || void 0;
+    }
+    super.update(changes);
   }
-  closeAllOverlays() {
-    if (this.abortOverlay)
-      this.abortOverlay(true);
-    [
-      "closeClickOverlay",
-      "closeHoverOverlay",
-      "closeLongpressOverlay"
-    ].forEach(async (name) => {
-      const canClose = this[name];
-      if (canClose == null)
-        return;
-      delete this[name];
-      (await canClose)();
-    });
-    this.overlaidContent = void 0;
-  }
-  manageOpen() {
-    var _a;
-    const openHandlers = {
-      click: () => this.onTriggerClick(),
-      hover: () => this.onTriggerMouseEnter(),
-      longpress: () => this.onTriggerLongpress(),
-      none: () => this.closeAllOverlays()
-    };
-    openHandlers[(_a = this.open) != null ? _a : "none"]();
-  }
-  async openOverlay(target, interaction, content, options) {
-    this.openStatePromise = new Promise(
-      (res) => this.openStateResolver = res
-    );
-    this.addEventListener(
-      "sp-opened",
-      () => {
-        this.openStateResolver();
-      },
-      { once: true }
-    );
-    this.overlaidContent = content;
-    return _OverlayTrigger.openOverlay(
-      target,
-      interaction,
-      content,
-      options
-    );
-  }
-  get overlayOptions() {
-    return {
-      offset: this.offset,
-      placement: this.placement,
-      receivesFocus: !this.type || this.type === "inline" || this.open === "hover" ? void 0 : "auto"
-    };
+  renderSlot(name) {
+    return html`
+            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>
+        `;
   }
-  onTrigger(event) {
-    const mouseIsEnteringHoverContent = event.type === "mouseleave" && this.open === "hover" && event.relatedTarget === this.overlaidContent;
-    if (mouseIsEnteringHoverContent && this.overlaidContent) {
-      this.overlaidContent.addEventListener(
-        "mouseleave",
-        (event2) => {
-          const mouseIsEnteringTrigger = event2.relatedTarget === this.targetContent;
-          if (mouseIsEnteringTrigger) {
-            return;
-          }
-          this.onTrigger(
-            event2
-          );
-        },
-        { once: true }
-      );
-      return;
-    }
-    if (this.disabled)
-      return;
-    switch (event.type) {
-      case "mouseenter":
-      case "focusin":
-        if (!this.open && this.hoverContent) {
-          this.open = "hover";
-        }
-        return;
-      case "mouseleave":
-      case "focusout":
-        if (this.open === "hover") {
-          this.handleClose();
-        }
-        return;
-      case "click":
-        if (this.clickContent) {
-          this.open = event.type;
-        }
-        return;
-      case "longpress":
-        if (this.longpressContent) {
-          this._longpressEvent = event;
-          this.open = event.type;
-        }
-        return;
+  renderClickOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("click-content");
+    if (!this.clickContent.length) {
+      return slot;
     }
+    return html`
+            <sp-overlay
+                id="click-overlay"
+                ?disabled=${this.disabled || !this.clickContent.length}
+                ?open=${this.open === "click" && !!this.clickContent.length}
+                .offset=${this.offset}
+                .placement=${this.clickPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"click"}
+                .type=${this.type !== "modal" ? "auto" : "modal"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+        `;
   }
-  prepareToFocusOverlayContent(overlayContent) {
-    if (this.type !== "modal") {
-      return;
-    }
-    const firstFocusable = firstFocusableIn(overlayContent);
-    if (!firstFocusable) {
-      overlayContent.tabIndex = 0;
+  renderHoverOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("hover-content");
+    if (!this.hoverContent.length) {
+      return slot;
     }
+    return html`
+            <sp-overlay
+                id="hover-overlay"
+                ?disabled=${this.disabled || !this.hoverContent.length || !!this.open && this.open !== "hover"}
+                ?open=${this.open === "hover" && !!this.hoverContent.length}
+                .offset=${this.offset}
+                .placement=${this.hoverPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"hover"}
+                .type=${"hint"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+        `;
   }
-  async onTriggerClick() {
-    if (!this.targetContent || !this.clickContent || this.closeClickOverlay) {
-      return;
-    }
-    const { targetContent, clickContent } = this;
-    this.closeAllOverlays();
-    this.prepareToFocusOverlayContent(clickContent);
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeClickOverlay = this.openOverlay(
-      targetContent,
-      this.type ? this.type : "click",
-      clickContent,
-      this.overlayOptions
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
+  renderLongpressOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("longpress-content");
+    if (!this.longpressContent.length) {
+      return slot;
     }
+    return html`
+            <sp-overlay
+                id="longpress-overlay"
+                ?disabled=${this.disabled || !this.longpressContent.length}
+                ?open=${this.open === "longpress" && !!this.longpressContent.length}
+                .offset=${this.offset}
+                .placement=${this.longpressPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"longpress"}
+                .type=${"auto"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+            <slot name="longpress-describedby-descriptor"></slot>
+        `;
   }
-  async onTriggerLongpress() {
-    var _a, _b;
-    if (!this.targetContent || !this.longpressContent || this.closeLongpressOverlay) {
-      return;
-    }
-    const { targetContent, longpressContent } = this;
-    this.closeAllOverlays();
-    this.prepareToFocusOverlayContent(longpressContent);
-    const notImmediatelyClosable = ((_b = (_a = this._longpressEvent) == null ? void 0 : _a.detail) == null ? void 0 : _b.source) !== "keyboard";
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeLongpressOverlay = this.openOverlay(
-      targetContent,
-      this.type ? this.type : "longpress",
-      longpressContent,
-      {
-        ...this.overlayOptions,
-        receivesFocus: "auto",
-        notImmediatelyClosable
-      }
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
-    }
-    this._longpressEvent = void 0;
+  render() {
+    const content = this.content.split(" ");
+    return html`
+            <slot
+                id="trigger"
+                name="trigger"
+                @slotchange=${this.handleTriggerContent}
+            ></slot>
+            ${[
+      content.includes("click") ? this.renderClickOverlay() : html``,
+      content.includes("hover") ? this.renderHoverOverlay() : html``,
+      content.includes("longpress") ? this.renderLongpressOverlay() : html``
+    ]}
+        `;
   }
-  async onTriggerMouseEnter() {
-    if (!this.targetContent || !this.hoverContent || this.closeHoverOverlay) {
+  updated(changes) {
+    super.updated(changes);
+    if (this.disabled && changes.has("disabled")) {
+      this.open = void 0;
       return;
     }
-    const abortPromise = new Promise((res) => {
-      this.abortOverlay = res;
-    });
-    const { targetContent, hoverContent } = this;
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeHoverOverlay = this.openOverlay(
-      targetContent,
-      "hover",
-      hoverContent,
-      {
-        abortPromise,
-        ...this.overlayOptions
-      }
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
-    }
-  }
-  onClickSlotChange(event) {
-    this.clickContent = this.extractSlotContentFromEvent(event);
-    this.manageOpen();
-  }
-  onLongpressSlotChange(event) {
-    this.longpressContent = this.extractSlotContentFromEvent(event);
-    this.hasLongpressContent = !!this.longpressContent || !!this.closeLongpressOverlay;
-    this.manageOpen();
-  }
-  onHoverSlotChange(event) {
-    this.hoverContent = this.extractSlotContentFromEvent(event);
-    this.manageOpen();
-  }
-  onTargetSlotChange(event) {
-    this.targetContent = this.extractSlotContentFromEvent(event);
-  }
-  extractSlotContentFromEvent(event) {
-    const slot = event.target;
-    const nodes = slot.assignedNodes({ flatten: true });
-    return nodes.find((node) => node instanceof HTMLElement);
   }
   async getUpdateComplete() {
     const complete = await super.getUpdateComplete();
-    await this.openStatePromise;
     return complete;
   }
-  disconnectedCallback() {
-    this.closeAllOverlays();
-    super.disconnectedCallback();
-  }
-};
-_OverlayTrigger.openOverlay = async (target, interaction, content, options) => {
-  return openOverlay(target, interaction, content, options);
-};
+}
+__decorateClass([
+  property()
+], OverlayTrigger.prototype, "content", 2);
 __decorateClass([
   property({ reflect: true })
-], _OverlayTrigger.prototype, "placement", 2);
+], OverlayTrigger.prototype, "placement", 2);
 __decorateClass([
   property()
-], _OverlayTrigger.prototype, "type", 2);
+], OverlayTrigger.prototype, "type", 2);
 __decorateClass([
-  property({ type: Number, reflect: true })
-], _OverlayTrigger.prototype, "offset", 2);
+  property({ type: Number })
+], OverlayTrigger.prototype, "offset", 2);
 __decorateClass([
   property({ reflect: true })
-], _OverlayTrigger.prototype, "open", 2);
+], OverlayTrigger.prototype, "open", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _OverlayTrigger.prototype, "disabled", 2);
+], OverlayTrigger.prototype, "disabled", 2);
 __decorateClass([
   state()
-], _OverlayTrigger.prototype, "hasLongpressContent", 2);
-export let OverlayTrigger = _OverlayTrigger;
+], OverlayTrigger.prototype, "clickContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "longpressContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "hoverContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "targetContent", 2);
+__decorateClass([
+  query("#click-overlay", true)
+], OverlayTrigger.prototype, "clickOverlayElement", 2);
+__decorateClass([
+  query("#longpress-overlay", true)
+], OverlayTrigger.prototype, "longpressOverlayElement", 2);
+__decorateClass([
+  query("#hover-overlay", true)
+], OverlayTrigger.prototype, "hoverOverlayElement", 2);
 //# sourceMappingURL=OverlayTrigger.dev.js.map