@spectrum-web-components/overlay 0.40.2 → 0.40.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/custom-elements.json +36 -5
- package/package.json +7 -7
- package/src/AbstractOverlay.d.ts +19 -1
- package/src/AbstractOverlay.dev.js +17 -0
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +3 -3
- package/src/Overlay.dev.js +1 -2
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +1 -1
- package/src/Overlay.js.map +2 -2
- package/src/OverlayDialog.dev.js +14 -15
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +3 -3
- package/src/OverlayNoPopover.dev.js +9 -11
- package/src/OverlayNoPopover.dev.js.map +2 -2
- package/src/OverlayNoPopover.js +1 -1
- package/src/OverlayNoPopover.js.map +3 -3
- package/src/OverlayPopover.dev.js +14 -19
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayStack.d.ts +1 -0
- package/src/OverlayStack.dev.js +12 -4
- package/src/OverlayStack.dev.js.map +2 -2
- package/src/OverlayStack.js +1 -1
- package/src/OverlayStack.js.map +3 -3
- package/src/OverlayTrigger.dev.js +1 -1
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js +1 -1
- package/src/OverlayTrigger.js.map +2 -2
- package/src/PlacementController.d.ts +1 -0
- package/src/PlacementController.dev.js +24 -12
- package/src/PlacementController.dev.js.map +2 -2
- package/src/PlacementController.js +1 -1
- package/src/PlacementController.js.map +3 -3
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js.map +1 -1
- package/src/overlay-types.d.ts +0 -6
- package/src/overlay-types.dev.js.map +1 -1
- package/src/overlay-types.js.map +1 -1
- package/src/overlay.css.dev.js +1 -1
- package/src/overlay.css.dev.js.map +1 -1
- package/src/overlay.css.js +1 -1
- package/src/overlay.css.js.map +1 -1
- package/src/topLayerOverTransforms.dev.js +8 -1
- package/src/topLayerOverTransforms.dev.js.map +2 -2
- package/src/topLayerOverTransforms.js +1 -1
- package/src/topLayerOverTransforms.js.map +2 -2
- package/stories/overlay-element.stories.js +75 -22
- package/stories/overlay-element.stories.js.map +2 -2
- package/stories/overlay.stories.js +79 -3
- package/stories/overlay.stories.js.map +3 -3
- package/test/index.js +20 -12
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js +4 -2
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +27 -9
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-update.test.js +5 -5
- package/test/overlay-update.test.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-element.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\nimport './overlay-story-components.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\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 delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n receivesFocus: 'true' | 'false' | 'auto';\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n delayed,\n}: Properties): TemplateResult => html`\n <style>\n .wrapper {\n will-change: transform;\n }\n </style>\n <div class=\"wrapper\">\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover dialog ?delayed=${delayed}>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-popover>\n </sp-overlay>\n </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n interaction,\n open,\n placement,\n receivesFocus,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">\n Open the overlay (with focus)\n </sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n .receivesFocus=${receivesFocus}\n >\n <a href=\"https://example.com\">Click Content</a>\n </sp-overlay>\n`;\nreceivesFocus.args = {\n interaction: 'click',\n placement: 'bottom-start',\n type: 'auto',\n receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n <style>\n .transformed {\n transform: translateX(-50%);\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 100px;\n block-size: 50px;\n }\n </style>\n <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n <style>\n .contained {\n contain: strict;\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 200px;\n block-size: 50px;\n padding-block: 75px;\n padding-inline-start: 300px;\n }\n </style>\n <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Click content</sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Longpress content</sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n </style>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n <sp-action-menu placement=\"left\">\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n ?delayed=${delayed}\n trigger=\"trigger-3@hover\"\n type=\"hint\"\n open\n >\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const actionGroupWithFilters = ({\n delayed,\n}: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n overflow: hidden;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n sp-action-button,\n sp-action-menu {\n background-image: linear-gradient(\n rgba(125, 125, 125, 0.2),\n rgba(125, 125, 125, 0.2)\n );\n background-blend-mode: multiply;\n filter: brightness(1) saturate(1);\n }\n </style>\n <p>\n This story outlines some CSS usage that is not yet covered by the\n placement calculations within the Overlay API.\n </p>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select\n slot=\"icon\"\n ></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n </sp-action-button>\n <sp-action-menu>\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,SAAS,gBAAgB;AACzB,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,MAAM;AAAA,IACN,SAAS;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACN,MAAM;AAAA,MACF,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\nimport './overlay-story-components.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\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 delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype WrapperStyleType = 'will-change' | 'container-type';\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n receivesFocus: 'true' | 'false' | 'auto';\n style?: WrapperStyleType;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n delayed,\n style,\n}: Properties): TemplateResult => html`\n ${style === 'will-change'\n ? html`\n <style>\n .wrapper {\n will-change: transform;\n }\n </style>\n `\n : html`\n <style>\n .wrapper {\n container-type: size;\n }\n </style>\n `}\n <div class=\"wrapper\">\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover ?delayed=${delayed}>\n <sp-dialog size=\"s\" no-divider>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-dialog>\n </sp-popover>\n </sp-overlay>\n </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n style: 'will-change',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n style: 'container-type' as WrapperStyleType,\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n style: 'will-change',\n};\n\nexport const hoverTooltip = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <style>\n .wrapper {\n will-change: transform;\n }\n </style>\n <div class=\"wrapper\">\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-tooltip>Tooltip goes here.</sp-tooltip>\n </sp-overlay>\n </div>\n`;\nhoverTooltip.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n style: 'container-type',\n type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n interaction,\n open,\n placement,\n receivesFocus,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">\n Open the overlay (with focus)\n </sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n .receivesFocus=${receivesFocus}\n >\n <sp-popover>\n <sp-dialog size=\"s\" no-divider>\n <a href=\"https://example.com\">Click Content</a>\n </sp-dialog>\n </sp-popover>\n </sp-overlay>\n`;\nreceivesFocus.args = {\n interaction: 'click',\n placement: 'bottom-start',\n type: 'auto',\n receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n <style>\n .transformed {\n transform: translateX(-50%);\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 100px;\n block-size: 50px;\n }\n </style>\n <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n <style>\n .contained {\n contain: strict;\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 200px;\n block-size: 50px;\n padding-block: 75px;\n padding-inline-start: 300px;\n }\n </style>\n <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover>\n <sp-dialog size=\"s\" no-divider>Click content</sp-dialog>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover>\n <sp-dialog size=\"s\" no-divider>Longpress content</sp-dialog>\n </sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n </style>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n <sp-action-menu placement=\"left\">\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n ?delayed=${delayed}\n trigger=\"trigger-3@hover\"\n type=\"hint\"\n open\n >\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const actionGroupWithFilters = ({\n delayed,\n}: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n overflow: hidden;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n sp-action-button,\n sp-action-menu {\n background-image: linear-gradient(\n rgba(125, 125, 125, 0.2),\n rgba(125, 125, 125, 0.2)\n );\n background-blend-mode: multiply;\n filter: brightness(1) saturate(1);\n }\n </style>\n <p>\n This story outlines some CSS usage that is not yet covered by the\n placement calculations within the Overlay API.\n </p>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select\n slot=\"icon\"\n ></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n </sp-action-button>\n <sp-action-menu>\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["receivesFocus"]
|
|
7
7
|
}
|
|
@@ -196,7 +196,12 @@ function nextFrame() {
|
|
|
196
196
|
export const Default = (args) => template(args);
|
|
197
197
|
export const accordion = () => {
|
|
198
198
|
return html`
|
|
199
|
-
<overlay-trigger type="modal" placement="
|
|
199
|
+
<overlay-trigger type="modal" placement="top-start">
|
|
200
|
+
<style>
|
|
201
|
+
sp-button {
|
|
202
|
+
margin-top: 70vh;
|
|
203
|
+
}
|
|
204
|
+
</style>
|
|
200
205
|
<sp-button variant="primary" slot="trigger">
|
|
201
206
|
Open overlay w/ accordion
|
|
202
207
|
</sp-button>
|
|
@@ -500,13 +505,13 @@ export const deep = () => html`
|
|
|
500
505
|
<sp-popover slot="click-content" direction="bottom" tip>
|
|
501
506
|
<sp-dialog size="s" no-divider>
|
|
502
507
|
<sp-action-button>
|
|
503
|
-
<sp-tooltip self-managed placement="bottom"
|
|
508
|
+
<sp-tooltip self-managed placement="bottom">
|
|
504
509
|
My Tooltip 1
|
|
505
510
|
</sp-tooltip>
|
|
506
511
|
A
|
|
507
512
|
</sp-action-button>
|
|
508
513
|
<sp-action-button>
|
|
509
|
-
<sp-tooltip self-managed placement="bottom"
|
|
514
|
+
<sp-tooltip self-managed placement="bottom">
|
|
510
515
|
My Tooltip 1
|
|
511
516
|
</sp-tooltip>
|
|
512
517
|
B
|
|
@@ -1288,4 +1293,75 @@ export const virtualElement = (args) => {
|
|
|
1288
1293
|
virtualElement.args = {
|
|
1289
1294
|
placement: "right-start"
|
|
1290
1295
|
};
|
|
1296
|
+
export const virtualElementDeclaratively = (args) => {
|
|
1297
|
+
const handleContextmenu = async (event) => {
|
|
1298
|
+
event.preventDefault();
|
|
1299
|
+
event.stopPropagation();
|
|
1300
|
+
const overlay2 = document.querySelector(
|
|
1301
|
+
"sp-overlay:not([open])"
|
|
1302
|
+
);
|
|
1303
|
+
if (overlay2.triggerElement instanceof VirtualTrigger) {
|
|
1304
|
+
overlay2.triggerElement.updateBoundingClientRect(
|
|
1305
|
+
event.clientX,
|
|
1306
|
+
event.clientY
|
|
1307
|
+
);
|
|
1308
|
+
}
|
|
1309
|
+
overlay2.willPreventClose = true;
|
|
1310
|
+
overlay2.open = true;
|
|
1311
|
+
};
|
|
1312
|
+
const overlay = () => html`
|
|
1313
|
+
<sp-overlay
|
|
1314
|
+
offset="0"
|
|
1315
|
+
type="auto"
|
|
1316
|
+
placement=${args.placement}
|
|
1317
|
+
.triggerElement=${new VirtualTrigger(0, 0)}
|
|
1318
|
+
>
|
|
1319
|
+
<sp-popover
|
|
1320
|
+
style="width:300px;"
|
|
1321
|
+
@change=${(event) => {
|
|
1322
|
+
var _a;
|
|
1323
|
+
(_a = event.target) == null ? void 0 : _a.dispatchEvent(
|
|
1324
|
+
new Event("close", { bubbles: true })
|
|
1325
|
+
);
|
|
1326
|
+
}}
|
|
1327
|
+
>
|
|
1328
|
+
<sp-menu>
|
|
1329
|
+
<sp-menu-group>
|
|
1330
|
+
<span slot="header">Menu</span>
|
|
1331
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
1332
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
1333
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
1334
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
1335
|
+
<sp-menu-divider></sp-menu-divider>
|
|
1336
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
1337
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
1338
|
+
</sp-menu-group>
|
|
1339
|
+
</sp-menu>
|
|
1340
|
+
</sp-popover>
|
|
1341
|
+
</sp-overlay>
|
|
1342
|
+
`;
|
|
1343
|
+
return html`
|
|
1344
|
+
<style>
|
|
1345
|
+
.app-root {
|
|
1346
|
+
position: absolute;
|
|
1347
|
+
inset: 0;
|
|
1348
|
+
}
|
|
1349
|
+
</style>
|
|
1350
|
+
<div
|
|
1351
|
+
class="app-root"
|
|
1352
|
+
@contextmenu=${{
|
|
1353
|
+
capture: true,
|
|
1354
|
+
handleEvent: handleContextmenu
|
|
1355
|
+
}}
|
|
1356
|
+
>
|
|
1357
|
+
${overlay()} ${overlay()}
|
|
1358
|
+
</div>
|
|
1359
|
+
`;
|
|
1360
|
+
};
|
|
1361
|
+
virtualElementDeclaratively.args = {
|
|
1362
|
+
placement: "right-start"
|
|
1363
|
+
};
|
|
1364
|
+
virtualElementDeclaratively.swc_vrt = {
|
|
1365
|
+
skip: true
|
|
1366
|
+
};
|
|
1291
1367
|
//# sourceMappingURL=overlay.stories.js.map
|