@spectrum-web-components/overlay 1.9.1 → 1.10.0
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/package.json +7 -7
- package/src/OverlayTrigger.d.ts +1 -1
- package/src/OverlayTrigger.dev.js.map +1 -1
- package/src/OverlayTrigger.js.map +1 -1
- package/src/overlay-trigger.css.dev.js.map +2 -2
- package/src/overlay-trigger.css.js.map +2 -2
- package/src/overlay.css.dev.js.map +2 -2
- package/src/overlay.css.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
-
"directory": "packages/overlay"
|
|
12
|
+
"directory": "1st-gen/packages/overlay"
|
|
13
13
|
},
|
|
14
14
|
"author": "Adobe",
|
|
15
15
|
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/overlay",
|
|
@@ -166,11 +166,11 @@
|
|
|
166
166
|
"dependencies": {
|
|
167
167
|
"@floating-ui/dom": "1.7.4",
|
|
168
168
|
"@floating-ui/utils": "0.2.10",
|
|
169
|
-
"@spectrum-web-components/action-button": "1.
|
|
170
|
-
"@spectrum-web-components/base": "1.
|
|
171
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
172
|
-
"@spectrum-web-components/shared": "1.
|
|
173
|
-
"@spectrum-web-components/theme": "1.
|
|
169
|
+
"@spectrum-web-components/action-button": "1.10.0",
|
|
170
|
+
"@spectrum-web-components/base": "1.10.0",
|
|
171
|
+
"@spectrum-web-components/reactive-controllers": "1.10.0",
|
|
172
|
+
"@spectrum-web-components/shared": "1.10.0",
|
|
173
|
+
"@spectrum-web-components/theme": "1.10.0",
|
|
174
174
|
"focus-trap": "7.6.5"
|
|
175
175
|
},
|
|
176
176
|
"types": "./src/index.d.ts",
|
package/src/OverlayTrigger.d.ts
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
13
13
|
import type { Placement } from '@floating-ui/dom';
|
|
14
14
|
import type { Overlay } from './Overlay.js';
|
|
15
|
-
import type { OverlayTypes } from './overlay-types';
|
|
15
|
+
import type { OverlayTypes } from './overlay-types.js';
|
|
16
16
|
import '@spectrum-web-components/overlay/sp-overlay.js';
|
|
17
17
|
export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
|
|
18
18
|
type Combinations<T extends string, U extends string = T> = T extends string ? T | `${T} ${Combinations<Exclude<U, T>>}` : never;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayTrigger.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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 { OverlayTypes } from './overlay-types';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n// Helper type to create all unique combinations of OverlayContentTypes\ntype Combinations<T extends string, U extends string = T> = T extends string\n ? T | `${T} ${Combinations<Exclude<U, T>>}`\n : never;\n\nexport type TriggeredByType = Combinations<OverlayContentTypes>;\n\n/**\n * @element overlay-trigger\n *\n * A component that manages overlay content triggered by different interactions.\n * Supports click, hover, and longpress triggered overlays with configurable\n * placement and behavior.\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 longpress\n * @slot longpress-describedby-descriptor - Description for longpress content\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n *\n * @attr {string} placement - The placement of the overlay relative to the trigger\n * @attr {number} offset - The distance between the overlay and the trigger\n * @attr {boolean} disabled - Whether the overlay trigger is disabled\n * @attr {string} receives-focus - How focus should be handled ('true'|'false'|'auto')\n * @attr {string} triggered-by - The type of interaction that will trigger the overlay ('click'|'hover'|'longpress')\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * Optional property to optimize performance and prevent race conditions.\n *\n * By explicitly declaring which content types are used (e.g. \"click\", \"longpress hover\"),\n * we can avoid:\n * 1. Extra renders from unnecessary slot reparenting\n * 2. Potential infinite render loops during content detection\n * 3. Race conditions during slot assignment\n *\n * By only returning overlay wrappers for explicitly declared content types,\n * we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior.\n */\n @property({ attribute: 'triggered-by' })\n public triggeredBy?: TriggeredByType;\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?: OverlayTypes;\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 @property({ attribute: 'receives-focus' })\n public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\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 const slot = this.renderSlot('click-content');\n const clickOverlay = 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 || 'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('click')) {\n return clickOverlay;\n }\n\n if (!this.clickContent.length) {\n return slot;\n } else {\n return clickOverlay;\n }\n }\n\n protected renderHoverOverlay(): TemplateResult {\n const slot = this.renderSlot('hover-content');\n const hoverOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If hover interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('hover')) {\n return hoverOverlay;\n }\n\n if (!this.hoverContent.length) {\n return slot;\n } else {\n return hoverOverlay;\n }\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n const slot = this.renderSlot('longpress-content');\n const longpressOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('longpress')) {\n return longpressOverlay;\n }\n\n if (!this.longpressContent.length) {\n return slot;\n } else {\n return longpressOverlay;\n }\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n this.renderClickOverlay(),\n this.renderHoverOverlay(),\n this.renderLongpressOverlay(),\n ]}\n `;\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (window.__swc?.DEBUG && !this.triggeredBy) {\n const issues = [\n 'You have not specified the `triggeredBy` property. For optimal performance, consider explicitly declaring which overlay types you plan to use.',\n 'Example: triggered-by=\"click hover\"',\n 'This helps avoid unnecessary DOM operations and potential race conditions.',\n ];\n\n window.__swc.warn(\n this,\n 'Performance optimization available for <overlay-trigger>:',\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#performance-optimization',\n { issues }\n );\n }\n\n if (this.disabled && changedProperties.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": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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 { OverlayTypes } from './overlay-types.dev.js'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n// Helper type to create all unique combinations of OverlayContentTypes\ntype Combinations<T extends string, U extends string = T> = T extends string\n ? T | `${T} ${Combinations<Exclude<U, T>>}`\n : never;\n\nexport type TriggeredByType = Combinations<OverlayContentTypes>;\n\n/**\n * @element overlay-trigger\n *\n * A component that manages overlay content triggered by different interactions.\n * Supports click, hover, and longpress triggered overlays with configurable\n * placement and behavior.\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 longpress\n * @slot longpress-describedby-descriptor - Description for longpress content\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n *\n * @attr {string} placement - The placement of the overlay relative to the trigger\n * @attr {number} offset - The distance between the overlay and the trigger\n * @attr {boolean} disabled - Whether the overlay trigger is disabled\n * @attr {string} receives-focus - How focus should be handled ('true'|'false'|'auto')\n * @attr {string} triggered-by - The type of interaction that will trigger the overlay ('click'|'hover'|'longpress')\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * Optional property to optimize performance and prevent race conditions.\n *\n * By explicitly declaring which content types are used (e.g. \"click\", \"longpress hover\"),\n * we can avoid:\n * 1. Extra renders from unnecessary slot reparenting\n * 2. Potential infinite render loops during content detection\n * 3. Race conditions during slot assignment\n *\n * By only returning overlay wrappers for explicitly declared content types,\n * we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior.\n */\n @property({ attribute: 'triggered-by' })\n public triggeredBy?: TriggeredByType;\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?: OverlayTypes;\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 @property({ attribute: 'receives-focus' })\n public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\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 const slot = this.renderSlot('click-content');\n const clickOverlay = 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 || 'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('click')) {\n return clickOverlay;\n }\n\n if (!this.clickContent.length) {\n return slot;\n } else {\n return clickOverlay;\n }\n }\n\n protected renderHoverOverlay(): TemplateResult {\n const slot = this.renderSlot('hover-content');\n const hoverOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If hover interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('hover')) {\n return hoverOverlay;\n }\n\n if (!this.hoverContent.length) {\n return slot;\n } else {\n return hoverOverlay;\n }\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n const slot = this.renderSlot('longpress-content');\n const longpressOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('longpress')) {\n return longpressOverlay;\n }\n\n if (!this.longpressContent.length) {\n return slot;\n } else {\n return longpressOverlay;\n }\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n this.renderClickOverlay(),\n this.renderHoverOverlay(),\n this.renderLongpressOverlay(),\n ]}\n `;\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (window.__swc?.DEBUG && !this.triggeredBy) {\n const issues = [\n 'You have not specified the `triggeredBy` property. For optimal performance, consider explicitly declaring which overlay types you plan to use.',\n 'Example: triggered-by=\"click hover\"',\n 'This helps avoid unnecessary DOM operations and potential race conditions.',\n ];\n\n window.__swc.warn(\n this,\n 'Performance optimization available for <overlay-trigger>:',\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#performance-optimization',\n { issues }\n );\n }\n\n if (this.disabled && changedProperties.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": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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 { OverlayTypes } from './overlay-types';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n// Helper type to create all unique combinations of OverlayContentTypes\ntype Combinations<T extends string, U extends string = T> = T extends string\n ? T | `${T} ${Combinations<Exclude<U, T>>}`\n : never;\n\nexport type TriggeredByType = Combinations<OverlayContentTypes>;\n\n/**\n * @element overlay-trigger\n *\n * A component that manages overlay content triggered by different interactions.\n * Supports click, hover, and longpress triggered overlays with configurable\n * placement and behavior.\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 longpress\n * @slot longpress-describedby-descriptor - Description for longpress content\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n *\n * @attr {string} placement - The placement of the overlay relative to the trigger\n * @attr {number} offset - The distance between the overlay and the trigger\n * @attr {boolean} disabled - Whether the overlay trigger is disabled\n * @attr {string} receives-focus - How focus should be handled ('true'|'false'|'auto')\n * @attr {string} triggered-by - The type of interaction that will trigger the overlay ('click'|'hover'|'longpress')\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * Optional property to optimize performance and prevent race conditions.\n *\n * By explicitly declaring which content types are used (e.g. \"click\", \"longpress hover\"),\n * we can avoid:\n * 1. Extra renders from unnecessary slot reparenting\n * 2. Potential infinite render loops during content detection\n * 3. Race conditions during slot assignment\n *\n * By only returning overlay wrappers for explicitly declared content types,\n * we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior.\n */\n @property({ attribute: 'triggered-by' })\n public triggeredBy?: TriggeredByType;\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?: OverlayTypes;\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 @property({ attribute: 'receives-focus' })\n public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\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 const slot = this.renderSlot('click-content');\n const clickOverlay = 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 || 'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('click')) {\n return clickOverlay;\n }\n\n if (!this.clickContent.length) {\n return slot;\n } else {\n return clickOverlay;\n }\n }\n\n protected renderHoverOverlay(): TemplateResult {\n const slot = this.renderSlot('hover-content');\n const hoverOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If hover interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('hover')) {\n return hoverOverlay;\n }\n\n if (!this.hoverContent.length) {\n return slot;\n } else {\n return hoverOverlay;\n }\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n const slot = this.renderSlot('longpress-content');\n const longpressOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('longpress')) {\n return longpressOverlay;\n }\n\n if (!this.longpressContent.length) {\n return slot;\n } else {\n return longpressOverlay;\n }\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n this.renderClickOverlay(),\n this.renderHoverOverlay(),\n this.renderLongpressOverlay(),\n ]}\n `;\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (window.__swc?.DEBUG && !this.triggeredBy) {\n const issues = [\n 'You have not specified the `triggeredBy` property. For optimal performance, consider explicitly declaring which overlay types you plan to use.',\n 'Example: triggered-by=\"click hover\"',\n 'This helps avoid unnecessary DOM operations and potential race conditions.',\n ];\n\n window.__swc.warn(\n this,\n 'Performance optimization available for <overlay-trigger>:',\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#performance-optimization',\n { issues }\n );\n }\n\n if (this.disabled && changedProperties.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": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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 { OverlayTypes } from './overlay-types.js';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n// Helper type to create all unique combinations of OverlayContentTypes\ntype Combinations<T extends string, U extends string = T> = T extends string\n ? T | `${T} ${Combinations<Exclude<U, T>>}`\n : never;\n\nexport type TriggeredByType = Combinations<OverlayContentTypes>;\n\n/**\n * @element overlay-trigger\n *\n * A component that manages overlay content triggered by different interactions.\n * Supports click, hover, and longpress triggered overlays with configurable\n * placement and behavior.\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 longpress\n * @slot longpress-describedby-descriptor - Description for longpress content\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n *\n * @attr {string} placement - The placement of the overlay relative to the trigger\n * @attr {number} offset - The distance between the overlay and the trigger\n * @attr {boolean} disabled - Whether the overlay trigger is disabled\n * @attr {string} receives-focus - How focus should be handled ('true'|'false'|'auto')\n * @attr {string} triggered-by - The type of interaction that will trigger the overlay ('click'|'hover'|'longpress')\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * Optional property to optimize performance and prevent race conditions.\n *\n * By explicitly declaring which content types are used (e.g. \"click\", \"longpress hover\"),\n * we can avoid:\n * 1. Extra renders from unnecessary slot reparenting\n * 2. Potential infinite render loops during content detection\n * 3. Race conditions during slot assignment\n *\n * By only returning overlay wrappers for explicitly declared content types,\n * we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior.\n */\n @property({ attribute: 'triggered-by' })\n public triggeredBy?: TriggeredByType;\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?: OverlayTypes;\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 @property({ attribute: 'receives-focus' })\n public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\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 const slot = this.renderSlot('click-content');\n const clickOverlay = 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 || 'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('click')) {\n return clickOverlay;\n }\n\n if (!this.clickContent.length) {\n return slot;\n } else {\n return clickOverlay;\n }\n }\n\n protected renderHoverOverlay(): TemplateResult {\n const slot = this.renderSlot('hover-content');\n const hoverOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n\n // If hover interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('hover')) {\n return hoverOverlay;\n }\n\n if (!this.hoverContent.length) {\n return slot;\n } else {\n return hoverOverlay;\n }\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n const slot = this.renderSlot('longpress-content');\n const longpressOverlay = 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 .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n\n // If click interactions are explicitly enabled by customers, always return the overlay\n if (this.triggeredBy?.includes('longpress')) {\n return longpressOverlay;\n }\n\n if (!this.longpressContent.length) {\n return slot;\n } else {\n return longpressOverlay;\n }\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n this.renderClickOverlay(),\n this.renderHoverOverlay(),\n this.renderLongpressOverlay(),\n ]}\n `;\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (window.__swc?.DEBUG && !this.triggeredBy) {\n const issues = [\n 'You have not specified the `triggeredBy` property. For optimal performance, consider explicitly declaring which overlay types you plan to use.',\n 'Example: triggered-by=\"click hover\"',\n 'This helps avoid unnecessary DOM operations and potential race conditions.',\n ];\n\n window.__swc.warn(\n this,\n 'Performance optimization available for <overlay-trigger>:',\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#performance-optimization',\n { issues }\n );\n }\n\n if (this.disabled && changedProperties.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", "clickOverlay", "hoverOverlay", "longpressOverlay", "changedProperties", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAAA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;--sp-overlay-open:true;background:0 0;border:0;max-width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open{display:flex}}@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
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;--sp-overlay-open:true;background:0 0;border:0;max-width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open{display:flex}}@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
|
+
"mappings": "aAAA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|