@spectrum-web-components/overlay 1.1.0-beta.8 → 1.1.0

package/src/strategies.js

@@ -1,2 +0,0 @@
-"use strict";import{ClickController as o}from"./ClickController.js";import{HoverController as r}from"./HoverController.js";import{LongpressController as e}from"./LongpressController.js";export const strategies={click:o,longpress:e,hover:r};
-//# sourceMappingURL=strategies.js.map

package/src/strategies.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["strategies.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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\n\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 { ClickController } from './ClickController.js';\nimport { HoverController } from './HoverController.js';\nimport { LongpressController } from './LongpressController.js';\n\nexport const strategies = {\n    click: ClickController,\n    longpress: LongpressController,\n    hover: HoverController,\n};\n"],
-  "mappings": "aAYA,OAAS,mBAAAA,MAAuB,uBAChC,OAAS,mBAAAC,MAAuB,uBAChC,OAAS,uBAAAC,MAA2B,2BAE7B,aAAM,WAAa,CACtB,MAAOF,EACP,UAAWE,EACX,MAAOD,CACX",
-  "names": ["ClickController", "HoverController", "LongpressController"]
-}

package/stories/index.js

@@ -1,40 +0,0 @@
-"use strict";
-import { html } from "@spectrum-web-components/base";
-function nextFrame() {
-  return new Promise((res) => requestAnimationFrame(() => res()));
-}
-class IsOverlayOpen extends HTMLElement {
-  constructor() {
-    super();
-    this.handleOpened = async (event) => {
-      const overlay = event.target;
-      const actions = [nextFrame(), overlay.updateComplete];
-      await Promise.all(actions);
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      this.ready(true);
-    };
-    this.readyPromise = Promise.resolve(false);
-    this.readyPromise = new Promise((res) => {
-      this.ready = res;
-      this.setup();
-    });
-  }
-  async setup() {
-    await nextFrame();
-    document.addEventListener("sp-opened", this.handleOpened);
-  }
-  get updateComplete() {
-    return this.readyPromise;
-  }
-}
-customElements.define("is-overlay-open", IsOverlayOpen);
-export const isOverlayOpen = (story) => {
-  return html`
-        ${story()}
-        <is-overlay-open></is-overlay-open>
-    `;
-};
-//# sourceMappingURL=index.js.map

package/stories/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["index.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\n\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport type { Overlay } from '@spectrum-web-components/overlay';\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass IsOverlayOpen extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        document.addEventListener('sp-opened', this.handleOpened);\n    }\n\n    handleOpened = async (event: Event): Promise<void> => {\n        const overlay = event.target as Overlay;\n        const actions = [nextFrame(), overlay.updateComplete];\n\n        await Promise.all(actions);\n        // Focus happens _after_ `sp-opened` by at least two frames.\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('is-overlay-open', IsOverlayOpen);\n\nexport const isOverlayOpen = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <is-overlay-open></is-overlay-open>\n    `;\n};\n"],
-  "mappings": ";AAYA,SAAS,YAA4B;AAGrC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,sBAAsB,YAAY;AAAA,EAGpC,cAAc;AACV,UAAM;AAaV,wBAAe,OAAO,UAAgC;AAClD,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,CAAC,UAAU,GAAG,QAAQ,cAAc;AAEpD,YAAM,QAAQ,IAAI,OAAO;AAEzB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AA1B1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,aAAS,iBAAiB,aAAa,KAAK,YAAY;AAAA,EAC5D;AAAA,EAkBA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,mBAAmB,aAAa;AAE/C,aAAM,gBAAgB,CAAC,UAAgD;AAC1E,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;",
-  "names": []
-}

package/stories/overlay-directive.stories.js

@@ -1,324 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-import {
-  html,
-  LitElement
-} from "@spectrum-web-components/base";
-import "@spectrum-web-components/action-button/sp-action-button.js";
-import "@spectrum-web-components/action-group/sp-action-group.js";
-import "@spectrum-web-components/button/sp-button.js";
-import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
-import "@spectrum-web-components/field-label/sp-field-label.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
-import "@spectrum-web-components/overlay/overlay-trigger.js";
-import {
-  trigger
-} from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js";
-import "@spectrum-web-components/dialog/sp-dialog.js";
-import "@spectrum-web-components/picker/sp-picker.js";
-import "@spectrum-web-components/menu/sp-menu.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/menu/sp-menu-divider.js";
-import "@spectrum-web-components/popover/sp-popover.js";
-import "@spectrum-web-components/slider/sp-slider.js";
-import "@spectrum-web-components/radio/sp-radio.js";
-import "@spectrum-web-components/radio/sp-radio-group.js";
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
-import "@spectrum-web-components/accordion/sp-accordion.js";
-import "@spectrum-web-components/accordion/sp-accordion-item.js";
-import "../../../projects/story-decorator/src/types.js";
-import "./overlay-story-components.js";
-import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
-import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
-import { state } from "@spectrum-web-components/base/src/decorators.js";
-const storyStyles = html`
-    <style>
-        html,
-        body,
-        #root,
-        #root-inner,
-        sp-story-decorator {
-            height: 100%;
-            margin: 0;
-        }
-
-        sp-story-decorator::part(container) {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            height: 100%;
-            align-items: center;
-            justify-content: center;
-        }
-
-        overlay-trigger {
-            flex: none;
-        }
-
-        #styled-div {
-            background-color: var(--styled-div-background-color, blue);
-            color: white;
-            padding: 4px 10px;
-            margin-bottom: 10px;
-        }
-
-        #inner-trigger {
-            display: inline-block;
-        }
-    </style>
-`;
-export default {
-  title: "Overlay Directive",
-  argTypes: {
-    offset: { control: "number" },
-    placement: {
-      control: {
-        type: "inline-radio",
-        options: [
-          "top",
-          "top-start",
-          "top-end",
-          "bottom",
-          "bottom-start",
-          "bottom-end",
-          "left",
-          "left-start",
-          "left-end",
-          "right",
-          "right-start",
-          "right-end",
-          "auto",
-          "auto-start",
-          "auto-end",
-          "none"
-        ]
-      }
-    },
-    type: {
-      control: {
-        type: "inline-radio",
-        options: ["modal", "replace", "inline"]
-      }
-    },
-    colorStop: {
-      control: {
-        type: "inline-radio",
-        options: ["light", "dark"]
-      }
-    },
-    open: {
-      name: "open",
-      type: { name: "boolean", required: false },
-      description: "Whether the second accordion item is open.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      },
-      control: {
-        type: "boolean"
-      }
-    }
-  },
-  args: {
-    placement: "bottom",
-    offset: 0,
-    colorStop: "light",
-    triggerOn: "click",
-    open: false
-  }
-};
-const template = ({
-  placement,
-  offset,
-  open,
-  triggerOn,
-  insertionOptions: insertionOptions2
-}) => {
-  const renderTooltip = () => html`
-        Click to open a popover.
-    `;
-  const renderPopover = () => html`
-        <sp-popover placement="${ifDefined(placement)}" tip>
-            <sp-dialog no-divider>
-                <div class="options-popover-content">
-                    <sp-slider
-                        value="5"
-                        step="0.5"
-                        min="0"
-                        max="20"
-                        label="Awesomeness"
-                    ></sp-slider>
-                    <div id="styled-div">
-                        The background of this div should be blue
-                    </div>
-                    <sp-button
-                        ${tooltip(
-    () => html`
-                                Click to open another popover.
-                            `
-  )}
-                        ${trigger(
-    () => html`
-                                <sp-popover placement="bottom" tip open>
-                                    <sp-dialog size="s" no-divider>
-                                        <div class="options-popover-content">
-                                            Another Popover
-                                        </div>
-                                    </sp-dialog>
-                                </sp-popover>
-                            `,
-    {
-      triggerInteraction: "click",
-      overlayOptions: {
-        placement: "bottom"
-      }
-    }
-  )}
-                    >
-                        Press Me
-                    </sp-button>
-                </div>
-            </sp-dialog>
-        </sp-popover>
-    `;
-  return html`
-        ${storyStyles}
-        <sp-button
-            variant="primary"
-            ${tooltip(renderTooltip)}
-            ${trigger(renderPopover, {
-    open,
-    triggerInteraction: triggerOn,
-    overlayOptions: {
-      placement,
-      offset
-    },
-    insertionOptions: insertionOptions2
-  })}
-        >
-            Show Popover
-        </sp-button>
-    `;
-};
-export const Default = ({ open } = {}) => {
-  const renderPopover = () => html`
-        <sp-popover>
-            <sp-dialog no-divider>Popover content goes here</sp-dialog>
-        </sp-popover>
-    `;
-  const options = typeof open !== "undefined" ? { open } : void 0;
-  return html`
-        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>
-    `;
-};
-Default.swc_vrt = {
-  skip: true
-};
-export const configured = (args) => template(args);
-configured.swc_vrt = {
-  skip: true
-};
-export const insertionOptions = (args = {}) => html`
-    ${template(args)}
-    <div id="other-element"></div>
-`;
-insertionOptions.args = {
-  insertionOptions: {
-    el: () => document.querySelector("#other-element"),
-    where: "afterbegin"
-  }
-};
-insertionOptions.swc_vrt = {
-  skip: true
-};
-class ManagedOverlayTrigger extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.isRenderOverlay = false;
-    this.isOpenState = false;
-  }
-  render() {
-    return html`
-            <sp-button
-                @click=${() => {
-      this.isRenderOverlay = !this.isRenderOverlay;
-    }}
-            >
-                Toggle Overlay Render Button
-            </sp-button>
-
-            <sp-button
-                @click=${() => {
-      this.isRenderOverlay = true;
-      this.isOpenState = true;
-    }}
-            >
-                Create Overlay Render Button And Open Overlay
-            </sp-button>
-
-            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}
-        `;
-  }
-  renderOverlayButton() {
-    return html`
-            <sp-button
-                ?selected=${this.isOpenState}
-                ${trigger(
-      () => html`
-                        <sp-popover
-                            @sp-opened=${(event) => {
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        console.log("sp-opened");
-        this.isOpenState = true;
-      }}
-                            @sp-closed=${(event) => {
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        console.log("sp-closed");
-        this.isOpenState = false;
-      }}
-                        >
-                            <h1>My Test Popover</h1>
-                        </sp-popover>
-                    `,
-      {
-        triggerInteraction: "click",
-        overlayOptions: { placement: "bottom-end" },
-        open: this.isOpenState
-      }
-    )}
-            >
-                Toggle Popover
-            </sp-button>
-        `;
-  }
-}
-__decorateClass([
-  state()
-], ManagedOverlayTrigger.prototype, "isRenderOverlay", 2);
-__decorateClass([
-  state()
-], ManagedOverlayTrigger.prototype, "isOpenState", 2);
-customElements.define("managed-overlay-trigger", ManagedOverlayTrigger);
-export const managedOverlayTrigger = () => html`
-    <managed-overlay-trigger></managed-overlay-trigger>
-`;
-managedOverlayTrigger.swc_vrt = {
-  skip: true
-};
-//# sourceMappingURL=overlay-directive.stories.js.map

package/stories/overlay-directive.stories.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["overlay-directive.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 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*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n    InsertionOptions,\n    trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n"],
-  "mappings": "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",
-  "names": ["insertionOptions"]
-}