@spectrum-web-components/overlay 0.42.2 → 0.42.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/custom-elements.json +285 -114
- package/package.json +15 -7
- package/src/AbstractOverlay.d.ts +2 -30
- package/src/AbstractOverlay.dev.js +0 -37
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +3 -3
- package/src/ClickController.dev.js +2 -2
- package/src/ClickController.dev.js.map +2 -2
- package/src/ClickController.js +1 -1
- package/src/ClickController.js.map +2 -2
- package/src/HoverController.d.ts +1 -0
- package/src/HoverController.dev.js +24 -14
- package/src/HoverController.dev.js.map +2 -2
- package/src/HoverController.js +1 -1
- package/src/HoverController.js.map +2 -2
- package/src/InteractionController.d.ts +17 -3
- package/src/InteractionController.dev.js +48 -5
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +3 -3
- package/src/LongpressController.dev.js +10 -6
- package/src/LongpressController.dev.js.map +2 -2
- package/src/LongpressController.js +1 -1
- package/src/LongpressController.js.map +3 -3
- package/src/Overlay.d.ts +3 -8
- package/src/Overlay.dev.js +7 -12
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +2 -2
- package/src/Overlay.js.map +3 -3
- package/src/OverlayDialog.dev.js +2 -3
- 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 +5 -3
- 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 +5 -3
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayTrigger.d.ts +1 -1
- package/src/OverlayTrigger.dev.js.map +1 -1
- package/src/OverlayTrigger.js.map +1 -1
- package/src/PlacementController.d.ts +1 -1
- package/src/events.d.ts +23 -0
- package/src/events.dev.js +39 -0
- package/src/events.dev.js.map +7 -0
- package/src/events.js +2 -0
- package/src/events.js.map +7 -0
- package/src/overlay-events.js +1 -1
- package/src/overlay-trigger-directive.d.ts +5 -6
- package/src/overlay-trigger-directive.dev.js +11 -9
- package/src/overlay-trigger-directive.dev.js.map +2 -2
- package/src/overlay-trigger-directive.js +1 -1
- package/src/overlay-trigger-directive.js.map +3 -3
- package/src/overlay-types.d.ts +10 -10
- package/src/slottable-request-directive.dev.js +2 -1
- package/src/slottable-request-directive.dev.js.map +2 -2
- package/src/slottable-request-directive.js +1 -1
- package/src/slottable-request-directive.js.map +2 -2
- package/src/slottable-request-event.js +1 -1
- package/src/strategies.d.ts +8 -0
- package/src/strategies.dev.js +10 -0
- package/src/strategies.dev.js.map +7 -0
- package/src/strategies.js +2 -0
- package/src/strategies.js.map +7 -0
- package/stories/overlay.stories.js +2 -2
- package/stories/overlay.stories.js.map +2 -2
- package/test/index.js +10 -10
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-memory.test.js +10 -0
- package/test/overlay-memory.test.js.map +7 -0
- package/test/overlay-update.test.js +1 -0
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay-v1.test.js +2 -1
- package/test/overlay-v1.test.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"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\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedAllTransitionend,\n nextFrame,\n OverlayStateEvent,\n overlayTimer,\n} from './AbstractOverlay.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,sBAAsB;AAE/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"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\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,sBAAsB;AAE/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,6BAA6B;AAEtC,MAAM,sBAAsB,IAAI,SAAS,iBAAiB;AAE1D,SAAS,OAAO,IAA0B;AACtC,MAAI,cAAc;AAClB,MAAI;AACA,kBAAc,GAAG,QAAQ,eAAe;AAAA,EAE5C,SAAS,OAAO;AAAA,EAAC;AACjB,MAAI,OAAO;AACX,MAAI;AACA,WAAO,GAAG,QAAQ,OAAO;AAAA,EAE7B,SAAS,OAAO;AAAA,EAAC;AACjB,SAAO,eAAe;AAC1B;AAEO,gBAAS,eACZ,aACgC;AAAA,EAChC,MAAM,2BAA2B,YAAY;AAAA,IACzC,MAAyB,YACrB,iBACa;AACb,UAAI,oBAAoB,SAAS,oBAAoB,KAAK,MAAM;AAC5D,qBAAa,MAAM,IAAI;AACvB;AAAA,MACJ;AACA,UAAI,KAAK,SAAS;AACd,cAAM,YAAY,MAAM,aAAa,UAAU,IAAI;AACnD,YAAI,WAAW;AACX,eAAK,OAAO,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAc,kBACV,iBACa;AACb,UAAI,mBAAmB,KAAK,SAAS,iBAAiB;AAClD;AAAA,MACJ;AACA,YAAM,SAAS,OAAO;AAAA,QAClB;AAAA,MACJ,IAA2B,CAAC,MAAqB;AAC7C,YAAI,aAAa,QAAQ;AACrB;AAAA,QACJ;AAIA,cAAM,KAAK,oBAAoB,qBAAqB;AAAA,MACxD;AACA,UAAI,CAAC,OAAO,KAAK,QAAQ,GAAG;AAGxB,eAAO;AACP;AAAA,MACJ;AAEA,WAAK,SAAS,iBAAiB,UAAU,QAAyB;AAAA,QAC9D,MAAM;AAAA,MACV,CAAC;AAAA,IACL;AAAA,IAEA,MAAc,kBACV,iBACa;AACb,UAAI,cAAc;AAClB,UAAI;AACA,sBAAc,KAAK,SAAS,QAAQ,eAAe;AAAA,MAEvD,SAAS,OAAO;AAAA,MAAC;AACjB,UAAI,OAAO;AACX,UAAI;AACA,eAAO,KAAK,SAAS,QAAQ,OAAO;AAAA,MAExC,SAAS,OAAO;AAAA,MAAC;AACjB,UACI,mBACA,KAAK,SAAS,mBACd,CAAC,eACD,CAAC,QACD,KAAK,aACP;AACE,aAAK,SAAS,YAAY;AAC1B,cAAM,KAAK,eAAe;AAAA,MAC9B;AAAA,IACJ;AAAA,IAEA,MAAyB,YACrB,iBACa;AACb,YAAM,UAAU;AAChB,UAAI,CAAC,qBAAqB;AACtB,cAAM,KAAK,kBAAkB,eAAe;AAAA,MAChD;AACA,YAAM,KAAK,kBAAkB,eAAe;AAC5C,YAAM,UAAU;AAAA,IACpB;AAAA,IAEA,MAAyB,eACrB,iBAC2B;AAC3B,UAAI,KAAK,SAAS,iBAAiB;AAC/B,eAAO;AAAA,MACX;AACA,UAAI,UAAU;AACd,YAAM,QAAQ,CAAC,IAAqB,UAAkB,MAAY;AAC9D,WAAG,OAAO;AACV,YAAI,UAAU,GAAG;AACb,gBAAM,QAAQ,kBACR,wBACA;AACN,eAAK,cAAc,IAAI,MAAM,CAAC;AAAA,QAClC;AACA,YAAI,CAAC,iBAAiB;AAClB;AAAA,QACJ;AACA,YAAI,GAAG,QAAQ,qBAAqB,GAAG;AACnC,oBAAU;AAAA,QACd;AACA,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,SAAS;AACT;AAAA,QACJ;AACA,cAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,mBAAW,QAAQ,CAAC,SAAS;AACzB,cAAI,CAAC,SAAS;AACV,sBAAU,wBAAwB,IAAI;AAAA,UAC1C;AAAA,QACJ,CAAC;AAAA,MACL;AACA,YAAM,SACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,YAAY,kBACZ,cACA;AACN,YAAI,QAAQ,GAAG;AACX,aAAG;AAAA,YACC,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA;AAAA,QACJ;AACA,cAAM,eAAe,YAA2B;AAC5C,cAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,UACJ;AACA,gBAAM,UAAU;AAChB,gBAAM,oBACF,KAAK,0BAA0B;AACnC,eAAK;AAAA,YACD,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA,aAAG;AAAA,YACC,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA,cAAI,KAAK,kBAAkB,CAAC,mBAAmB;AAC3C,YAAC,KAAK,eAA+B;AAAA,cACjC,IAAI,kBAAkB,WAAW,MAAM;AAAA,gBACnC,aAAa,KAAK;AAAA,gBAClB,SAAS;AAAA,cACb,CAAC;AAAA,YACL;AAAA,UACJ;AACA,eAAK,QAAQ,kBAAkB,WAAW;AAC1C,eAAK,YAAY;AAEjB,gBAAM,UAAU;AAChB,gBAAM,UAAU;AAChB,cACI,oBAAoB,KAAK,QACzB,oBAAoB,OACtB;AACE,iBAAK,iBAAiB;AAAA,UAC1B;AAAA,QACJ;AACA,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,OAAO,OAAO,KAAK,QAAQ;AACjC,YAAI,oBAAoB,QAAQ,QAAQ,KAAK,aAAa;AACtD,eAAK,SAAS;AAAA,YACV;AAAA,YACA,MAAM;AACF,2BAAa;AAAA,YACjB;AAAA,YACA,EAAE,MAAM,KAAK;AAAA,UACjB;AACA,eAAK,SAAS,YAAY;AAAA,QAC9B,OAAO;AACH,uBAAa;AAAA,QACjB;AAAA,MACJ;AACJ,WAAK,SAAS,QAAQ,CAAC,IAAI,UAAU;AACjC;AAAA,UACI;AAAA,UACA,MAAM,IAAI,KAAK;AAAA,UACf,OAAO,IAAI,KAAK;AAAA,QACpB;AAAA,MACJ,CAAC;AACD,aAAO;AAAA,IACX;AAAA,EACJ;AACA,SAAO;AACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/OverlayPopover.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as E,firstFocusableSlottedIn as y}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{
|
|
1
|
+
"use strict";import{firstFocusableIn as E,firstFocusableSlottedIn as y}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as w,nextFrame as l,overlayTimer as m}from"./AbstractOverlay.js";import{BeforetoggleClosedEvent as P,BeforetoggleOpenEvent as g,OverlayStateEvent as h}from"./events.js";import{userFocusableSelector as T}from"@spectrum-web-components/shared";const C=CSS.supports("(overlay: auto)");function f(a){let c=!1;try{c=a.matches(":popover-open")}catch(e){}let p=!1;try{p=a.matches(":open")}catch(e){}return c||p}export function OverlayPopover(a){class c extends a{async manageDelay(e){if(e===!1||e!==this.open){m.close(this);return}this.delayed&&await m.openTimer(this)&&(this.open=!e)}async shouldHidePopover(e){if(e&&this.open!==e)return;const o=async({newState:i}={})=>{i!=="open"&&await this.placementController.resetOverlayPosition()};if(!f(this.dialogEl)){o();return}this.dialogEl.addEventListener("toggle",o,{once:!0})}async shouldShowPopover(e){let o=!1;try{o=this.dialogEl.matches(":popover-open")}catch(u){}let i=!1;try{i=this.dialogEl.matches(":open")}catch(u){}e&&this.open===e&&!o&&!i&&this.isConnected&&(this.dialogEl.showPopover(),await this.managePosition())}async ensureOnDOM(e){await l(),C||await this.shouldHidePopover(e),await this.shouldShowPopover(e),await l()}async makeTransition(e){if(this.open!==e)return null;let o=null;const i=(t,s)=>()=>{if(t.open=e,s===0){const r=e?g:P;this.dispatchEvent(new r)}if(!e||(t.matches(T)&&(o=t),o=o||E(t),o))return;t.querySelectorAll("slot").forEach(r=>{o||(o=y(r))})},u=(t,s)=>async()=>{if(this.open!==e)return;const n=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1}));return}const r=async()=>{if(this.open!==e)return;await l();const d=this.triggerElement instanceof b;this.dispatchEvent(new h(n,this,{interaction:this.type,publish:d})),t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1})),this.triggerElement&&!d&&this.triggerElement.dispatchEvent(new h(n,this,{interaction:this.type,publish:!0})),this.state=e?"opened":"closed",this.returnFocus(),await l(),await l(),e===this.open&&e===!1&&this.requestSlottable()};if(this.open!==e)return;const v=f(this.dialogEl);e!==!0&&v&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{r()},{once:!0}),this.dialogEl.hidePopover()):r()};return this.elements.forEach((t,s)=>{w(t,i(t,s),u(t,s))}),o}}return c}
|
|
2
2
|
//# sourceMappingURL=OverlayPopover.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"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\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedAllTransitionend,\n nextFrame,\n OverlayStateEvent,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OAAS,kBAAAC,MAAsB,sBAE/B,OACI,
|
|
6
|
-
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "
|
|
4
|
+
"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\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "overlayTimer", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "supportsOverlayAuto", "isOpen", "el", "popoverOpen", "error", "open", "constructor", "OverlayWithPopover", "targetOpenState", "update", "newState", "focusEl", "start", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
7
|
}
|
package/src/OverlayTrigger.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from
|
|
|
2
2
|
import type { Placement } from '@floating-ui/dom';
|
|
3
3
|
import type { Overlay } from './Overlay.js';
|
|
4
4
|
import type { OverlayTriggerInteractions } from './overlay-types';
|
|
5
|
-
export
|
|
5
|
+
export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
|
|
6
6
|
/**
|
|
7
7
|
* @element overlay-trigger
|
|
8
8
|
*
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayTrigger.ts"],
|
|
4
|
-
"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\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 {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './AbstractOverlay.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n private clickContent: HTMLElement[] = [];\n\n private clickPlacement?: Placement;\n\n @state()\n private longpressContent: HTMLElement[] = [];\n\n private longpressPlacement?: Placement;\n\n @state()\n private hoverContent: HTMLElement[] = [];\n\n private hoverPlacement?: Placement;\n\n @state()\n private targetContent: HTMLElement[] = [];\n\n @query('#click-overlay', true)\n clickOverlayElement!: Overlay;\n\n @query('#longpress-overlay', true)\n longpressOverlayElement!: Overlay;\n\n @query('#hover-overlay', true)\n hoverOverlayElement!: Overlay;\n\n private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n return slot.assignedElements({ flatten: true }) as HTMLElement[];\n }\n\n private handleTriggerContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleSlotContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n switch (event.target.name) {\n case 'click-content':\n this.clickContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'longpress-content':\n this.longpressContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'hover-content':\n this.hoverContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n }\n }\n\n private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n const { target } = event;\n let type: OverlayContentTypes;\n if (target === this.clickOverlayElement) {\n type = 'click';\n } else if (target === this.longpressOverlayElement) {\n type = 'longpress';\n } else if (target === this.hoverOverlayElement) {\n type = 'hover';\n /* c8 ignore next 3 */\n } else {\n return;\n }\n if (event.newState === 'open') {\n this.open = type;\n } else if (this.open === type) {\n this.open = undefined;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('clickContent')) {\n this.clickPlacement =\n ((this.clickContent[0]?.getAttribute('placement') ||\n this.clickContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('hoverContent')) {\n this.hoverPlacement =\n ((this.hoverContent[0]?.getAttribute('placement') ||\n this.hoverContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('longpressContent')) {\n this.longpressPlacement =\n ((this.longpressContent[0]?.getAttribute('placement') ||\n this.longpressContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n super.update(changes);\n }\n\n protected renderSlot(name: string): TemplateResult {\n return html`\n <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n `;\n }\n\n protected renderClickOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
4
|
+
"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\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 {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n private clickContent: HTMLElement[] = [];\n\n private clickPlacement?: Placement;\n\n @state()\n private longpressContent: HTMLElement[] = [];\n\n private longpressPlacement?: Placement;\n\n @state()\n private hoverContent: HTMLElement[] = [];\n\n private hoverPlacement?: Placement;\n\n @state()\n private targetContent: HTMLElement[] = [];\n\n @query('#click-overlay', true)\n clickOverlayElement!: Overlay;\n\n @query('#longpress-overlay', true)\n longpressOverlayElement!: Overlay;\n\n @query('#hover-overlay', true)\n hoverOverlayElement!: Overlay;\n\n private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n return slot.assignedElements({ flatten: true }) as HTMLElement[];\n }\n\n private handleTriggerContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleSlotContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n switch (event.target.name) {\n case 'click-content':\n this.clickContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'longpress-content':\n this.longpressContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'hover-content':\n this.hoverContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n }\n }\n\n private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n const { target } = event;\n let type: OverlayContentTypes;\n if (target === this.clickOverlayElement) {\n type = 'click';\n } else if (target === this.longpressOverlayElement) {\n type = 'longpress';\n } else if (target === this.hoverOverlayElement) {\n type = 'hover';\n /* c8 ignore next 3 */\n } else {\n return;\n }\n if (event.newState === 'open') {\n this.open = type;\n } else if (this.open === type) {\n this.open = undefined;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('clickContent')) {\n this.clickPlacement =\n ((this.clickContent[0]?.getAttribute('placement') ||\n this.clickContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('hoverContent')) {\n this.hoverPlacement =\n ((this.hoverContent[0]?.getAttribute('placement') ||\n this.hoverContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('longpressContent')) {\n this.longpressPlacement =\n ((this.longpressContent[0]?.getAttribute('placement') ||\n this.longpressContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n super.update(changes);\n }\n\n protected renderSlot(name: string): TemplateResult {\n return html`\n <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n `;\n }\n\n protected renderClickOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayTrigger.ts"],
|
|
4
|
-
"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\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 {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './AbstractOverlay.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n private clickContent: HTMLElement[] = [];\n\n private clickPlacement?: Placement;\n\n @state()\n private longpressContent: HTMLElement[] = [];\n\n private longpressPlacement?: Placement;\n\n @state()\n private hoverContent: HTMLElement[] = [];\n\n private hoverPlacement?: Placement;\n\n @state()\n private targetContent: HTMLElement[] = [];\n\n @query('#click-overlay', true)\n clickOverlayElement!: Overlay;\n\n @query('#longpress-overlay', true)\n longpressOverlayElement!: Overlay;\n\n @query('#hover-overlay', true)\n hoverOverlayElement!: Overlay;\n\n private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n return slot.assignedElements({ flatten: true }) as HTMLElement[];\n }\n\n private handleTriggerContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleSlotContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n switch (event.target.name) {\n case 'click-content':\n this.clickContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'longpress-content':\n this.longpressContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'hover-content':\n this.hoverContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n }\n }\n\n private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n const { target } = event;\n let type: OverlayContentTypes;\n if (target === this.clickOverlayElement) {\n type = 'click';\n } else if (target === this.longpressOverlayElement) {\n type = 'longpress';\n } else if (target === this.hoverOverlayElement) {\n type = 'hover';\n /* c8 ignore next 3 */\n } else {\n return;\n }\n if (event.newState === 'open') {\n this.open = type;\n } else if (this.open === type) {\n this.open = undefined;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('clickContent')) {\n this.clickPlacement =\n ((this.clickContent[0]?.getAttribute('placement') ||\n this.clickContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('hoverContent')) {\n this.hoverPlacement =\n ((this.hoverContent[0]?.getAttribute('placement') ||\n this.hoverContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('longpressContent')) {\n this.longpressPlacement =\n ((this.longpressContent[0]?.getAttribute('placement') ||\n this.longpressContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n super.update(changes);\n }\n\n protected renderSlot(name: string): TemplateResult {\n return html`\n <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n `;\n }\n\n protected renderClickOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
4
|
+
"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\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 {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n private clickContent: HTMLElement[] = [];\n\n private clickPlacement?: Placement;\n\n @state()\n private longpressContent: HTMLElement[] = [];\n\n private longpressPlacement?: Placement;\n\n @state()\n private hoverContent: HTMLElement[] = [];\n\n private hoverPlacement?: Placement;\n\n @state()\n private targetContent: HTMLElement[] = [];\n\n @query('#click-overlay', true)\n clickOverlayElement!: Overlay;\n\n @query('#longpress-overlay', true)\n longpressOverlayElement!: Overlay;\n\n @query('#hover-overlay', true)\n hoverOverlayElement!: Overlay;\n\n private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n return slot.assignedElements({ flatten: true }) as HTMLElement[];\n }\n\n private handleTriggerContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleSlotContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n switch (event.target.name) {\n case 'click-content':\n this.clickContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'longpress-content':\n this.longpressContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n case 'hover-content':\n this.hoverContent = this.getAssignedElementsFromSlot(\n event.target\n );\n break;\n }\n }\n\n private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n const { target } = event;\n let type: OverlayContentTypes;\n if (target === this.clickOverlayElement) {\n type = 'click';\n } else if (target === this.longpressOverlayElement) {\n type = 'longpress';\n } else if (target === this.hoverOverlayElement) {\n type = 'hover';\n /* c8 ignore next 3 */\n } else {\n return;\n }\n if (event.newState === 'open') {\n this.open = type;\n } else if (this.open === type) {\n this.open = undefined;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('clickContent')) {\n this.clickPlacement =\n ((this.clickContent[0]?.getAttribute('placement') ||\n this.clickContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('hoverContent')) {\n this.hoverPlacement =\n ((this.hoverContent[0]?.getAttribute('placement') ||\n this.hoverContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n if (changes.has('longpressContent')) {\n this.longpressPlacement =\n ((this.longpressContent[0]?.getAttribute('placement') ||\n this.longpressContent[0]?.getAttribute(\n 'direction'\n )) as Placement) || undefined;\n }\n super.update(changes);\n }\n\n protected renderSlot(name: string): TemplateResult {\n return html`\n <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n `;\n }\n\n protected renderClickOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "query", "state", "overlayTriggerStyles", "slot", "event", "target", "type", "changes", "_a", "_b", "_c", "_d", "_e", "_f", "name", "content", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import type { ReactiveController, ReactiveElement } from '@spectrum-web-componen
|
|
|
2
2
|
import { Placement } from '@floating-ui/dom';
|
|
3
3
|
import type { VirtualTrigger } from './VirtualTrigger.js';
|
|
4
4
|
import type { OpenableElement } from './overlay-types.js';
|
|
5
|
-
|
|
5
|
+
type OverlayOptionsV1 = {
|
|
6
6
|
abortPromise?: Promise<boolean>;
|
|
7
7
|
delayed?: boolean;
|
|
8
8
|
offset?: number | [number, number];
|
package/src/events.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { TriggerInteractions } from './overlay-types.js';
|
|
2
|
+
export declare class BeforetoggleClosedEvent extends Event {
|
|
3
|
+
currentState: string;
|
|
4
|
+
newState: string;
|
|
5
|
+
constructor();
|
|
6
|
+
}
|
|
7
|
+
export declare class BeforetoggleOpenEvent extends Event {
|
|
8
|
+
currentState: string;
|
|
9
|
+
newState: string;
|
|
10
|
+
constructor();
|
|
11
|
+
}
|
|
12
|
+
export declare class OverlayStateEvent extends Event {
|
|
13
|
+
overlay: HTMLElement;
|
|
14
|
+
detail: {
|
|
15
|
+
interaction: string;
|
|
16
|
+
reason?: 'external-click';
|
|
17
|
+
};
|
|
18
|
+
constructor(type: string, overlay: HTMLElement, { publish, interaction, reason, }: {
|
|
19
|
+
publish?: boolean;
|
|
20
|
+
interaction: TriggerInteractions;
|
|
21
|
+
reason?: 'external-click';
|
|
22
|
+
});
|
|
23
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
export class BeforetoggleClosedEvent extends Event {
|
|
3
|
+
constructor() {
|
|
4
|
+
super("beforetoggle", {
|
|
5
|
+
bubbles: false,
|
|
6
|
+
composed: false
|
|
7
|
+
});
|
|
8
|
+
this.currentState = "open";
|
|
9
|
+
this.newState = "closed";
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
export class BeforetoggleOpenEvent extends Event {
|
|
13
|
+
constructor() {
|
|
14
|
+
super("beforetoggle", {
|
|
15
|
+
bubbles: false,
|
|
16
|
+
composed: false
|
|
17
|
+
});
|
|
18
|
+
this.currentState = "closed";
|
|
19
|
+
this.newState = "open";
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
export class OverlayStateEvent extends Event {
|
|
23
|
+
constructor(type, overlay, {
|
|
24
|
+
publish,
|
|
25
|
+
interaction,
|
|
26
|
+
reason
|
|
27
|
+
}) {
|
|
28
|
+
super(type, {
|
|
29
|
+
bubbles: publish,
|
|
30
|
+
composed: publish
|
|
31
|
+
});
|
|
32
|
+
this.overlay = overlay;
|
|
33
|
+
this.detail = {
|
|
34
|
+
interaction,
|
|
35
|
+
reason
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=events.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["events.ts"],
|
|
4
|
+
"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 type { TriggerInteractions } from './overlay-types.dev.js'\n\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class OverlayStateEvent extends Event {\n detail!: {\n interaction: string;\n reason?: 'external-click';\n };\n\n constructor(\n type: string,\n public overlay: HTMLElement,\n {\n publish,\n interaction,\n reason,\n }: {\n publish?: boolean;\n interaction: TriggerInteractions;\n reason?: 'external-click';\n }\n ) {\n super(type, {\n bubbles: publish,\n composed: publish,\n });\n this.detail = {\n interaction,\n reason,\n };\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAcO,aAAM,gCAAgC,MAAM;AAAA,EAG/C,cAAc;AACV,UAAM,gBAAgB;AAAA,MAClB,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC;AANL,wBAAe;AACf,oBAAW;AAAA,EAMX;AACJ;AAEO,aAAM,8BAA8B,MAAM;AAAA,EAG7C,cAAc;AACV,UAAM,gBAAgB;AAAA,MAClB,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC;AANL,wBAAe;AACf,oBAAW;AAAA,EAMX;AACJ;AAEO,aAAM,0BAA0B,MAAM;AAAA,EAMzC,YACI,MACO,SACP;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,EACJ,GAKF;AACE,UAAM,MAAM;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC;AAdM;AAeP,SAAK,SAAS;AAAA,MACV;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/events.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";export class BeforetoggleClosedEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="open";this.newState="closed"}}export class BeforetoggleOpenEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="closed";this.newState="open"}}export class OverlayStateEvent extends Event{constructor(r,l,{publish:o,interaction:s,reason:n}){super(r,{bubbles:o,composed:o});this.overlay=l;this.detail={interaction:s,reason:n}}}
|
|
2
|
+
//# sourceMappingURL=events.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["events.ts"],
|
|
4
|
+
"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 type { TriggerInteractions } from './overlay-types.js';\n\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class OverlayStateEvent extends Event {\n detail!: {\n interaction: string;\n reason?: 'external-click';\n };\n\n constructor(\n type: string,\n public overlay: HTMLElement,\n {\n publish,\n interaction,\n reason,\n }: {\n publish?: boolean;\n interaction: TriggerInteractions;\n reason?: 'external-click';\n }\n ) {\n super(type, {\n bubbles: publish,\n composed: publish,\n });\n this.detail = {\n interaction,\n reason,\n };\n }\n}\n"],
|
|
5
|
+
"mappings": "aAcO,aAAM,gCAAgC,KAAM,CAG/C,aAAc,CACV,MAAM,eAAgB,CAClB,QAAS,GACT,SAAU,EACd,CAAC,EANL,kBAAe,OACf,cAAW,QAMX,CACJ,CAEO,aAAM,8BAA8B,KAAM,CAG7C,aAAc,CACV,MAAM,eAAgB,CAClB,QAAS,GACT,SAAU,EACd,CAAC,EANL,kBAAe,SACf,cAAW,MAMX,CACJ,CAEO,aAAM,0BAA0B,KAAM,CAMzC,YACIA,EACOC,EACP,CACI,QAAAC,EACA,YAAAC,EACA,OAAAC,CACJ,EAKF,CACE,MAAMJ,EAAM,CACR,QAASE,EACT,SAAUA,CACd,CAAC,EAdM,aAAAD,EAeP,KAAK,OAAS,CACV,YAAAE,EACA,OAAAC,CACJ,CACJ,CACJ",
|
|
6
|
+
"names": ["type", "overlay", "publish", "interaction", "reason"]
|
|
7
|
+
}
|
package/src/overlay-events.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";export class OverlayCloseEvent extends Event{constructor({root:e}){super("sp-overlay-close",{bubbles:!0,composed:!0})
|
|
1
|
+
"use strict";export class OverlayCloseEvent extends Event{constructor({root:e}){super("sp-overlay-close",{bubbles:!0,composed:!0}),this.root=e}}
|
|
2
2
|
//# sourceMappingURL=overlay-events.js.map
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { ElementPart, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
-
import { OverlayOptions, TriggerInteraction } from './overlay-types.js';
|
|
3
|
-
import '
|
|
4
|
-
import { SlottableRequestEvent } from './slottable-request-event.js';
|
|
2
|
+
import type { OverlayOptions, TriggerInteraction } from './overlay-types.js';
|
|
3
|
+
import { type SlottableRequestEvent } from './slottable-request-event.js';
|
|
5
4
|
import { SlottableRequestDirective } from './slottable-request-directive.js';
|
|
6
|
-
export
|
|
5
|
+
export type InsertionOptions = {
|
|
7
6
|
el: HTMLElement | (() => HTMLElement);
|
|
8
7
|
where: InsertPosition;
|
|
9
8
|
};
|
|
10
|
-
export
|
|
9
|
+
export type OverlayTriggerOptions = {
|
|
11
10
|
open?: boolean;
|
|
12
11
|
triggerInteraction: TriggerInteraction;
|
|
13
12
|
overlayOptions: OverlayOptions;
|
|
@@ -15,7 +14,7 @@ export declare type OverlayTriggerOptions = {
|
|
|
15
14
|
};
|
|
16
15
|
export declare class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
17
16
|
private overlay;
|
|
18
|
-
private strategy
|
|
17
|
+
private strategy;
|
|
19
18
|
protected defaultOptions: OverlayTriggerOptions;
|
|
20
19
|
protected options: OverlayOptions;
|
|
21
20
|
protected insertionOptions?: InsertionOptions;
|
|
@@ -4,20 +4,18 @@ import {
|
|
|
4
4
|
render
|
|
5
5
|
} from "@spectrum-web-components/base";
|
|
6
6
|
import { directive } from "lit/async-directive.js";
|
|
7
|
-
import {
|
|
8
|
-
import "../sp-overlay.dev.js";
|
|
7
|
+
import { strategies } from "./strategies.dev.js";
|
|
9
8
|
import {
|
|
10
9
|
removeSlottableRequest
|
|
11
10
|
} from "./slottable-request-event.dev.js";
|
|
12
11
|
import { SlottableRequestDirective } from "./slottable-request-directive.dev.js";
|
|
12
|
+
import { AbstractOverlay } from "./AbstractOverlay.dev.js";
|
|
13
13
|
export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
-
this.overlay = new Overlay();
|
|
17
16
|
this.defaultOptions = {
|
|
18
17
|
triggerInteraction: "click",
|
|
19
18
|
overlayOptions: {
|
|
20
|
-
placement: "top-start",
|
|
21
19
|
type: "auto",
|
|
22
20
|
offset: 0
|
|
23
21
|
}
|
|
@@ -47,11 +45,15 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
|
47
45
|
}
|
|
48
46
|
if (newTarget || newStrategy) {
|
|
49
47
|
(_b = this.strategy) == null ? void 0 : _b.abort();
|
|
50
|
-
this.strategy = new strategies[triggerInteraction](this.
|
|
48
|
+
this.strategy = new strategies[triggerInteraction](this.target, {
|
|
49
|
+
isPersistent: true,
|
|
50
|
+
handleOverlayReady: (overlay) => {
|
|
51
|
+
this.listenerHost = this.overlay = overlay;
|
|
52
|
+
this.init();
|
|
53
|
+
}
|
|
54
|
+
});
|
|
51
55
|
}
|
|
52
|
-
this.
|
|
53
|
-
this.init();
|
|
54
|
-
this.overlay.open = (_c = options == null ? void 0 : options.open) != null ? _c : false;
|
|
56
|
+
this.strategy.open = (_c = options == null ? void 0 : options.open) != null ? _c : false;
|
|
55
57
|
}
|
|
56
58
|
handleSlottableRequest(event) {
|
|
57
59
|
var _a, _b;
|
|
@@ -62,7 +64,7 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
|
62
64
|
if (willRemoveSlottable) {
|
|
63
65
|
this.overlay.remove();
|
|
64
66
|
} else {
|
|
65
|
-
|
|
67
|
+
AbstractOverlay.applyOptions(this.overlay, {
|
|
66
68
|
...this.options,
|
|
67
69
|
trigger: this.target
|
|
68
70
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-directive.ts"],
|
|
4
|
-
"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*/\nimport {\n ElementPart,\n nothing,\n render,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from 'lit/async-directive.js';\nimport {
|
|
5
|
-
"mappings": ";AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,iBAAiB;AAC1B,SAAS,
|
|
4
|
+
"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*/\nimport {\n ElementPart,\n nothing,\n render,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from 'lit/async-directive.js';\nimport { strategies } from './strategies.dev.js'\nimport type { OverlayOptions, TriggerInteraction } from './overlay-types.dev.js'\nimport type { ClickController } from './ClickController.dev.js'\nimport type { HoverController } from './HoverController.dev.js'\nimport type { LongpressController } from './LongpressController.dev.js'\nimport {\n removeSlottableRequest,\n type SlottableRequestEvent,\n} from './slottable-request-event.dev.js'\nimport { SlottableRequestDirective } from './slottable-request-directive.dev.js'\nimport { AbstractOverlay } from './AbstractOverlay.dev.js'\n\nexport type InsertionOptions = {\n el: HTMLElement | (() => HTMLElement);\n where: InsertPosition;\n};\n\nexport type OverlayTriggerOptions = {\n open?: boolean;\n triggerInteraction: TriggerInteraction;\n overlayOptions: OverlayOptions;\n insertionOptions?: InsertionOptions;\n};\n\nexport class OverlayTriggerDirective extends SlottableRequestDirective {\n private overlay!: AbstractOverlay;\n private strategy!: ClickController | HoverController | LongpressController;\n\n protected defaultOptions: OverlayTriggerOptions = {\n triggerInteraction: 'click',\n overlayOptions: {\n type: 'auto',\n offset: 0,\n },\n };\n protected options: OverlayOptions = {\n ...this.defaultOptions.overlayOptions,\n };\n protected insertionOptions?: InsertionOptions;\n\n /* c8 ignore next 9 */\n override render(\n _template: () => TemplateResult,\n _options?: Partial<OverlayTriggerOptions>\n ): unknown {\n // render function here just defines the interface to the update call later\n // we don't have anything to render since this is intended to be an ElementPart directive\n // so will be used on an element and is not itself rendered\n return nothing;\n }\n\n override update(\n part: ElementPart,\n [template, options]: Parameters<this['render']>\n ): void {\n this.options = {\n ...this.defaultOptions.overlayOptions,\n ...options?.overlayOptions,\n };\n this.insertionOptions = options?.insertionOptions;\n this.template = template;\n let newTarget = false;\n const triggerInteraction = (options?.triggerInteraction ||\n this.defaultOptions.triggerInteraction) as TriggerInteraction;\n const newStrategy =\n (this.strategy?.type as unknown as TriggerInteraction) !==\n triggerInteraction;\n if (this.target !== part.element) {\n this.target = part.element as HTMLElement;\n newTarget = true;\n }\n if (newTarget || newStrategy) {\n this.strategy?.abort();\n this.strategy = new strategies[\n triggerInteraction as TriggerInteraction\n ](this.target, {\n isPersistent: true,\n handleOverlayReady: (overlay: AbstractOverlay) => {\n this.listenerHost = this.overlay = overlay;\n this.init();\n },\n });\n }\n this.strategy.open = options?.open ?? false;\n }\n\n override handleSlottableRequest(event: SlottableRequestEvent): void {\n /* c8 ignore next 1 */\n if (event.target !== event.currentTarget) return;\n\n const willRemoveSlottable = event.data === removeSlottableRequest;\n render(willRemoveSlottable ? undefined : this.template(), this.overlay);\n\n if (willRemoveSlottable) {\n this.overlay.remove();\n } else {\n AbstractOverlay.applyOptions(this.overlay, {\n ...this.options,\n trigger: this.target,\n });\n const insertionEl =\n typeof this.insertionOptions?.el === 'function'\n ? this.insertionOptions.el()\n : this.insertionOptions?.el || this.target;\n const { where = 'afterend' } = this.insertionOptions || {};\n insertionEl.insertAdjacentElement(where, this.overlay);\n }\n }\n}\n\nexport const trigger = directive(OverlayTriggerDirective);\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAK3B;AAAA,EACI;AAAA,OAEG;AACP,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAczB,aAAM,gCAAgC,0BAA0B;AAAA,EAAhE;AAAA;AAIH,SAAU,iBAAwC;AAAA,MAC9C,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,QACZ,MAAM;AAAA,QACN,QAAQ;AAAA,MACZ;AAAA,IACJ;AACA,SAAU,UAA0B;AAAA,MAChC,GAAG,KAAK,eAAe;AAAA,IAC3B;AAAA;AAAA;AAAA,EAIS,OACL,WACA,UACO;AAIP,WAAO;AAAA,EACX;AAAA,EAES,OACL,MACA,CAAC,UAAU,OAAO,GACd;AAxEZ;AAyEQ,SAAK,UAAU;AAAA,MACX,GAAG,KAAK,eAAe;AAAA,MACvB,GAAG,mCAAS;AAAA,IAChB;AACA,SAAK,mBAAmB,mCAAS;AACjC,SAAK,WAAW;AAChB,QAAI,YAAY;AAChB,UAAM,sBAAsB,mCAAS,uBACjC,KAAK,eAAe;AACxB,UAAM,gBACD,UAAK,aAAL,mBAAe,UAChB;AACJ,QAAI,KAAK,WAAW,KAAK,SAAS;AAC9B,WAAK,SAAS,KAAK;AACnB,kBAAY;AAAA,IAChB;AACA,QAAI,aAAa,aAAa;AAC1B,iBAAK,aAAL,mBAAe;AACf,WAAK,WAAW,IAAI,WAChB,kBACJ,EAAE,KAAK,QAAQ;AAAA,QACX,cAAc;AAAA,QACd,oBAAoB,CAAC,YAA6B;AAC9C,eAAK,eAAe,KAAK,UAAU;AACnC,eAAK,KAAK;AAAA,QACd;AAAA,MACJ,CAAC;AAAA,IACL;AACA,SAAK,SAAS,QAAO,wCAAS,SAAT,YAAiB;AAAA,EAC1C;AAAA,EAES,uBAAuB,OAAoC;AAxGxE;AA0GQ,QAAI,MAAM,WAAW,MAAM;AAAe;AAE1C,UAAM,sBAAsB,MAAM,SAAS;AAC3C,WAAO,sBAAsB,SAAY,KAAK,SAAS,GAAG,KAAK,OAAO;AAEtE,QAAI,qBAAqB;AACrB,WAAK,QAAQ,OAAO;AAAA,IACxB,OAAO;AACH,sBAAgB,aAAa,KAAK,SAAS;AAAA,QACvC,GAAG,KAAK;AAAA,QACR,SAAS,KAAK;AAAA,MAClB,CAAC;AACD,YAAM,cACF,SAAO,UAAK,qBAAL,mBAAuB,QAAO,aAC/B,KAAK,iBAAiB,GAAG,MACzB,UAAK,qBAAL,mBAAuB,OAAM,KAAK;AAC5C,YAAM,EAAE,QAAQ,WAAW,IAAI,KAAK,oBAAoB,CAAC;AACzD,kBAAY,sBAAsB,OAAO,KAAK,OAAO;AAAA,IACzD;AAAA,EACJ;AACJ;AAEO,aAAM,UAAU,UAAU,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{nothing as g,render as
|
|
1
|
+
"use strict";import{nothing as g,render as y}from"@spectrum-web-components/base";import{directive as v}from"lit/async-directive.js";import{strategies as O}from"./strategies.js";import{removeSlottableRequest as m}from"./slottable-request-event.js";import{SlottableRequestDirective as c}from"./slottable-request-directive.js";import{AbstractOverlay as h}from"./AbstractOverlay.js";export class OverlayTriggerDirective extends c{constructor(){super(...arguments);this.defaultOptions={triggerInteraction:"click",overlayOptions:{type:"auto",offset:0}};this.options={...this.defaultOptions.overlayOptions}}render(t,r){return g}update(t,[r,e]){var s,l,a;this.options={...this.defaultOptions.overlayOptions,...e==null?void 0:e.overlayOptions},this.insertionOptions=e==null?void 0:e.insertionOptions,this.template=r;let i=!1;const n=(e==null?void 0:e.triggerInteraction)||this.defaultOptions.triggerInteraction,o=((s=this.strategy)==null?void 0:s.type)!==n;this.target!==t.element&&(this.target=t.element,i=!0),(i||o)&&((l=this.strategy)==null||l.abort(),this.strategy=new O[n](this.target,{isPersistent:!0,handleOverlayReady:p=>{this.listenerHost=this.overlay=p,this.init()}})),this.strategy.open=(a=e==null?void 0:e.open)!=null?a:!1}handleSlottableRequest(t){var e,i;if(t.target!==t.currentTarget)return;const r=t.data===m;if(y(r?void 0:this.template(),this.overlay),r)this.overlay.remove();else{h.applyOptions(this.overlay,{...this.options,trigger:this.target});const n=typeof((e=this.insertionOptions)==null?void 0:e.el)=="function"?this.insertionOptions.el():((i=this.insertionOptions)==null?void 0:i.el)||this.target,{where:o="afterend"}=this.insertionOptions||{};n.insertAdjacentElement(o,this.overlay)}}}export const trigger=v(OverlayTriggerDirective);
|
|
2
2
|
//# sourceMappingURL=overlay-trigger-directive.js.map
|