@spectrum-web-components/overlay 0.35.0 → 0.35.1-rc.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +237 -150
- package/package.json +49 -22
- package/sp-overlay.d.ts +6 -0
- package/sp-overlay.dev.js +5 -0
- package/{active-overlay.dev.js.map → sp-overlay.dev.js.map} +3 -3
- package/sp-overlay.js +2 -0
- package/{active-overlay.js.map → sp-overlay.js.map} +4 -4
- package/src/AbstractOverlay.d.ts +56 -0
- package/src/AbstractOverlay.dev.js +198 -0
- package/src/AbstractOverlay.dev.js.map +7 -0
- package/src/AbstractOverlay.js +2 -0
- package/src/AbstractOverlay.js.map +7 -0
- package/src/Overlay.d.ts +147 -0
- package/src/Overlay.dev.js +770 -0
- package/src/Overlay.dev.js.map +7 -0
- package/src/Overlay.js +31 -0
- package/src/Overlay.js.map +7 -0
- package/src/OverlayDialog.d.ts +4 -0
- package/src/OverlayDialog.dev.js +135 -0
- package/src/OverlayDialog.dev.js.map +7 -0
- package/src/OverlayDialog.js +2 -0
- package/src/OverlayDialog.js.map +7 -0
- package/src/OverlayNoPopover.d.ts +4 -0
- package/src/OverlayNoPopover.dev.js +110 -0
- package/src/OverlayNoPopover.dev.js.map +7 -0
- package/src/OverlayNoPopover.js +2 -0
- package/src/OverlayNoPopover.js.map +7 -0
- package/src/OverlayPopover.d.ts +4 -0
- package/src/OverlayPopover.dev.js +169 -0
- package/src/OverlayPopover.dev.js.map +7 -0
- package/src/OverlayPopover.js +2 -0
- package/src/OverlayPopover.js.map +7 -0
- package/src/OverlayStack.d.ts +43 -0
- package/src/OverlayStack.dev.js +150 -0
- package/src/OverlayStack.dev.js.map +7 -0
- package/src/OverlayStack.js +2 -0
- package/src/OverlayStack.js.map +7 -0
- package/src/OverlayTrigger.d.ts +25 -41
- package/src/OverlayTrigger.dev.js +132 -289
- package/src/OverlayTrigger.dev.js.map +3 -3
- package/src/OverlayTrigger.js +52 -22
- package/src/OverlayTrigger.js.map +3 -3
- package/src/PlacementController.d.ts +38 -0
- package/src/PlacementController.dev.js +199 -0
- package/src/PlacementController.dev.js.map +7 -0
- package/src/PlacementController.js +2 -0
- package/src/PlacementController.js.map +7 -0
- package/src/VirtualTrigger.dev.js +2 -1
- package/src/VirtualTrigger.dev.js.map +2 -2
- package/src/VirtualTrigger.js +1 -1
- package/src/VirtualTrigger.js.map +2 -2
- package/src/fullSizePlugin.d.ts +12 -0
- package/src/fullSizePlugin.dev.js +39 -0
- package/src/fullSizePlugin.dev.js.map +7 -0
- package/src/fullSizePlugin.js +2 -0
- package/src/fullSizePlugin.js.map +7 -0
- package/src/index.d.ts +2 -3
- package/src/index.dev.js +2 -3
- package/src/index.dev.js.map +2 -2
- package/src/index.js +1 -1
- package/src/index.js.map +2 -2
- package/src/loader.d.ts +1 -2
- package/src/loader.dev.js +2 -19
- package/src/loader.dev.js.map +2 -2
- package/src/loader.js +1 -1
- package/src/loader.js.map +3 -3
- package/src/overlay-timer.dev.js.map +2 -2
- package/src/overlay-timer.js.map +2 -2
- package/src/overlay-trigger.css.dev.js +1 -1
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js +1 -1
- package/src/overlay-trigger.css.js.map +1 -1
- package/src/overlay-types.d.ts +25 -31
- package/src/overlay-types.dev.js +1 -0
- package/src/overlay-types.dev.js.map +3 -3
- package/src/overlay-types.js +1 -1
- package/src/overlay-types.js.map +3 -3
- package/src/overlay.css.dev.js +9 -0
- package/src/overlay.css.dev.js.map +7 -0
- package/src/overlay.css.js +6 -0
- package/src/overlay.css.js.map +7 -0
- package/src/topLayerOverTransforms.d.ts +2 -0
- package/src/topLayerOverTransforms.dev.js +84 -0
- package/src/topLayerOverTransforms.dev.js.map +7 -0
- package/src/topLayerOverTransforms.js +2 -0
- package/src/topLayerOverTransforms.js.map +7 -0
- package/stories/overlay-element.stories.js +243 -0
- package/stories/overlay-element.stories.js.map +7 -0
- package/stories/overlay-story-components.js +9 -8
- package/stories/overlay-story-components.js.map +2 -2
- package/stories/overlay.stories.js +808 -680
- package/stories/overlay.stories.js.map +2 -2
- package/sync/overlay-trigger.d.ts +4 -0
- package/sync/overlay-trigger.dev.js +1 -4
- package/sync/overlay-trigger.dev.js.map +2 -2
- package/sync/overlay-trigger.js +1 -1
- package/sync/overlay-trigger.js.map +3 -3
- package/test/benchmark/basic-test.js +1 -1
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/index.js +408 -377
- package/test/index.js.map +3 -3
- package/test/overlay-element.test-vrt.js +5 -0
- package/test/overlay-element.test-vrt.js.map +7 -0
- package/test/overlay-element.test.js +681 -0
- package/test/overlay-element.test.js.map +7 -0
- package/test/overlay-lifecycle.test.js +34 -106
- package/test/overlay-lifecycle.test.js.map +2 -2
- package/test/overlay-trigger-click.test.js +11 -5
- package/test/overlay-trigger-click.test.js.map +2 -2
- package/test/overlay-trigger-extended.test.js +34 -34
- package/test/overlay-trigger-extended.test.js.map +2 -2
- package/test/overlay-trigger-hover-click.test.js +27 -24
- package/test/overlay-trigger-hover-click.test.js.map +2 -2
- package/test/overlay-trigger-hover.test.js +41 -35
- package/test/overlay-trigger-hover.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +147 -81
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-trigger-sync.test.js +1 -1
- package/test/overlay-trigger-sync.test.js.map +2 -2
- package/test/overlay-trigger.test.js +1 -1
- package/test/overlay-trigger.test.js.map +2 -2
- package/test/overlay-update.test.js +4 -4
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay-v1.test.js +648 -0
- package/test/overlay-v1.test.js.map +7 -0
- package/test/overlay.test.js +383 -268
- package/test/overlay.test.js.map +3 -3
- package/active-overlay.d.ts +0 -6
- package/active-overlay.dev.js +0 -5
- package/active-overlay.js +0 -2
- package/custom-elements.json +0 -1215
- package/src/ActiveOverlay.d.ts +0 -84
- package/src/ActiveOverlay.dev.js +0 -517
- package/src/ActiveOverlay.dev.js.map +0 -7
- package/src/ActiveOverlay.js +0 -16
- package/src/ActiveOverlay.js.map +0 -7
- package/src/active-overlay.css.dev.js +0 -13
- package/src/active-overlay.css.dev.js.map +0 -7
- package/src/active-overlay.css.js +0 -10
- package/src/active-overlay.css.js.map +0 -7
- package/src/overlay-stack.d.ts +0 -50
- package/src/overlay-stack.dev.js +0 -515
- package/src/overlay-stack.dev.js.map +0 -7
- package/src/overlay-stack.js +0 -34
- package/src/overlay-stack.js.map +0 -7
- package/src/overlay-utils.d.ts +0 -3
- package/src/overlay-utils.dev.js +0 -31
- package/src/overlay-utils.dev.js.map +0 -7
- package/src/overlay-utils.js +0 -2
- package/src/overlay-utils.js.map +0 -7
- package/src/overlay.d.ts +0 -59
- package/src/overlay.dev.js +0 -127
- package/src/overlay.dev.js.map +0 -7
- package/src/overlay.js +0 -2
- package/src/overlay.js.map +0 -7
- /package/src/{active-overlay.css.d.ts → overlay.css.d.ts} +0 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { SpectrumElement } from '@spectrum-web-components/base';
|
|
2
|
+
import type { OpenableElement, OverlayOptions, OverlayOptionsV1, OverlayState, OverlayTypes, TriggerInteractionsV1 } from './overlay-types.js';
|
|
3
|
+
import { Overlay } from './Overlay.js';
|
|
4
|
+
import type { VirtualTrigger } from './VirtualTrigger.js';
|
|
5
|
+
import { OverlayTimer } from './overlay-timer.js';
|
|
6
|
+
import { PlacementController } from './PlacementController.js';
|
|
7
|
+
export declare const overlayTimer: OverlayTimer;
|
|
8
|
+
export declare const noop: () => void;
|
|
9
|
+
export declare class BeforetoggleClosedEvent extends Event {
|
|
10
|
+
currentState: string;
|
|
11
|
+
newState: string;
|
|
12
|
+
constructor();
|
|
13
|
+
}
|
|
14
|
+
export declare class BeforetoggleOpenEvent extends Event {
|
|
15
|
+
currentState: string;
|
|
16
|
+
newState: string;
|
|
17
|
+
constructor();
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Apply a "transitionend" listener to an element that may not transition but
|
|
21
|
+
* guarantee the callback will be fired either way.
|
|
22
|
+
*
|
|
23
|
+
* @param el {HTMLElement} - Target of the "transition" listeners.
|
|
24
|
+
* @param action {Function} - Method to trigger the "transition".
|
|
25
|
+
* @param cb {Function} - Callback to trigger when the "transition" has ended.
|
|
26
|
+
*/
|
|
27
|
+
export declare const guaranteedAllTransitionend: (el: HTMLElement, action: () => void, cb: () => void) => void;
|
|
28
|
+
export declare function nextFrame(): Promise<void>;
|
|
29
|
+
export declare class AbstractOverlay extends SpectrumElement {
|
|
30
|
+
protected applyFocus(_targetOpenState: boolean, _focusEl: HTMLElement | null): Promise<void>;
|
|
31
|
+
delayed: boolean;
|
|
32
|
+
dialogEl: HTMLDialogElement & {
|
|
33
|
+
showPopover(): void;
|
|
34
|
+
hidePopover(): void;
|
|
35
|
+
};
|
|
36
|
+
dispose: () => void;
|
|
37
|
+
protected ensureOnDOM(_targetOpenState: boolean): Promise<void>;
|
|
38
|
+
elements: OpenableElement[];
|
|
39
|
+
protected makeTransition(_targetOpenState: boolean): Promise<HTMLElement | null>;
|
|
40
|
+
protected manageDelay(_targetOpenState: boolean): Promise<void>;
|
|
41
|
+
protected manageDialogOpen(): Promise<void>;
|
|
42
|
+
protected managePopoverOpen(): Promise<void>;
|
|
43
|
+
protected managePosition(): void;
|
|
44
|
+
get open(): boolean;
|
|
45
|
+
set open(_open: boolean);
|
|
46
|
+
protected placementController: PlacementController;
|
|
47
|
+
receivesFocus: 'true' | 'false' | 'auto';
|
|
48
|
+
get state(): OverlayState;
|
|
49
|
+
set state(_state: OverlayState);
|
|
50
|
+
protected _state: OverlayState;
|
|
51
|
+
triggerElement: HTMLElement | VirtualTrigger | null;
|
|
52
|
+
type: OverlayTypes;
|
|
53
|
+
static update(): void;
|
|
54
|
+
static open(trigger: HTMLElement, interaction: TriggerInteractionsV1, content: HTMLElement, optionsV1: OverlayOptionsV1): Promise<() => void>;
|
|
55
|
+
static open(content: HTMLElement, options?: OverlayOptions): Promise<Overlay>;
|
|
56
|
+
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { SpectrumElement } from "@spectrum-web-components/base";
|
|
3
|
+
import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
|
|
4
|
+
import { Overlay } from "./Overlay.dev.js";
|
|
5
|
+
import { OverlayTimer } from "./overlay-timer.dev.js";
|
|
6
|
+
export const overlayTimer = new OverlayTimer();
|
|
7
|
+
export const noop = () => {
|
|
8
|
+
return;
|
|
9
|
+
};
|
|
10
|
+
export class BeforetoggleClosedEvent extends Event {
|
|
11
|
+
constructor() {
|
|
12
|
+
super("beforetoggle", {
|
|
13
|
+
bubbles: false,
|
|
14
|
+
composed: false
|
|
15
|
+
});
|
|
16
|
+
this.currentState = "open";
|
|
17
|
+
this.newState = "closed";
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
export class BeforetoggleOpenEvent extends Event {
|
|
21
|
+
constructor() {
|
|
22
|
+
super("beforetoggle", {
|
|
23
|
+
bubbles: false,
|
|
24
|
+
composed: false
|
|
25
|
+
});
|
|
26
|
+
this.currentState = "closed";
|
|
27
|
+
this.newState = "open";
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export const guaranteedAllTransitionend = (el, action, cb) => {
|
|
31
|
+
const runningTransitions = /* @__PURE__ */ new Map();
|
|
32
|
+
const cleanup = () => {
|
|
33
|
+
el.removeEventListener("transitionrun", handleTransitionrun);
|
|
34
|
+
el.removeEventListener("transitionend", handleTransitionend);
|
|
35
|
+
cb();
|
|
36
|
+
};
|
|
37
|
+
let guarantee2;
|
|
38
|
+
let guarantee3;
|
|
39
|
+
const guarantee1 = requestAnimationFrame(() => {
|
|
40
|
+
guarantee2 = requestAnimationFrame(() => {
|
|
41
|
+
guarantee3 = requestAnimationFrame(() => {
|
|
42
|
+
cleanup();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
const handleTransitionend = (event) => {
|
|
47
|
+
if (event.target !== el) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
runningTransitions.set(
|
|
51
|
+
event.propertyName,
|
|
52
|
+
runningTransitions.get(event.propertyName) - 1
|
|
53
|
+
);
|
|
54
|
+
if (!runningTransitions.get(event.propertyName)) {
|
|
55
|
+
runningTransitions.delete(event.propertyName);
|
|
56
|
+
}
|
|
57
|
+
if (runningTransitions.size === 0) {
|
|
58
|
+
cleanup();
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const handleTransitionrun = (event) => {
|
|
62
|
+
if (event.target !== el) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (!runningTransitions.has(event.propertyName)) {
|
|
66
|
+
runningTransitions.set(event.propertyName, 0);
|
|
67
|
+
}
|
|
68
|
+
runningTransitions.set(
|
|
69
|
+
event.propertyName,
|
|
70
|
+
runningTransitions.get(event.propertyName) + 1
|
|
71
|
+
);
|
|
72
|
+
cancelAnimationFrame(guarantee1);
|
|
73
|
+
cancelAnimationFrame(guarantee2);
|
|
74
|
+
cancelAnimationFrame(guarantee3);
|
|
75
|
+
};
|
|
76
|
+
el.addEventListener("transitionrun", handleTransitionrun);
|
|
77
|
+
el.addEventListener("transitionend", handleTransitionend);
|
|
78
|
+
action();
|
|
79
|
+
};
|
|
80
|
+
export function nextFrame() {
|
|
81
|
+
return new Promise((res) => requestAnimationFrame(() => res()));
|
|
82
|
+
}
|
|
83
|
+
export class AbstractOverlay extends SpectrumElement {
|
|
84
|
+
constructor() {
|
|
85
|
+
super(...arguments);
|
|
86
|
+
this.dispose = noop;
|
|
87
|
+
}
|
|
88
|
+
async applyFocus(_targetOpenState, _focusEl) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
async ensureOnDOM(_targetOpenState) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
async makeTransition(_targetOpenState) {
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
async manageDelay(_targetOpenState) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
async manageDialogOpen() {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
async managePopoverOpen() {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
managePosition() {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
get open() {
|
|
110
|
+
return false;
|
|
111
|
+
}
|
|
112
|
+
set open(_open) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
get state() {
|
|
116
|
+
return "closed";
|
|
117
|
+
}
|
|
118
|
+
set state(_state) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
static update() {
|
|
122
|
+
const overlayUpdateEvent = new CustomEvent("sp-update-overlays", {
|
|
123
|
+
bubbles: true,
|
|
124
|
+
composed: true,
|
|
125
|
+
cancelable: true
|
|
126
|
+
});
|
|
127
|
+
document.dispatchEvent(overlayUpdateEvent);
|
|
128
|
+
}
|
|
129
|
+
static async open(triggerOrContent, interactionOrOptions, content, optionsV1) {
|
|
130
|
+
var _a, _b, _c, _d;
|
|
131
|
+
const v2 = arguments.length === 2;
|
|
132
|
+
const overlayContent = content || triggerOrContent;
|
|
133
|
+
const overlay = new Overlay();
|
|
134
|
+
let restored = false;
|
|
135
|
+
overlay.dispose = () => {
|
|
136
|
+
overlay.addEventListener("sp-closed", () => {
|
|
137
|
+
if (!restored) {
|
|
138
|
+
restoreContent();
|
|
139
|
+
restored = true;
|
|
140
|
+
}
|
|
141
|
+
requestAnimationFrame(() => {
|
|
142
|
+
overlay.remove();
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
overlay.open = false;
|
|
146
|
+
overlay.dispose = noop;
|
|
147
|
+
};
|
|
148
|
+
const restoreContent = reparentChildren([overlayContent], overlay, {
|
|
149
|
+
position: "beforeend",
|
|
150
|
+
prepareCallback: (el) => {
|
|
151
|
+
const slot = el.slot;
|
|
152
|
+
el.removeAttribute("slot");
|
|
153
|
+
return () => {
|
|
154
|
+
el.slot = slot;
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
const v1 = !v2 && overlayContent && optionsV1;
|
|
159
|
+
if (v1) {
|
|
160
|
+
if (true) {
|
|
161
|
+
window.__swc.warn(
|
|
162
|
+
overlay,
|
|
163
|
+
`You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,
|
|
164
|
+
"https://opensource.adobe.com/spectrum-web-components/components/overlay/",
|
|
165
|
+
{ level: "deprecation" }
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
const trigger = triggerOrContent;
|
|
169
|
+
const interaction = interactionOrOptions;
|
|
170
|
+
const options2 = optionsV1;
|
|
171
|
+
overlay.delayed = options2.delayed || overlayContent.hasAttribute("delayed");
|
|
172
|
+
overlay.receivesFocus = (_a = options2.receivesFocus) != null ? _a : "auto";
|
|
173
|
+
overlay.triggerElement = options2.virtualTrigger || trigger;
|
|
174
|
+
overlay.type = interaction === "modal" ? "modal" : interaction === "hover" ? "hint" : "auto";
|
|
175
|
+
overlay.offset = (_b = options2.offset) != null ? _b : 6;
|
|
176
|
+
overlay.placement = options2.placement;
|
|
177
|
+
overlay.willPreventClose = !!options2.notImmediatelyClosable;
|
|
178
|
+
trigger.insertAdjacentElement("afterend", overlay);
|
|
179
|
+
await overlay.updateComplete;
|
|
180
|
+
overlay.open = true;
|
|
181
|
+
return overlay.dispose;
|
|
182
|
+
}
|
|
183
|
+
const options = interactionOrOptions;
|
|
184
|
+
overlay.append(overlayContent);
|
|
185
|
+
overlay.delayed = options.delayed || overlayContent.hasAttribute("delayed");
|
|
186
|
+
overlay.receivesFocus = (_c = options.receivesFocus) != null ? _c : "auto";
|
|
187
|
+
overlay.triggerElement = options.trigger || null;
|
|
188
|
+
overlay.type = options.type || "modal";
|
|
189
|
+
overlay.offset = (_d = options.offset) != null ? _d : 6;
|
|
190
|
+
overlay.placement = options.placement;
|
|
191
|
+
overlay.willPreventClose = !!options.notImmediatelyClosable;
|
|
192
|
+
overlay.updateComplete.then(() => {
|
|
193
|
+
overlay.open = true;
|
|
194
|
+
});
|
|
195
|
+
return overlay;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
//# sourceMappingURL=AbstractOverlay.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["AbstractOverlay.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n TriggerInteractionsV1,\n} from './overlay-types.dev.js'\nimport { Overlay } from './Overlay.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport { PlacementController } from './PlacementController.dev.js'\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n el.removeEventListener('transitionrun', handleTransitionrun);\n el.removeEventListener('transitionend', handleTransitionend);\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun);\n el.addEventListener('transitionend', handleTransitionend);\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n delayed!: boolean;\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n dispose = noop;\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n protected managePosition(): void {\n return;\n }\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n protected placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n const overlay = new Overlay();\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n overlay.delayed =\n options.delayed || overlayContent.hasAttribute('delayed');\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.virtualTrigger || trigger;\n overlay.type =\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto';\n overlay.offset = options.offset ?? 6;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n overlay.delayed =\n options.delayed || overlayContent.hasAttribute('delayed');\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 6;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["options"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";import{SpectrumElement as E}from"@spectrum-web-components/base";import{reparentChildren as O}from"@spectrum-web-components/shared/src/reparent-children.js";import{Overlay as T}from"./Overlay.js";import{OverlayTimer as w}from"./overlay-timer.js";export const overlayTimer=new w,noop=()=>{};export class BeforetoggleClosedEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="open";this.newState="closed"}}export class BeforetoggleOpenEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="closed";this.newState="open"}}export const guaranteedAllTransitionend=(n,c,o)=>{const t=new Map,d=()=>{n.removeEventListener("transitionrun",m),n.removeEventListener("transitionend",e),o()};let p,u;const a=requestAnimationFrame(()=>{p=requestAnimationFrame(()=>{u=requestAnimationFrame(()=>{d()})})}),e=r=>{r.target===n&&(t.set(r.propertyName,t.get(r.propertyName)-1),t.get(r.propertyName)||t.delete(r.propertyName),t.size===0&&d())},m=r=>{r.target===n&&(t.has(r.propertyName)||t.set(r.propertyName,0),t.set(r.propertyName,t.get(r.propertyName)+1),cancelAnimationFrame(a),cancelAnimationFrame(p),cancelAnimationFrame(u))};n.addEventListener("transitionrun",m),n.addEventListener("transitionend",e),c()};export function nextFrame(){return new Promise(n=>requestAnimationFrame(()=>n()))}export class AbstractOverlay extends E{constructor(){super(...arguments);this.dispose=noop}async applyFocus(o,t){}async ensureOnDOM(o){}async makeTransition(o){return null}async manageDelay(o){}async manageDialogOpen(){}async managePopoverOpen(){}managePosition(){}get open(){return!1}set open(o){}get state(){return"closed"}set state(o){}static update(){const o=new CustomEvent("sp-update-overlays",{bubbles:!0,composed:!0,cancelable:!0});document.dispatchEvent(o)}static async open(o,t,d,p){var y,g,b,f;const u=arguments.length===2,a=d||o,e=new T;let m=!1;e.dispose=()=>{e.addEventListener("sp-closed",()=>{m||(r(),m=!0),requestAnimationFrame(()=>{e.remove()})}),e.open=!1,e.dispose=noop};const r=O([a],e,{position:"beforeend",prepareCallback:i=>{const v=i.slot;return i.removeAttribute("slot"),()=>{i.slot=v}}});if(!u&&a&&p){const i=o,v=t,l=p;return e.delayed=l.delayed||a.hasAttribute("delayed"),e.receivesFocus=(y=l.receivesFocus)!=null?y:"auto",e.triggerElement=l.virtualTrigger||i,e.type=v==="modal"?"modal":v==="hover"?"hint":"auto",e.offset=(g=l.offset)!=null?g:6,e.placement=l.placement,e.willPreventClose=!!l.notImmediatelyClosable,i.insertAdjacentElement("afterend",e),await e.updateComplete,e.open=!0,e.dispose}const s=t;return e.append(a),e.delayed=s.delayed||a.hasAttribute("delayed"),e.receivesFocus=(b=s.receivesFocus)!=null?b:"auto",e.triggerElement=s.trigger||null,e.type=s.type||"modal",e.offset=(f=s.offset)!=null?f:6,e.placement=s.placement,e.willPreventClose=!!s.notImmediatelyClosable,e.updateComplete.then(()=>{e.open=!0}),e}}
|
|
2
|
+
//# sourceMappingURL=AbstractOverlay.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["AbstractOverlay.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n TriggerInteractionsV1,\n} from './overlay-types.js';\nimport { Overlay } from './Overlay.js';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayTimer } from './overlay-timer.js';\nimport { PlacementController } from './PlacementController.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n el.removeEventListener('transitionrun', handleTransitionrun);\n el.removeEventListener('transitionend', handleTransitionend);\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun);\n el.addEventListener('transitionend', handleTransitionend);\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n delayed!: boolean;\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n dispose = noop;\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n protected managePosition(): void {\n return;\n }\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n protected placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n const overlay = new Overlay();\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n overlay.delayed =\n options.delayed || overlayContent.hasAttribute('delayed');\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.virtualTrigger || trigger;\n overlay.type =\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto';\n overlay.offset = options.offset ?? 6;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n overlay.delayed =\n options.delayed || overlayContent.hasAttribute('delayed');\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 6;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["SpectrumElement", "reparentChildren", "Overlay", "OverlayTimer", "el", "action", "cb", "runningTransitions", "cleanup", "handleTransitionrun", "handleTransitionend", "guarantee2", "guarantee3", "guarantee1", "event", "res", "_targetOpenState", "_focusEl", "_open", "_state", "overlayUpdateEvent", "triggerOrContent", "interactionOrOptions", "content", "optionsV1", "_a", "_b", "_c", "_d", "v2", "overlayContent", "overlay", "restored", "restoreContent", "slot", "trigger", "interaction", "options"]
|
|
7
|
+
}
|
package/src/Overlay.d.ts
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { AbstractOverlay } from './AbstractOverlay.js';
|
|
3
|
+
import { OpenableElement, OverlayState, OverlayTypes, Placement } from './overlay-types.js';
|
|
4
|
+
import { VirtualTrigger } from './VirtualTrigger.js';
|
|
5
|
+
import { PlacementController } from './PlacementController.js';
|
|
6
|
+
export declare const LONGPRESS_INSTRUCTIONS: {
|
|
7
|
+
touch: string;
|
|
8
|
+
keyboard: string;
|
|
9
|
+
mouse: string;
|
|
10
|
+
};
|
|
11
|
+
declare let OverlayFeatures: typeof AbstractOverlay & import("./overlay-types.js").Constructor<import("@lit/reactive-element").ReactiveElement>;
|
|
12
|
+
/**
|
|
13
|
+
* @element sp-overlay
|
|
14
|
+
*
|
|
15
|
+
* @fires sp-opened - announces that an overlay has completed any entry animations
|
|
16
|
+
* @fires sp-closed - announce that an overlay has compelted any exit animations
|
|
17
|
+
*/
|
|
18
|
+
export declare class Overlay extends OverlayFeatures {
|
|
19
|
+
static styles: import("@spectrum-web-components/base").CSSResult[];
|
|
20
|
+
abortController: AbortController;
|
|
21
|
+
/**
|
|
22
|
+
* An Overlay that is `delayed` will wait until a warm-up period of 1000ms
|
|
23
|
+
* has completed before opening. Once the warmup period has completed, all
|
|
24
|
+
* subsequent Overlays will open immediately. When no Overlays are opened,
|
|
25
|
+
* a cooldown period of 1000ms will begin. Once the cooldown has completed,
|
|
26
|
+
* the next Overlay to be opened will be subject to the warm-up period if
|
|
27
|
+
* provided that option.
|
|
28
|
+
*/
|
|
29
|
+
delayed: boolean;
|
|
30
|
+
dialogEl: HTMLDialogElement & {
|
|
31
|
+
showPopover(): void;
|
|
32
|
+
hidePopover(): void;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Whether the overlay is currently functional or not
|
|
36
|
+
*/
|
|
37
|
+
get disabled(): boolean;
|
|
38
|
+
set disabled(disabled: boolean);
|
|
39
|
+
private _disabled;
|
|
40
|
+
elements: OpenableElement[];
|
|
41
|
+
parentOverlayToForceClose?: Overlay;
|
|
42
|
+
private get hasNonVirtualTrigger();
|
|
43
|
+
protected longpressState: 'null' | 'potential' | 'opening' | 'pressed';
|
|
44
|
+
private longressTimeout;
|
|
45
|
+
/**
|
|
46
|
+
* The `offset` property accepts either a single number, to
|
|
47
|
+
* define the offset of the Overlay along the main axis from
|
|
48
|
+
* the trigger, or 2-tuple, to define the offset along the
|
|
49
|
+
* main axis and the cross axis. This option has no effect
|
|
50
|
+
* when there is no trigger element.
|
|
51
|
+
*/
|
|
52
|
+
offset: number | [number, number];
|
|
53
|
+
protected placementController: PlacementController;
|
|
54
|
+
get open(): boolean;
|
|
55
|
+
set open(open: boolean);
|
|
56
|
+
private _open;
|
|
57
|
+
static openCount: number;
|
|
58
|
+
/**
|
|
59
|
+
* Instruct the Overlay where to place itself in
|
|
60
|
+
* relationship to the trigger element.
|
|
61
|
+
*/
|
|
62
|
+
placement?: Placement;
|
|
63
|
+
receivesFocus: 'true' | 'false' | 'auto';
|
|
64
|
+
private releaseAriaDescribedby;
|
|
65
|
+
private releaseLongpressDescribedby;
|
|
66
|
+
slotEl: HTMLSlotElement;
|
|
67
|
+
get state(): OverlayState;
|
|
68
|
+
set state(state: OverlayState);
|
|
69
|
+
_state: OverlayState;
|
|
70
|
+
tipPadding?: number;
|
|
71
|
+
/**
|
|
72
|
+
* An optional ID reference for the trigger element combined with the optional
|
|
73
|
+
* interaction (click | hover | longpress) by which the overlay shold open
|
|
74
|
+
* the overlay with an `@`: e.g. `trigger@click` opens the overlay when an
|
|
75
|
+
* element with the ID "trigger" is clicked.
|
|
76
|
+
*/
|
|
77
|
+
trigger?: string;
|
|
78
|
+
/**
|
|
79
|
+
* An element reference for the trigger element that the overlay should relate to.
|
|
80
|
+
*/
|
|
81
|
+
triggerElement: HTMLElement | VirtualTrigger | null;
|
|
82
|
+
/**
|
|
83
|
+
* The specific interaction to listen for on the `triggerElement` to open the overlay.
|
|
84
|
+
*/
|
|
85
|
+
triggerInteraction?: 'click' | 'longpress' | 'hover';
|
|
86
|
+
type: OverlayTypes;
|
|
87
|
+
protected wasOpen: boolean;
|
|
88
|
+
private elementResolver;
|
|
89
|
+
private get usesDialog();
|
|
90
|
+
private get popoverValue();
|
|
91
|
+
protected get requiresPosition(): boolean;
|
|
92
|
+
protected managePosition(): void;
|
|
93
|
+
protected managePopoverOpen(): Promise<void>;
|
|
94
|
+
protected applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void>;
|
|
95
|
+
protected manageOpen(oldOpen: boolean): Promise<void>;
|
|
96
|
+
protected unbindEvents(): void;
|
|
97
|
+
protected bindEvents(): void;
|
|
98
|
+
protected bindClickEvents(triggerElement: HTMLElement): void;
|
|
99
|
+
protected bindLongpressEvents(triggerElement: HTMLElement): void;
|
|
100
|
+
protected bindHoverEvents(triggerElement: HTMLElement): void;
|
|
101
|
+
protected manageTriggerElement(triggerElement: HTMLElement | null): void;
|
|
102
|
+
private elementIds;
|
|
103
|
+
private prepareLongpressDescription;
|
|
104
|
+
private prepareAriaDescribedby;
|
|
105
|
+
private handlePointerdown;
|
|
106
|
+
private handlePointerup;
|
|
107
|
+
/**
|
|
108
|
+
* @private
|
|
109
|
+
*/
|
|
110
|
+
protected handleKeydown: (event: KeyboardEvent) => void;
|
|
111
|
+
protected handleKeyup: (event: KeyboardEvent) => void;
|
|
112
|
+
/**
|
|
113
|
+
* An overlay with a `click` interaction should not close on click `triggerElement`.
|
|
114
|
+
* When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
|
|
115
|
+
* overlay is `open` to prevent from toggling the overlay when the click event
|
|
116
|
+
* propagates later in the interaction.
|
|
117
|
+
*/
|
|
118
|
+
private preventNextToggle;
|
|
119
|
+
protected handlePointerdownForClick: () => void;
|
|
120
|
+
protected handleClick: () => void;
|
|
121
|
+
private focusedin;
|
|
122
|
+
protected handleFocusin: () => void;
|
|
123
|
+
protected handleFocusout: () => void;
|
|
124
|
+
private pointerentered;
|
|
125
|
+
protected handlePointerenter: () => void;
|
|
126
|
+
protected handlePointerleave: (event: PointerEvent) => void;
|
|
127
|
+
protected handleOverlayPointerleave: (event: PointerEvent) => void;
|
|
128
|
+
protected doPointerleave(): void;
|
|
129
|
+
protected handleLongpress: () => void;
|
|
130
|
+
protected handleBeforetoggle(event: Event & {
|
|
131
|
+
newState: string;
|
|
132
|
+
}): void;
|
|
133
|
+
protected handleBrowserClose(): void;
|
|
134
|
+
protected handleSlotchange(): void;
|
|
135
|
+
willPreventClose: boolean;
|
|
136
|
+
shouldPreventClose(): boolean;
|
|
137
|
+
willUpdate(changes: PropertyValues): void;
|
|
138
|
+
protected updated(changes: PropertyValues): void;
|
|
139
|
+
protected renderContent(): TemplateResult;
|
|
140
|
+
private get dialogStyleMap();
|
|
141
|
+
protected renderDialog(): TemplateResult;
|
|
142
|
+
protected renderPopover(): TemplateResult;
|
|
143
|
+
render(): TemplateResult;
|
|
144
|
+
connectedCallback(): void;
|
|
145
|
+
disconnectedCallback(): void;
|
|
146
|
+
}
|
|
147
|
+
export {};
|