@spectrum-web-components/overlay 0.35.1-rc.24 → 0.35.1-rc.25
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 +2277 -0
- package/package.json +8 -8
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js.map +2 -2
- package/src/OverlayTrigger.d.ts +0 -1
- package/src/OverlayTrigger.dev.js +0 -5
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js +1 -1
- package/src/OverlayTrigger.js.map +2 -2
- package/src/overlay.css.dev.js +1 -1
- package/src/overlay.css.dev.js.map +1 -1
- package/src/overlay.css.js +1 -1
- package/src/overlay.css.js.map +1 -1
- package/src/topLayerOverTransforms.dev.js +2 -1
- package/src/topLayerOverTransforms.dev.js.map +2 -2
- package/src/topLayerOverTransforms.js +1 -1
- package/src/topLayerOverTransforms.js.map +2 -2
- package/stories/overlay-element.stories.js +5 -4
- package/stories/overlay-element.stories.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +55 -0
- package/test/overlay-trigger-longpress.test.js.map +2 -2
|
@@ -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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.dev.js'\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.dev.js'\nimport type { Overlay } from './Overlay.dev.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 /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" }\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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleLongpressContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleHoverContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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 <div id=\"overlay-content\">\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 name=\"click-content\"\n @slotchange=${this.handleClickContent}\n ></slot>\n </sp-overlay>\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 name=\"longpress-content\"\n @slotchange=${this.handleLongpressContent}\n ></slot>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n </sp-overlay>\n <sp-overlay\n id=\"hover-overlay\"\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\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 name=\"hover-content\"\n @slotchange=${this.handleHoverContent}\n ></slot>\n </sp-overlay>\n <slot name=${this._longpressId}></slot>\n </div>\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
|
|
5
|
-
"mappings": "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
|
|
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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.dev.js'\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.dev.js'\nimport type { Overlay } from './Overlay.dev.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 /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" }\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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleLongpressContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleHoverContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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 <div id=\"overlay-content\">\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 name=\"click-content\"\n @slotchange=${this.handleClickContent}\n ></slot>\n </sp-overlay>\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 name=\"longpress-content\"\n @slotchange=${this.handleLongpressContent}\n ></slot>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n </sp-overlay>\n <sp-overlay\n id=\"hover-overlay\"\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\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 name=\"hover-content\"\n @slotchange=${this.handleHoverContent}\n ></slot>\n </sp-overlay>\n <slot name=${this._longpressId}></slot>\n </div>\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/OverlayTrigger.js
CHANGED
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
</sp-overlay>
|
|
57
57
|
<slot name=${this._longpressId}></slot>
|
|
58
58
|
</div>
|
|
59
|
-
`}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}
|
|
59
|
+
`}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}n([i({reflect:!0})],OverlayTrigger.prototype,"placement",2),n([i()],OverlayTrigger.prototype,"type",2),n([i({type:Number})],OverlayTrigger.prototype,"offset",2),n([i({reflect:!0})],OverlayTrigger.prototype,"open",2),n([i({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),n([a()],OverlayTrigger.prototype,"clickContent",2),n([a()],OverlayTrigger.prototype,"longpressContent",2),n([a()],OverlayTrigger.prototype,"hoverContent",2),n([a()],OverlayTrigger.prototype,"targetContent",2),n([c("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),n([c("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),n([c("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
|
|
60
60
|
//# sourceMappingURL=OverlayTrigger.js.map
|
|
@@ -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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.js';\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.js';\nimport type { Overlay } from './Overlay.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 /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" }\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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleLongpressContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleHoverContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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 <div id=\"overlay-content\">\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 name=\"click-content\"\n @slotchange=${this.handleClickContent}\n ></slot>\n </sp-overlay>\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 name=\"longpress-content\"\n @slotchange=${this.handleLongpressContent}\n ></slot>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n </sp-overlay>\n <sp-overlay\n id=\"hover-overlay\"\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\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 name=\"hover-content\"\n @slotchange=${this.handleHoverContent}\n ></slot>\n </sp-overlay>\n <slot name=${this._longpressId}></slot>\n </div>\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
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,EACA,SAAAC,MACG,kDAGP,OAAOC,MAA0B,2BACjC,MAAO,mBAkBA,aAAM,uBAAuBJ,CAAgB,CAA7C,kCAgBH,KAAO,OAAS,EAMhB,KAAO,SAAW,GAGlB,KAAQ,aAA8B,CAAC,EAKvC,KAAQ,iBAAkC,CAAC,EAK3C,KAAQ,aAA8B,CAAC,EAKvC,KAAQ,cAA+B,CAAC,EAWxC,KAAQ,aAAe,mCAlDvB,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAoB,CAChC,CAkDQ,4BAA4BC,EAAsC,CACtE,OAAOA,EAAK,iBAAiB,CAAE,QAAS,EAAK,CAAC,CAClD,CAEQ,qBACJC,EACI,CACJ,KAAK,cAAgB,KAAK,4BAA4BA,EAAM,MAAM,CACtE,CAEQ,mBACJA,EACI,CACJ,KAAK,aAAe,KAAK,4BAA4BA,EAAM,MAAM,CACrE,CAEQ,uBACJA,EACI,CACJ,KAAK,iBAAmB,KAAK,4BAA4BA,EAAM,MAAM,CACzE,CAEQ,mBACJA,EACI,CACJ,KAAK,aAAe,KAAK,4BAA4BA,EAAM,MAAM,CACrE,CAEQ,mBAAmBA,EAAoC,CAC3D,KAAM,CAAE,OAAAC,CAAO,EAAID,EACnB,IAAIE,EACJ,GAAID,IAAW,KAAK,oBAChBC,EAAO,gBACAD,IAAW,KAAK,wBACvBC,EAAO,oBACAD,IAAW,KAAK,oBACvBC,EAAO,YAGP,QAEAF,EAAM,WAAa,OACnB,KAAK,KAAOE,EACL,KAAK,OAASA,IACrB,KAAK,KAAO,OAEpB,CAEmB,OAAOC,EAA+B,CAlJ7D,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAmJYN,EAAQ,IAAI,cAAc,IAC1B,KAAK,iBACCC,EAAA,KAAK,aAAa,CAAC,IAAnB,YAAAA,EAAsB,aAAa,iBACjCC,EAAA,KAAK,aAAa,CAAC,IAAnB,YAAAA,EAAsB,aAClB,eACgB,QAE5BF,EAAQ,IAAI,cAAc,IAC1B,KAAK,iBACCG,EAAA,KAAK,aAAa,CAAC,IAAnB,YAAAA,EAAsB,aAAa,iBACjCC,EAAA,KAAK,aAAa,CAAC,IAAnB,YAAAA,EAAsB,aAClB,eACgB,QAE5BJ,EAAQ,IAAI,kBAAkB,IAC9B,KAAK,qBACCK,EAAA,KAAK,iBAAiB,CAAC,IAAvB,YAAAA,EAA0B,aAAa,iBACrCC,EAAA,KAAK,iBAAiB,CAAC,IAAvB,YAAAA,EAA0B,aACtB,eACgB,QAEhC,MAAM,OAAON,CAAO,CACxB,CAEmB,QAAyB,CAGxC,OAAOV;AAAA;AAAA;AAAA;AAAA,8BAIe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKH,KAAK,UAAY,CAAC,KAAK,aAAa;AAAA,4BACxC,KAAK,OAAS,SAAW,CAAC,CAAC,KAAK,aAAa;AAAA,8BAC3C,KAAK;AAAA,iCACF,KAAK,gBAAkB,KAAK;AAAA,sCACvB,KAAK,cAAc,CAAC;AAAA,0CAChB;AAAA,4BACd,KAAK,OAAS,QAAU,OAAS;AAAA,oCACzB,KAAK;AAAA;AAAA;AAAA;AAAA,sCAIH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKX,KAAK,UAAY,CAAC,KAAK,iBAAiB;AAAA,4BAC5C,KAAK,OAAS,aACtB,CAAC,CAAC,KAAK,iBAAiB;AAAA,8BACd,KAAK;AAAA,iCACF,KAAK,oBAAsB,KAAK;AAAA,sCAC3B,KAAK,cAAc,CAAC;AAAA,0CAChB;AAAA,4BACd;AAAA,oCACQ,KAAK;AAAA;AAAA;AAAA;AAAA,sCAIH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMX,KAAK,UACjB,CAAC,KAAK,aAAa,QAClB,CAAC,CAAC,KAAK,MAAQ,KAAK,OAAS;AAAA,4BACtB,KAAK,OAAS,SAAW,CAAC,CAAC,KAAK,aAAa;AAAA,8BAC3C,KAAK;AAAA,iCACF,KAAK,gBAAkB,KAAK;AAAA,sCACvB,KAAK,cAAc,CAAC;AAAA,0CAChB;AAAA,4BACd;AAAA,oCACQ,KAAK;AAAA;AAAA;AAAA;AAAA,sCAIH,KAAK;AAAA;AAAA;AAAA,6BAGd,KAAK;AAAA;AAAA,SAI9B,CAEmB,QAAQU,EAA+B,CAEtD,GADA,MAAM,QAAQA,CAAO,EACjB,KAAK,UAAYA,EAAQ,IAAI,UAAU,EAAG,CAC1C,KAAK,KAAO,OACZ,OAER,CAEA,MAAyB,mBAAsC,CAE3D,OADkB,MAAM,MAAM,kBAAkB,CAEpD,
|
|
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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.js';\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.js';\nimport type { Overlay } from './Overlay.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 /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" }\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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleLongpressContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n }\n\n private handleHoverContent(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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 <div id=\"overlay-content\">\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 name=\"click-content\"\n @slotchange=${this.handleClickContent}\n ></slot>\n </sp-overlay>\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 name=\"longpress-content\"\n @slotchange=${this.handleLongpressContent}\n ></slot>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n </sp-overlay>\n <sp-overlay\n id=\"hover-overlay\"\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\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 name=\"hover-content\"\n @slotchange=${this.handleHoverContent}\n ></slot>\n </sp-overlay>\n <slot name=${this._longpressId}></slot>\n </div>\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
|
+
"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", "__decorateClass"]
|
|
7
7
|
}
|
package/src/overlay.css.dev.js
CHANGED
|
@@ -3,7 +3,7 @@ import { css } from "@spectrum-web-components/base";
|
|
|
3
3
|
const styles = css`
|
|
4
4
|
:host{--swc-overlay-animation-distance:var(
|
|
5
5
|
--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
|
|
6
|
-
)
|
|
6
|
+
);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
|
|
7
7
|
`;
|
|
8
8
|
export default styles;
|
|
9
9
|
//# sourceMappingURL=overlay.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.css.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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)
|
|
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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/overlay.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";import{css as o}from"@spectrum-web-components/base";const e=o`
|
|
2
2
|
:host{--swc-overlay-animation-distance:var(
|
|
3
3
|
--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
|
|
4
|
-
)
|
|
4
|
+
);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
|
|
5
5
|
`;export default e;
|
|
6
6
|
//# sourceMappingURL=overlay.css.js.map
|
package/src/overlay.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.css.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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)
|
|
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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -53,7 +53,8 @@ export const topLayerOverTransforms = () => ({
|
|
|
53
53
|
let overTransforms = false;
|
|
54
54
|
const containingBlock = getContainingBlock(reference);
|
|
55
55
|
if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
|
|
56
|
-
|
|
56
|
+
const css = getComputedStyle(containingBlock);
|
|
57
|
+
overTransforms = css.transform !== "none";
|
|
57
58
|
}
|
|
58
59
|
if (onTopLayer && overTransforms && containingBlock) {
|
|
59
60
|
const rect = containingBlock.getBoundingClientRect();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["topLayerOverTransforms.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n if (!onTopLayer) {\n const dialogAncestorQueryEvent = new Event(\n 'floating-ui-dialog-test',\n { composed: true, bubbles: true }\n );\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach(\n (el) => {\n if (el === floating || el.localName !== 'dialog')\n return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n }\n );\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n }\n let overTransforms = false;\n const containingBlock = getContainingBlock(reference as Element);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n overTransforms =
|
|
5
|
-
"mappings": ";AAYA,SAAS,oBAAoB,iBAAiB;AAEvC,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAP;AAAA,IAAe;AACjB,yBAAqB;AACrB,QAAI,CAAC,YAAY;AACb,YAAM,2BAA2B,IAAI;AAAA,QACjC;AAAA,QACA,EAAE,UAAU,MAAM,SAAS,KAAK;AAAA,MACpC;AACA,eAAS;AAAA,QACL;AAAA,QACA,CAAC,UAAiB;AACd,UAAC,MAAM,aAAa,EAA2B;AAAA,YAC3C,CAAC,OAAO;AACJ,kBAAI,OAAO,YAAY,GAAG,cAAc;AACpC;AACJ,kBAAI;AACA,6BAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,cAGlD,SAAS,OAAP;AAAA,cAAe;AAAA,YACrB;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACjB;AACA,eAAS,cAAc,wBAAwB;AAAA,IACnD;AACA,QAAI,iBAAiB;AACrB,UAAM,kBAAkB,mBAAmB,SAAoB;AAC/D,QACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,uBAAiB;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n if (!onTopLayer) {\n const dialogAncestorQueryEvent = new Event(\n 'floating-ui-dialog-test',\n { composed: true, bubbles: true }\n );\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach(\n (el) => {\n if (el === floating || el.localName !== 'dialog')\n return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n }\n );\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n }\n let overTransforms = false;\n const containingBlock = getContainingBlock(reference as Element);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n overTransforms = css.transform !== 'none';\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,oBAAoB,iBAAiB;AAEvC,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAP;AAAA,IAAe;AACjB,yBAAqB;AACrB,QAAI,CAAC,YAAY;AACb,YAAM,2BAA2B,IAAI;AAAA,QACjC;AAAA,QACA,EAAE,UAAU,MAAM,SAAS,KAAK;AAAA,MACpC;AACA,eAAS;AAAA,QACL;AAAA,QACA,CAAC,UAAiB;AACd,UAAC,MAAM,aAAa,EAA2B;AAAA,YAC3C,CAAC,OAAO;AACJ,kBAAI,OAAO,YAAY,GAAG,cAAc;AACpC;AACJ,kBAAI;AACA,6BAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,cAGlD,SAAS,OAAP;AAAA,cAAe;AAAA,YACrB;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACjB;AACA,eAAS,cAAc,wBAAwB;AAAA,IACnD;AACA,QAAI,iBAAiB;AACrB,UAAM,kBAAkB,mBAAmB,SAAoB;AAC/D,QACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,YAAM,MAAM,iBAAiB,eAAe;AAC5C,uBAAiB,IAAI,cAAc;AAAA,IACvC;AAEA,QAAI,cAAc,kBAAkB,iBAAiB;AACjD,YAAM,OAAO,gBAAgB,sBAAsB;AACnD,iBAAW,IAAI,KAAK;AACpB,iBAAW,IAAI,KAAK;AAAA,IACxB;AAEA,QAAI,cAAc,oBAAoB;AAClC,aAAO;AAAA,QACH,GAAG,IAAI,WAAW;AAAA,QAClB,GAAG,IAAI,WAAW;AAAA,QAClB,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,WAAO;AAAA,MACH,GAAG,IAAI,WAAW;AAAA,MAClB,GAAG,IAAI,WAAW;AAAA,MAClB,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{getContainingBlock as y,getWindow as u}from"@floating-ui/utils/dom";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(d){const{x:
|
|
1
|
+
"use strict";import{getContainingBlock as y,getWindow as u}from"@floating-ui/utils/dom";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(d){const{x:a,y:s,elements:{reference:f,floating:n}}=d;let e=!1,i=!1;const t={x:0,y:0};try{e=e||n.matches(":popover-open")}catch(o){}try{e=e||n.matches(":open")}catch(o){}try{e=e||n.matches(":modal")}catch(o){}if(i=e,!e){const o=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});n.addEventListener("floating-ui-dialog-test",m=>{m.composedPath().forEach(c=>{if(!(c===n||c.localName!=="dialog"))try{e=e||c.matches(":modal")}catch(g){}})},{once:!0}),n.dispatchEvent(o)}let l=!1;const r=y(f);if(r!==null&&u(r)!==r&&(l=getComputedStyle(r).transform!=="none"),e&&l&&r){const o=r.getBoundingClientRect();t.x=o.x,t.y=o.y}return e&&i?{x:a+t.x,y:s+t.y,data:t}:e?{x:a,y:s,data:t}:{x:a-t.x,y:s-t.y,data:t}}});
|
|
2
2
|
//# sourceMappingURL=topLayerOverTransforms.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["topLayerOverTransforms.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n if (!onTopLayer) {\n const dialogAncestorQueryEvent = new Event(\n 'floating-ui-dialog-test',\n { composed: true, bubbles: true }\n );\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach(\n (el) => {\n if (el === floating || el.localName !== 'dialog')\n return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n }\n );\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n }\n let overTransforms = false;\n const containingBlock = getContainingBlock(reference as Element);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n overTransforms =
|
|
5
|
-
"mappings": "aAYA,OAAS,sBAAAA,EAAoB,aAAAC,MAAiB,yBAEvC,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACzB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAF,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASI,EAAP,CAAe,CAEjB,GADAF,EAAqBD,EACjB,CAACA,EAAY,CACb,MAAMI,EAA2B,IAAI,MACjC,0BACA,CAAE,SAAU,GAAM,QAAS,EAAK,CACpC,EACAL,EAAS,iBACL,0BACCM,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAC1CC,GAAO,CACJ,GAAI,EAAAA,IAAOP,GAAYO,EAAG,YAAc,UAExC,GAAI,CACAN,EAAaA,GAAcM,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAP,CAAe,CACrB,CACJ,CACJ,EACA,CAAE,KAAM,EAAK,CACjB,EACAJ,EAAS,cAAcK,CAAwB,EAEnD,IAAIG,EAAiB,GACrB,MAAMC,EAAkBf,EAAmBK,CAAoB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n if (!onTopLayer) {\n const dialogAncestorQueryEvent = new Event(\n 'floating-ui-dialog-test',\n { composed: true, bubbles: true }\n );\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach(\n (el) => {\n if (el === floating || el.localName !== 'dialog')\n return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n }\n );\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n }\n let overTransforms = false;\n const containingBlock = getContainingBlock(reference as Element);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n overTransforms = css.transform !== 'none';\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
|
|
5
|
+
"mappings": "aAYA,OAAS,sBAAAA,EAAoB,aAAAC,MAAiB,yBAEvC,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACzB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAF,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASI,EAAP,CAAe,CAEjB,GADAF,EAAqBD,EACjB,CAACA,EAAY,CACb,MAAMI,EAA2B,IAAI,MACjC,0BACA,CAAE,SAAU,GAAM,QAAS,EAAK,CACpC,EACAL,EAAS,iBACL,0BACCM,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAC1CC,GAAO,CACJ,GAAI,EAAAA,IAAOP,GAAYO,EAAG,YAAc,UAExC,GAAI,CACAN,EAAaA,GAAcM,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAP,CAAe,CACrB,CACJ,CACJ,EACA,CAAE,KAAM,EAAK,CACjB,EACAJ,EAAS,cAAcK,CAAwB,EAEnD,IAAIG,EAAiB,GACrB,MAAMC,EAAkBf,EAAmBK,CAAoB,EAU/D,GARIU,IAAoB,MACpBd,EAAUc,CAAe,IACpBA,IAGLD,EADY,iBAAiBC,CAAe,EACvB,YAAc,QAGnCR,GAAcO,GAAkBC,EAAiB,CACjD,MAAMC,EAAOD,EAAgB,sBAAsB,EACnDN,EAAW,EAAIO,EAAK,EACpBP,EAAW,EAAIO,EAAK,EAGxB,OAAIT,GAAcC,EACP,CACH,EAAGL,EAAIM,EAAW,EAClB,EAAGL,EAAIK,EAAW,EAClB,KAAMA,CACV,EAGAF,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMK,CACV,EAGG,CACH,EAAGN,EAAIM,EAAW,EAClB,EAAGL,EAAIK,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
|
|
6
6
|
"names": ["getContainingBlock", "getWindow", "middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "diffCoords", "error", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "containingBlock", "rect"]
|
|
7
7
|
}
|
|
@@ -132,17 +132,18 @@ export const all = ({ delayed }) => html`
|
|
|
132
132
|
</sp-overlay>
|
|
133
133
|
`;
|
|
134
134
|
export const actionGroup = ({ delayed }) => {
|
|
135
|
-
const popoverOffset = [6, -
|
|
135
|
+
const popoverOffset = [6, -13];
|
|
136
136
|
return html`
|
|
137
137
|
<style>
|
|
138
138
|
sp-popover sp-action-group {
|
|
139
139
|
padding: var(--spectrum-actiongroup-vertical-spacing-regular);
|
|
140
140
|
}
|
|
141
|
-
|
|
142
|
-
|
|
141
|
+
.root {
|
|
142
|
+
inset-inline-end: 3em;
|
|
143
|
+
inset-block-start: 3em;
|
|
143
144
|
}
|
|
144
145
|
</style>
|
|
145
|
-
<sp-popover open>
|
|
146
|
+
<sp-popover open class="root">
|
|
146
147
|
<sp-action-group vertical quiet emphasized selects="single">
|
|
147
148
|
<sp-action-button id="trigger-1" hold-affordance>
|
|
148
149
|
<sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-element.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover dialog>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-popover>\n </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Click content</sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Longpress content</sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,SAAS,gBAAgB;AAEzB,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,MAAM;AAAA,IACN,SAAS;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACN,MAAM;AAAA,MACF,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAUA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAAA;AAAA;AAAA,gBAGlB;AAAA,2BACW;AAAA,eACZ,UAAU,IAAI;AAAA,oBACT,UAAU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMrB,SAAS,WAAW,SAAS,SACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BASA;AAAA;AAAA;AAAA;AAAA;AAMf,aAAM,QAAQ,CAAC,SAAqC,SAAS,IAAI;AACxE,MAAM,OAAO;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AACV;AAEO,aAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAAA;AAAA;AAAA,gBAGlB;AAAA,2BACW;AAAA,eACZ,UAAU,IAAI;AAAA,oBACT,UAAU,SAAS;AAAA;AAAA,UAE7B,SAAS;AAAA;AAAA;AAGnB,KAAK,OAAO;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AACV;AAEO,aAAM,QAAQ,CAAC,SAAqC,SAAS,IAAI;AACxE,MAAM,OAAO;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AACV;AAEO,aAAM,QAAQ,CAAC,SAAqC,SAAS,IAAI;AACxE,MAAM,OAAO;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACf;AAEO,aAAM,YAAY,CAAC,SAAqC,SAAS,IAAI;AAC5E,UAAU,OAAO;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AACV;AAEO,aAAM,MAAM,CAAC,EAAE,QAAQ,MAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,aAAM,cAAc,CAAC,EAAE,QAAQ,MAAkC;AACpE,QAAM,gBAAgB,CAAC,GAAG,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover dialog>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-popover>\n </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Click content</sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Longpress content</sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: var(--spectrum-actiongroup-vertical-spacing-regular);\n }\n .root {\n inset-inline-end: 3em;\n inset-block-start: 3em;\n }\n </style>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-3@hover\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -165,6 +165,61 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
165
165
|
expect(await isOnTopLayer(this.content)).to.be.false;
|
|
166
166
|
expect(this.content.open, "closes for `pointerdown`").to.be.false;
|
|
167
167
|
});
|
|
168
|
+
it("opens/closes for `longpress` with Button", async function() {
|
|
169
|
+
const button = document.createElement("sp-button");
|
|
170
|
+
button.slot = "trigger";
|
|
171
|
+
this.trigger.replaceWith(button);
|
|
172
|
+
await elementUpdated(button);
|
|
173
|
+
button.focus();
|
|
174
|
+
await elementUpdated(button);
|
|
175
|
+
let open = oneEvent(this.el, "sp-opened");
|
|
176
|
+
const rect = button.getBoundingClientRect();
|
|
177
|
+
await sendMouse({
|
|
178
|
+
steps: [
|
|
179
|
+
{
|
|
180
|
+
type: "move",
|
|
181
|
+
position: [
|
|
182
|
+
rect.left + rect.width / 2,
|
|
183
|
+
rect.top + rect.height / 2
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
type: "down"
|
|
188
|
+
}
|
|
189
|
+
]
|
|
190
|
+
});
|
|
191
|
+
await open;
|
|
192
|
+
await nextFrame();
|
|
193
|
+
await nextFrame();
|
|
194
|
+
open = oneEvent(this.el, "sp-opened");
|
|
195
|
+
await open;
|
|
196
|
+
expect(this.content.open, "opens for `pointerdown`").to.be.true;
|
|
197
|
+
await sendMouse({
|
|
198
|
+
steps: [
|
|
199
|
+
{
|
|
200
|
+
type: "up"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
type: "move",
|
|
204
|
+
position: [
|
|
205
|
+
rect.left + rect.width * 2,
|
|
206
|
+
rect.top + rect.height / 2
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
]
|
|
210
|
+
});
|
|
211
|
+
await nextFrame();
|
|
212
|
+
await nextFrame();
|
|
213
|
+
expect(this.content.open, "stays open for `pointerup`").to.be.true;
|
|
214
|
+
expect(await isOnTopLayer(this.content)).to.be.true;
|
|
215
|
+
const closed = oneEvent(button, "sp-closed");
|
|
216
|
+
await sendKeys({
|
|
217
|
+
press: "Escape"
|
|
218
|
+
});
|
|
219
|
+
await closed;
|
|
220
|
+
expect(await isOnTopLayer(this.content)).to.be.false;
|
|
221
|
+
expect(this.content.open, "closes for `pointerdown`").to.be.false;
|
|
222
|
+
});
|
|
168
223
|
});
|
|
169
224
|
it("displays `longpress` declaratively", async () => {
|
|
170
225
|
const openedSpy = spy();
|