@spectrum-web-components/overlay 1.1.0-beta.9 → 1.1.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/overlay-trigger.d.ts +0 -6
- package/overlay-trigger.dev.js +0 -5
- package/overlay-trigger.dev.js.map +0 -7
- package/overlay-trigger.js +0 -2
- package/overlay-trigger.js.map +0 -7
- package/sp-overlay.d.ts +0 -6
- package/sp-overlay.dev.js +0 -5
- package/sp-overlay.dev.js.map +0 -7
- package/sp-overlay.js +0 -2
- package/sp-overlay.js.map +0 -7
- package/src/AbstractOverlay.d.ts +0 -72
- package/src/AbstractOverlay.dev.js +0 -234
- package/src/AbstractOverlay.dev.js.map +0 -7
- package/src/AbstractOverlay.js +0 -2
- package/src/AbstractOverlay.js.map +0 -7
- package/src/ClickController.d.ts +0 -14
- package/src/ClickController.dev.js +0 -42
- package/src/ClickController.dev.js.map +0 -7
- package/src/ClickController.js +0 -2
- package/src/ClickController.js.map +0 -7
- package/src/HoverController.d.ts +0 -20
- package/src/HoverController.dev.js +0 -153
- package/src/HoverController.dev.js.map +0 -7
- package/src/HoverController.js +0 -2
- package/src/HoverController.js.map +0 -7
- package/src/InteractionController.d.ts +0 -38
- package/src/InteractionController.dev.js +0 -90
- package/src/InteractionController.dev.js.map +0 -7
- package/src/InteractionController.js +0 -2
- package/src/InteractionController.js.map +0 -7
- package/src/LongpressController.d.ts +0 -21
- package/src/LongpressController.dev.js +0 -156
- package/src/LongpressController.dev.js.map +0 -7
- package/src/LongpressController.js +0 -2
- package/src/LongpressController.js.map +0 -7
- package/src/Overlay.d.ts +0 -134
- package/src/Overlay.dev.js +0 -534
- package/src/Overlay.dev.js.map +0 -7
- package/src/Overlay.js +0 -33
- package/src/Overlay.js.map +0 -7
- package/src/OverlayDialog.d.ts +0 -4
- package/src/OverlayDialog.dev.js +0 -139
- package/src/OverlayDialog.dev.js.map +0 -7
- package/src/OverlayDialog.js +0 -2
- package/src/OverlayDialog.js.map +0 -7
- package/src/OverlayNoPopover.d.ts +0 -4
- package/src/OverlayNoPopover.dev.js +0 -117
- package/src/OverlayNoPopover.dev.js.map +0 -7
- package/src/OverlayNoPopover.js +0 -2
- package/src/OverlayNoPopover.js.map +0 -7
- package/src/OverlayPopover.d.ts +0 -4
- package/src/OverlayPopover.dev.js +0 -199
- package/src/OverlayPopover.dev.js.map +0 -7
- package/src/OverlayPopover.js +0 -2
- package/src/OverlayPopover.js.map +0 -7
- package/src/OverlayStack.d.ts +0 -44
- package/src/OverlayStack.dev.js +0 -160
- package/src/OverlayStack.dev.js.map +0 -7
- package/src/OverlayStack.js +0 -2
- package/src/OverlayStack.js.map +0 -7
- package/src/OverlayTrigger.d.ts +0 -52
- package/src/OverlayTrigger.dev.js +0 -243
- package/src/OverlayTrigger.dev.js.map +0 -7
- package/src/OverlayTrigger.js +0 -57
- package/src/OverlayTrigger.js.map +0 -7
- package/src/PlacementController.d.ts +0 -40
- package/src/PlacementController.dev.js +0 -212
- package/src/PlacementController.dev.js.map +0 -7
- package/src/PlacementController.js +0 -2
- package/src/PlacementController.js.map +0 -7
- package/src/VirtualTrigger.d.ts +0 -7
- package/src/VirtualTrigger.dev.js +0 -32
- package/src/VirtualTrigger.dev.js.map +0 -7
- package/src/VirtualTrigger.js +0 -2
- package/src/VirtualTrigger.js.map +0 -7
- package/src/events.d.ts +0 -23
- package/src/events.dev.js +0 -39
- package/src/events.dev.js.map +0 -7
- package/src/events.js +0 -2
- package/src/events.js.map +0 -7
- package/src/fullSizePlugin.d.ts +0 -12
- package/src/fullSizePlugin.dev.js +0 -39
- package/src/fullSizePlugin.dev.js.map +0 -7
- package/src/fullSizePlugin.js +0 -2
- package/src/fullSizePlugin.js.map +0 -7
- package/src/index.d.ts +0 -6
- package/src/index.dev.js +0 -8
- package/src/index.dev.js.map +0 -7
- package/src/index.js +0 -2
- package/src/index.js.map +0 -7
- package/src/loader.d.ts +0 -4
- package/src/loader.dev.js +0 -11
- package/src/loader.dev.js.map +0 -7
- package/src/loader.js +0 -2
- package/src/loader.js.map +0 -7
- package/src/overlay-events.d.ts +0 -11
- package/src/overlay-events.dev.js +0 -8
- package/src/overlay-events.dev.js.map +0 -7
- package/src/overlay-events.js +0 -2
- package/src/overlay-events.js.map +0 -7
- package/src/overlay-timer.d.ts +0 -22
- package/src/overlay-timer.dev.js +0 -72
- package/src/overlay-timer.dev.js.map +0 -7
- package/src/overlay-timer.js +0 -2
- package/src/overlay-timer.js.map +0 -7
- package/src/overlay-trigger-directive.d.ts +0 -26
- package/src/overlay-trigger-directive.dev.js +0 -87
- package/src/overlay-trigger-directive.dev.js.map +0 -7
- package/src/overlay-trigger-directive.js +0 -2
- package/src/overlay-trigger-directive.js.map +0 -7
- package/src/overlay-trigger.css.d.ts +0 -2
- package/src/overlay-trigger.css.dev.js +0 -7
- package/src/overlay-trigger.css.dev.js.map +0 -7
- package/src/overlay-trigger.css.js +0 -4
- package/src/overlay-trigger.css.js.map +0 -7
- package/src/overlay-types.d.ts +0 -50
- package/src/overlay-types.dev.js +0 -3
- package/src/overlay-types.dev.js.map +0 -7
- package/src/overlay-types.js +0 -2
- package/src/overlay-types.js.map +0 -7
- package/src/overlay.css.d.ts +0 -2
- package/src/overlay.css.dev.js +0 -7
- package/src/overlay.css.dev.js.map +0 -7
- package/src/overlay.css.js +0 -4
- package/src/overlay.css.js.map +0 -7
- package/src/slottable-request-directive.d.ts +0 -17
- package/src/slottable-request-directive.dev.js +0 -66
- package/src/slottable-request-directive.dev.js.map +0 -7
- package/src/slottable-request-directive.js +0 -2
- package/src/slottable-request-directive.js.map +0 -7
- package/src/slottable-request-event.d.ts +0 -12
- package/src/slottable-request-event.dev.js +0 -28
- package/src/slottable-request-event.dev.js.map +0 -7
- package/src/slottable-request-event.js +0 -2
- package/src/slottable-request-event.js.map +0 -7
- package/src/strategies.d.ts +0 -8
- package/src/strategies.dev.js +0 -10
- package/src/strategies.dev.js.map +0 -7
- package/src/strategies.js +0 -2
- package/src/strategies.js.map +0 -7
- package/stories/index.js +0 -40
- package/stories/index.js.map +0 -7
- package/stories/overlay-directive.stories.js +0 -324
- package/stories/overlay-directive.stories.js.map +0 -7
- package/stories/overlay-element.stories.js +0 -675
- package/stories/overlay-element.stories.js.map +0 -7
- package/stories/overlay-story-components.js +0 -338
- package/stories/overlay-story-components.js.map +0 -7
- package/stories/overlay.stories.js +0 -1397
- package/stories/overlay.stories.js.map +0 -7
- package/sync/overlay-trigger.d.ts +0 -6
- package/sync/overlay-trigger.dev.js +0 -6
- package/sync/overlay-trigger.dev.js.map +0 -7
- package/sync/overlay-trigger.js +0 -2
- package/sync/overlay-trigger.js.map +0 -7
- package/test/benchmark/basic-test.js +0 -40
- package/test/benchmark/basic-test.js.map +0 -7
- package/test/benchmark/directive-test.js +0 -43
- package/test/benchmark/directive-test.js.map +0 -7
- package/test/benchmark/element-test.js +0 -40
- package/test/benchmark/element-test.js.map +0 -7
- package/test/benchmark/lazy-test.js +0 -47
- package/test/benchmark/lazy-test.js.map +0 -7
- package/test/index.js +0 -605
- package/test/index.js.map +0 -7
- package/test/overlay-directive.test-vrt.js +0 -5
- package/test/overlay-directive.test-vrt.js.map +0 -7
- package/test/overlay-directive.test.js +0 -162
- package/test/overlay-directive.test.js.map +0 -7
- package/test/overlay-element.test-vrt.js +0 -5
- package/test/overlay-element.test-vrt.js.map +0 -7
- package/test/overlay-element.test.js +0 -936
- package/test/overlay-element.test.js.map +0 -7
- package/test/overlay-lifecycle.test.js +0 -139
- package/test/overlay-lifecycle.test.js.map +0 -7
- package/test/overlay-memory.test.js +0 -10
- package/test/overlay-memory.test.js.map +0 -7
- package/test/overlay-timer.test.js +0 -118
- package/test/overlay-timer.test.js.map +0 -7
- package/test/overlay-trigger-click.test.js +0 -164
- package/test/overlay-trigger-click.test.js.map +0 -7
- package/test/overlay-trigger-directive.test.js +0 -75
- package/test/overlay-trigger-directive.test.js.map +0 -7
- package/test/overlay-trigger-extended.test.js +0 -235
- package/test/overlay-trigger-extended.test.js.map +0 -7
- package/test/overlay-trigger-hover-click.test.js +0 -225
- package/test/overlay-trigger-hover-click.test.js.map +0 -7
- package/test/overlay-trigger-hover.test.js +0 -308
- package/test/overlay-trigger-hover.test.js.map +0 -7
- package/test/overlay-trigger-longpress.test.js +0 -549
- package/test/overlay-trigger-longpress.test.js.map +0 -7
- package/test/overlay-trigger-sync.test.js +0 -5
- package/test/overlay-trigger-sync.test.js.map +0 -7
- package/test/overlay-trigger.test.js +0 -5
- package/test/overlay-trigger.test.js.map +0 -7
- package/test/overlay-update.test.js +0 -28
- package/test/overlay-update.test.js.map +0 -7
- package/test/overlay-v1.test.js +0 -569
- package/test/overlay-v1.test.js.map +0 -7
- package/test/overlay.test-vrt.js +0 -5
- package/test/overlay.test-vrt.js.map +0 -7
- package/test/overlay.test.js +0 -776
- package/test/overlay.test.js.map +0 -7
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
-
if (decorator = decorators[i])
|
|
8
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result) __defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SpectrumElement
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import {
|
|
17
|
-
property,
|
|
18
|
-
query,
|
|
19
|
-
state
|
|
20
|
-
} from "@spectrum-web-components/base/src/decorators.js";
|
|
21
|
-
import overlayTriggerStyles from "./overlay-trigger.css.js";
|
|
22
|
-
export class OverlayTrigger extends SpectrumElement {
|
|
23
|
-
constructor() {
|
|
24
|
-
super(...arguments);
|
|
25
|
-
this.content = "click hover longpress";
|
|
26
|
-
this.offset = 6;
|
|
27
|
-
this.disabled = false;
|
|
28
|
-
this.receivesFocus = "auto";
|
|
29
|
-
this.clickContent = [];
|
|
30
|
-
this.longpressContent = [];
|
|
31
|
-
this.hoverContent = [];
|
|
32
|
-
this.targetContent = [];
|
|
33
|
-
}
|
|
34
|
-
static get styles() {
|
|
35
|
-
return [overlayTriggerStyles];
|
|
36
|
-
}
|
|
37
|
-
getAssignedElementsFromSlot(slot) {
|
|
38
|
-
return slot.assignedElements({ flatten: true });
|
|
39
|
-
}
|
|
40
|
-
handleTriggerContent(event) {
|
|
41
|
-
this.targetContent = this.getAssignedElementsFromSlot(event.target);
|
|
42
|
-
}
|
|
43
|
-
handleSlotContent(event) {
|
|
44
|
-
switch (event.target.name) {
|
|
45
|
-
case "click-content":
|
|
46
|
-
this.clickContent = this.getAssignedElementsFromSlot(
|
|
47
|
-
event.target
|
|
48
|
-
);
|
|
49
|
-
break;
|
|
50
|
-
case "longpress-content":
|
|
51
|
-
this.longpressContent = this.getAssignedElementsFromSlot(
|
|
52
|
-
event.target
|
|
53
|
-
);
|
|
54
|
-
break;
|
|
55
|
-
case "hover-content":
|
|
56
|
-
this.hoverContent = this.getAssignedElementsFromSlot(
|
|
57
|
-
event.target
|
|
58
|
-
);
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
handleBeforetoggle(event) {
|
|
63
|
-
const { target } = event;
|
|
64
|
-
let type;
|
|
65
|
-
if (target === this.clickOverlayElement) {
|
|
66
|
-
type = "click";
|
|
67
|
-
} else if (target === this.longpressOverlayElement) {
|
|
68
|
-
type = "longpress";
|
|
69
|
-
} else if (target === this.hoverOverlayElement) {
|
|
70
|
-
type = "hover";
|
|
71
|
-
} else {
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
if (event.newState === "open") {
|
|
75
|
-
this.open = type;
|
|
76
|
-
} else if (this.open === type) {
|
|
77
|
-
this.open = void 0;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
update(changes) {
|
|
81
|
-
var _a, _b, _c, _d, _e, _f;
|
|
82
|
-
if (changes.has("clickContent")) {
|
|
83
|
-
this.clickPlacement = ((_a = this.clickContent[0]) == null ? void 0 : _a.getAttribute("placement")) || ((_b = this.clickContent[0]) == null ? void 0 : _b.getAttribute(
|
|
84
|
-
"direction"
|
|
85
|
-
)) || void 0;
|
|
86
|
-
}
|
|
87
|
-
if (changes.has("hoverContent")) {
|
|
88
|
-
this.hoverPlacement = ((_c = this.hoverContent[0]) == null ? void 0 : _c.getAttribute("placement")) || ((_d = this.hoverContent[0]) == null ? void 0 : _d.getAttribute(
|
|
89
|
-
"direction"
|
|
90
|
-
)) || void 0;
|
|
91
|
-
}
|
|
92
|
-
if (changes.has("longpressContent")) {
|
|
93
|
-
this.longpressPlacement = ((_e = this.longpressContent[0]) == null ? void 0 : _e.getAttribute("placement")) || ((_f = this.longpressContent[0]) == null ? void 0 : _f.getAttribute(
|
|
94
|
-
"direction"
|
|
95
|
-
)) || void 0;
|
|
96
|
-
}
|
|
97
|
-
super.update(changes);
|
|
98
|
-
}
|
|
99
|
-
renderSlot(name) {
|
|
100
|
-
return html`
|
|
101
|
-
<slot name=${name} @slotchange=${this.handleSlotContent}></slot>
|
|
102
|
-
`;
|
|
103
|
-
}
|
|
104
|
-
renderClickOverlay() {
|
|
105
|
-
import("@spectrum-web-components/overlay/sp-overlay.js");
|
|
106
|
-
const slot = this.renderSlot("click-content");
|
|
107
|
-
if (!this.clickContent.length) {
|
|
108
|
-
return slot;
|
|
109
|
-
}
|
|
110
|
-
return html`
|
|
111
|
-
<sp-overlay
|
|
112
|
-
id="click-overlay"
|
|
113
|
-
?disabled=${this.disabled || !this.clickContent.length}
|
|
114
|
-
?open=${this.open === "click" && !!this.clickContent.length}
|
|
115
|
-
.offset=${this.offset}
|
|
116
|
-
.placement=${this.clickPlacement || this.placement}
|
|
117
|
-
.triggerElement=${this.targetContent[0]}
|
|
118
|
-
.triggerInteraction=${"click"}
|
|
119
|
-
.type=${this.type !== "modal" ? "auto" : "modal"}
|
|
120
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
121
|
-
.receivesFocus=${this.receivesFocus}
|
|
122
|
-
>
|
|
123
|
-
${slot}
|
|
124
|
-
</sp-overlay>
|
|
125
|
-
`;
|
|
126
|
-
}
|
|
127
|
-
renderHoverOverlay() {
|
|
128
|
-
import("@spectrum-web-components/overlay/sp-overlay.js");
|
|
129
|
-
const slot = this.renderSlot("hover-content");
|
|
130
|
-
if (!this.hoverContent.length) {
|
|
131
|
-
return slot;
|
|
132
|
-
}
|
|
133
|
-
return html`
|
|
134
|
-
<sp-overlay
|
|
135
|
-
id="hover-overlay"
|
|
136
|
-
?open=${this.open === "hover" && !!this.hoverContent.length}
|
|
137
|
-
?disabled=${this.disabled || !this.hoverContent.length || !!this.open && this.open !== "hover"}
|
|
138
|
-
.offset=${this.offset}
|
|
139
|
-
.placement=${this.hoverPlacement || this.placement}
|
|
140
|
-
.triggerElement=${this.targetContent[0]}
|
|
141
|
-
.triggerInteraction=${"hover"}
|
|
142
|
-
.type=${"hint"}
|
|
143
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
144
|
-
.receivesFocus=${this.receivesFocus}
|
|
145
|
-
>
|
|
146
|
-
${slot}
|
|
147
|
-
</sp-overlay>
|
|
148
|
-
`;
|
|
149
|
-
}
|
|
150
|
-
renderLongpressOverlay() {
|
|
151
|
-
import("@spectrum-web-components/overlay/sp-overlay.js");
|
|
152
|
-
const slot = this.renderSlot("longpress-content");
|
|
153
|
-
if (!this.longpressContent.length) {
|
|
154
|
-
return slot;
|
|
155
|
-
}
|
|
156
|
-
return html`
|
|
157
|
-
<sp-overlay
|
|
158
|
-
id="longpress-overlay"
|
|
159
|
-
?disabled=${this.disabled || !this.longpressContent.length}
|
|
160
|
-
?open=${this.open === "longpress" && !!this.longpressContent.length}
|
|
161
|
-
.offset=${this.offset}
|
|
162
|
-
.placement=${this.longpressPlacement || this.placement}
|
|
163
|
-
.triggerElement=${this.targetContent[0]}
|
|
164
|
-
.triggerInteraction=${"longpress"}
|
|
165
|
-
.type=${"auto"}
|
|
166
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
167
|
-
.receivesFocus=${this.receivesFocus}
|
|
168
|
-
>
|
|
169
|
-
${slot}
|
|
170
|
-
</sp-overlay>
|
|
171
|
-
<slot name="longpress-describedby-descriptor"></slot>
|
|
172
|
-
`;
|
|
173
|
-
}
|
|
174
|
-
render() {
|
|
175
|
-
const content = this.content.split(" ");
|
|
176
|
-
return html`
|
|
177
|
-
<slot
|
|
178
|
-
id="trigger"
|
|
179
|
-
name="trigger"
|
|
180
|
-
@slotchange=${this.handleTriggerContent}
|
|
181
|
-
></slot>
|
|
182
|
-
${[
|
|
183
|
-
content.includes("click") ? this.renderClickOverlay() : html``,
|
|
184
|
-
content.includes("hover") ? this.renderHoverOverlay() : html``,
|
|
185
|
-
content.includes("longpress") ? this.renderLongpressOverlay() : html``
|
|
186
|
-
]}
|
|
187
|
-
`;
|
|
188
|
-
}
|
|
189
|
-
updated(changes) {
|
|
190
|
-
super.updated(changes);
|
|
191
|
-
if (this.disabled && changes.has("disabled")) {
|
|
192
|
-
this.open = void 0;
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
async getUpdateComplete() {
|
|
197
|
-
const complete = await super.getUpdateComplete();
|
|
198
|
-
return complete;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
__decorateClass([
|
|
202
|
-
property()
|
|
203
|
-
], OverlayTrigger.prototype, "content", 2);
|
|
204
|
-
__decorateClass([
|
|
205
|
-
property({ reflect: true })
|
|
206
|
-
], OverlayTrigger.prototype, "placement", 2);
|
|
207
|
-
__decorateClass([
|
|
208
|
-
property()
|
|
209
|
-
], OverlayTrigger.prototype, "type", 2);
|
|
210
|
-
__decorateClass([
|
|
211
|
-
property({ type: Number })
|
|
212
|
-
], OverlayTrigger.prototype, "offset", 2);
|
|
213
|
-
__decorateClass([
|
|
214
|
-
property({ reflect: true })
|
|
215
|
-
], OverlayTrigger.prototype, "open", 2);
|
|
216
|
-
__decorateClass([
|
|
217
|
-
property({ type: Boolean, reflect: true })
|
|
218
|
-
], OverlayTrigger.prototype, "disabled", 2);
|
|
219
|
-
__decorateClass([
|
|
220
|
-
property({ attribute: "receives-focus" })
|
|
221
|
-
], OverlayTrigger.prototype, "receivesFocus", 2);
|
|
222
|
-
__decorateClass([
|
|
223
|
-
state()
|
|
224
|
-
], OverlayTrigger.prototype, "clickContent", 2);
|
|
225
|
-
__decorateClass([
|
|
226
|
-
state()
|
|
227
|
-
], OverlayTrigger.prototype, "longpressContent", 2);
|
|
228
|
-
__decorateClass([
|
|
229
|
-
state()
|
|
230
|
-
], OverlayTrigger.prototype, "hoverContent", 2);
|
|
231
|
-
__decorateClass([
|
|
232
|
-
state()
|
|
233
|
-
], OverlayTrigger.prototype, "targetContent", 2);
|
|
234
|
-
__decorateClass([
|
|
235
|
-
query("#click-overlay", true)
|
|
236
|
-
], OverlayTrigger.prototype, "clickOverlayElement", 2);
|
|
237
|
-
__decorateClass([
|
|
238
|
-
query("#longpress-overlay", true)
|
|
239
|
-
], OverlayTrigger.prototype, "longpressOverlayElement", 2);
|
|
240
|
-
__decorateClass([
|
|
241
|
-
query("#hover-overlay", true)
|
|
242
|
-
], OverlayTrigger.prototype, "hoverOverlayElement", 2);
|
|
243
|
-
//# sourceMappingURL=OverlayTrigger.dev.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayTrigger.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @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 import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/OverlayTrigger.js
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(p,a,e,o)=>{for(var t=o>1?void 0:o?v(a,e):a,l=p.length-1,i;l>=0;l--)(i=p[l])&&(t=(o?i(a,e,t):i(t))||t);return o&&t&&g(a,e,t),t};import{html as r,SpectrumElement as u}from"@spectrum-web-components/base";import{property as s,query as h,state as c}from"@spectrum-web-components/base/src/decorators.js";import f from"./overlay-trigger.css.js";export class OverlayTrigger extends u{constructor(){super(...arguments);this.content="click hover longpress";this.offset=6;this.disabled=!1;this.receivesFocus="auto";this.clickContent=[];this.longpressContent=[];this.hoverContent=[];this.targetContent=[]}static get styles(){return[f]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleSlotContent(e){switch(e.target.name){case"click-content":this.clickContent=this.getAssignedElementsFromSlot(e.target);break;case"longpress-content":this.longpressContent=this.getAssignedElementsFromSlot(e.target);break;case"hover-content":this.hoverContent=this.getAssignedElementsFromSlot(e.target);break}}handleBeforetoggle(e){const{target:o}=e;let t;if(o===this.clickOverlayElement)t="click";else if(o===this.longpressOverlayElement)t="longpress";else if(o===this.hoverOverlayElement)t="hover";else return;e.newState==="open"?this.open=t:this.open===t&&(this.open=void 0)}update(e){var o,t,l,i,d,m;e.has("clickContent")&&(this.clickPlacement=((o=this.clickContent[0])==null?void 0:o.getAttribute("placement"))||((t=this.clickContent[0])==null?void 0:t.getAttribute("direction"))||void 0),e.has("hoverContent")&&(this.hoverPlacement=((l=this.hoverContent[0])==null?void 0:l.getAttribute("placement"))||((i=this.hoverContent[0])==null?void 0:i.getAttribute("direction"))||void 0),e.has("longpressContent")&&(this.longpressPlacement=((d=this.longpressContent[0])==null?void 0:d.getAttribute("placement"))||((m=this.longpressContent[0])==null?void 0:m.getAttribute("direction"))||void 0),super.update(e)}renderSlot(e){return r`
|
|
2
|
-
<slot name=${e} @slotchange=${this.handleSlotContent}></slot>
|
|
3
|
-
`}renderClickOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("click-content");return this.clickContent.length?r`
|
|
4
|
-
<sp-overlay
|
|
5
|
-
id="click-overlay"
|
|
6
|
-
?disabled=${this.disabled||!this.clickContent.length}
|
|
7
|
-
?open=${this.open==="click"&&!!this.clickContent.length}
|
|
8
|
-
.offset=${this.offset}
|
|
9
|
-
.placement=${this.clickPlacement||this.placement}
|
|
10
|
-
.triggerElement=${this.targetContent[0]}
|
|
11
|
-
.triggerInteraction=${"click"}
|
|
12
|
-
.type=${this.type!=="modal"?"auto":"modal"}
|
|
13
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
14
|
-
.receivesFocus=${this.receivesFocus}
|
|
15
|
-
>
|
|
16
|
-
${e}
|
|
17
|
-
</sp-overlay>
|
|
18
|
-
`:e}renderHoverOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("hover-content");return this.hoverContent.length?r`
|
|
19
|
-
<sp-overlay
|
|
20
|
-
id="hover-overlay"
|
|
21
|
-
?open=${this.open==="hover"&&!!this.hoverContent.length}
|
|
22
|
-
?disabled=${this.disabled||!this.hoverContent.length||!!this.open&&this.open!=="hover"}
|
|
23
|
-
.offset=${this.offset}
|
|
24
|
-
.placement=${this.hoverPlacement||this.placement}
|
|
25
|
-
.triggerElement=${this.targetContent[0]}
|
|
26
|
-
.triggerInteraction=${"hover"}
|
|
27
|
-
.type=${"hint"}
|
|
28
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
29
|
-
.receivesFocus=${this.receivesFocus}
|
|
30
|
-
>
|
|
31
|
-
${e}
|
|
32
|
-
</sp-overlay>
|
|
33
|
-
`:e}renderLongpressOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("longpress-content");return this.longpressContent.length?r`
|
|
34
|
-
<sp-overlay
|
|
35
|
-
id="longpress-overlay"
|
|
36
|
-
?disabled=${this.disabled||!this.longpressContent.length}
|
|
37
|
-
?open=${this.open==="longpress"&&!!this.longpressContent.length}
|
|
38
|
-
.offset=${this.offset}
|
|
39
|
-
.placement=${this.longpressPlacement||this.placement}
|
|
40
|
-
.triggerElement=${this.targetContent[0]}
|
|
41
|
-
.triggerInteraction=${"longpress"}
|
|
42
|
-
.type=${"auto"}
|
|
43
|
-
@beforetoggle=${this.handleBeforetoggle}
|
|
44
|
-
.receivesFocus=${this.receivesFocus}
|
|
45
|
-
>
|
|
46
|
-
${e}
|
|
47
|
-
</sp-overlay>
|
|
48
|
-
<slot name="longpress-describedby-descriptor"></slot>
|
|
49
|
-
`:e}render(){const e=this.content.split(" ");return r`
|
|
50
|
-
<slot
|
|
51
|
-
id="trigger"
|
|
52
|
-
name="trigger"
|
|
53
|
-
@slotchange=${this.handleTriggerContent}
|
|
54
|
-
></slot>
|
|
55
|
-
${[e.includes("click")?this.renderClickOverlay():r``,e.includes("hover")?this.renderHoverOverlay():r``,e.includes("longpress")?this.renderLongpressOverlay():r``]}
|
|
56
|
-
`}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}n([s()],OverlayTrigger.prototype,"content",2),n([s({reflect:!0})],OverlayTrigger.prototype,"placement",2),n([s()],OverlayTrigger.prototype,"type",2),n([s({type:Number})],OverlayTrigger.prototype,"offset",2),n([s({reflect:!0})],OverlayTrigger.prototype,"open",2),n([s({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),n([s({attribute:"receives-focus"})],OverlayTrigger.prototype,"receivesFocus",2),n([c()],OverlayTrigger.prototype,"clickContent",2),n([c()],OverlayTrigger.prototype,"longpressContent",2),n([c()],OverlayTrigger.prototype,"hoverContent",2),n([c()],OverlayTrigger.prototype,"targetContent",2),n([h("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),n([h("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),n([h("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
|
|
57
|
-
//# sourceMappingURL=OverlayTrigger.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayTrigger.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n @property()\n content = 'click hover longpress';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @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 import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('click-content');\n if (!this.clickContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"click-overlay\"\n ?disabled=${this.disabled || !this.clickContent.length}\n ?open=${this.open === 'click' && !!this.clickContent.length}\n .offset=${this.offset}\n .placement=${this.clickPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'click'}\n .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderHoverOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('hover-content');\n if (!this.hoverContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"hover-overlay\"\n ?open=${this.open === 'hover' && !!this.hoverContent.length}\n ?disabled=${this.disabled ||\n !this.hoverContent.length ||\n (!!this.open && this.open !== 'hover')}\n .offset=${this.offset}\n .placement=${this.hoverPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'hover'}\n .type=${'hint'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n `;\n }\n\n protected renderLongpressOverlay(): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n const slot = this.renderSlot('longpress-content');\n if (!this.longpressContent.length) {\n return slot;\n }\n return html`\n <sp-overlay\n id=\"longpress-overlay\"\n ?disabled=${this.disabled || !this.longpressContent.length}\n ?open=${this.open === 'longpress' &&\n !!this.longpressContent.length}\n .offset=${this.offset}\n .placement=${this.longpressPlacement || this.placement}\n .triggerElement=${this.targetContent[0]}\n .triggerInteraction=${'longpress'}\n .type=${'auto'}\n @beforetoggle=${this.handleBeforetoggle}\n .receivesFocus=${this.receivesFocus}\n >\n ${slot}\n </sp-overlay>\n <slot name=\"longpress-describedby-descriptor\"></slot>\n `;\n }\n\n protected override render(): TemplateResult {\n const content = this.content.split(' ');\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n name=\"trigger\"\n @slotchange=${this.handleTriggerContent}\n ></slot>\n ${[\n content.includes('click') ? this.renderClickOverlay() : html``,\n content.includes('hover') ? this.renderHoverOverlay() : html``,\n content.includes('longpress')\n ? this.renderLongpressOverlay()\n : html``,\n ]}\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.open = undefined;\n return;\n }\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n return complete;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "query", "state", "overlayTriggerStyles", "slot", "event", "target", "type", "changes", "_a", "_b", "_c", "_d", "_e", "_f", "name", "content", "__decorateClass"]
|
|
7
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import type { ReactiveController, ReactiveElement } from '@spectrum-web-components/base';
|
|
2
|
-
import { Placement } from '@floating-ui/dom';
|
|
3
|
-
import type { VirtualTrigger } from './VirtualTrigger.js';
|
|
4
|
-
import type { OpenableElement } from './overlay-types.js';
|
|
5
|
-
type OverlayOptionsV1 = {
|
|
6
|
-
abortPromise?: Promise<boolean>;
|
|
7
|
-
delayed?: boolean;
|
|
8
|
-
offset?: number | [number, number];
|
|
9
|
-
placement: Placement;
|
|
10
|
-
notImmediatelyClosable?: boolean;
|
|
11
|
-
receivesFocus?: 'auto';
|
|
12
|
-
root?: HTMLElement;
|
|
13
|
-
tipPadding?: number;
|
|
14
|
-
trigger: HTMLElement | VirtualTrigger;
|
|
15
|
-
type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
|
|
16
|
-
};
|
|
17
|
-
export declare const placementUpdatedSymbol: unique symbol;
|
|
18
|
-
export declare class PlacementController implements ReactiveController {
|
|
19
|
-
private cleanup?;
|
|
20
|
-
initialHeight?: number;
|
|
21
|
-
isConstrained?: boolean;
|
|
22
|
-
private host;
|
|
23
|
-
private options;
|
|
24
|
-
private originalPlacements;
|
|
25
|
-
private target;
|
|
26
|
-
constructor(host: ReactiveElement & {
|
|
27
|
-
elements: OpenableElement[];
|
|
28
|
-
});
|
|
29
|
-
placeOverlay(target?: HTMLElement, options?: OverlayOptionsV1): Promise<void>;
|
|
30
|
-
allowPlacementUpdate: boolean;
|
|
31
|
-
closeForAncestorUpdate: () => void;
|
|
32
|
-
updatePlacement: () => void;
|
|
33
|
-
computePlacement(): Promise<void>;
|
|
34
|
-
clearOverlayPosition(): void;
|
|
35
|
-
resetOverlayPosition: () => void;
|
|
36
|
-
hostConnected(): void;
|
|
37
|
-
hostUpdated(): void;
|
|
38
|
-
hostDisconnected(): void;
|
|
39
|
-
}
|
|
40
|
-
export {};
|
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
import {
|
|
3
|
-
arrow,
|
|
4
|
-
autoUpdate,
|
|
5
|
-
computePosition,
|
|
6
|
-
flip,
|
|
7
|
-
offset,
|
|
8
|
-
shift,
|
|
9
|
-
size
|
|
10
|
-
} from "@floating-ui/dom";
|
|
11
|
-
function roundByDPR(num) {
|
|
12
|
-
if (typeof num === "undefined") return 0;
|
|
13
|
-
const dpr = window.devicePixelRatio || 1;
|
|
14
|
-
return Math.round(num * dpr) / dpr;
|
|
15
|
-
}
|
|
16
|
-
const REQUIRED_DISTANCE_TO_EDGE = 8;
|
|
17
|
-
const MIN_OVERLAY_HEIGHT = 100;
|
|
18
|
-
const getFallbackPlacements = (placement) => {
|
|
19
|
-
var _a;
|
|
20
|
-
const fallbacks = {
|
|
21
|
-
left: ["right", "bottom", "top"],
|
|
22
|
-
"left-start": ["right-start", "bottom", "top"],
|
|
23
|
-
"left-end": ["right-end", "bottom", "top"],
|
|
24
|
-
right: ["left", "bottom", "top"],
|
|
25
|
-
"right-start": ["left-start", "bottom", "top"],
|
|
26
|
-
"right-end": ["left-end", "bottom", "top"],
|
|
27
|
-
top: ["bottom", "left", "right"],
|
|
28
|
-
"top-start": ["bottom-start", "left", "right"],
|
|
29
|
-
"top-end": ["bottom-end", "left", "right"],
|
|
30
|
-
bottom: ["top", "left", "right"],
|
|
31
|
-
"bottom-start": ["top-start", "left", "right"],
|
|
32
|
-
"bottom-end": ["top-end", "left", "right"]
|
|
33
|
-
};
|
|
34
|
-
return (_a = fallbacks[placement]) != null ? _a : [placement];
|
|
35
|
-
};
|
|
36
|
-
export const placementUpdatedSymbol = Symbol("placement updated");
|
|
37
|
-
export class PlacementController {
|
|
38
|
-
constructor(host) {
|
|
39
|
-
this.originalPlacements = /* @__PURE__ */ new WeakMap();
|
|
40
|
-
this.allowPlacementUpdate = false;
|
|
41
|
-
this.closeForAncestorUpdate = () => {
|
|
42
|
-
if (!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup) {
|
|
43
|
-
this.target.dispatchEvent(new Event("close", { bubbles: true }));
|
|
44
|
-
}
|
|
45
|
-
this.allowPlacementUpdate = false;
|
|
46
|
-
};
|
|
47
|
-
this.updatePlacement = () => {
|
|
48
|
-
this.computePlacement();
|
|
49
|
-
};
|
|
50
|
-
this.resetOverlayPosition = () => {
|
|
51
|
-
if (!this.target || !this.options) return;
|
|
52
|
-
this.clearOverlayPosition();
|
|
53
|
-
this.host.offsetHeight;
|
|
54
|
-
this.computePlacement();
|
|
55
|
-
};
|
|
56
|
-
this.host = host;
|
|
57
|
-
this.host.addController(this);
|
|
58
|
-
}
|
|
59
|
-
async placeOverlay(target = this.target, options = this.options) {
|
|
60
|
-
this.target = target;
|
|
61
|
-
this.options = options;
|
|
62
|
-
if (!target || !options) return;
|
|
63
|
-
const cleanupAncestorResize = autoUpdate(
|
|
64
|
-
options.trigger,
|
|
65
|
-
target,
|
|
66
|
-
this.closeForAncestorUpdate,
|
|
67
|
-
{
|
|
68
|
-
ancestorResize: false,
|
|
69
|
-
elementResize: false,
|
|
70
|
-
layoutShift: false
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
const cleanupElementResize = autoUpdate(
|
|
74
|
-
options.trigger,
|
|
75
|
-
target,
|
|
76
|
-
this.updatePlacement,
|
|
77
|
-
{
|
|
78
|
-
ancestorScroll: false
|
|
79
|
-
}
|
|
80
|
-
);
|
|
81
|
-
this.cleanup = () => {
|
|
82
|
-
var _a;
|
|
83
|
-
(_a = this.host.elements) == null ? void 0 : _a.forEach((element) => {
|
|
84
|
-
element.addEventListener(
|
|
85
|
-
"sp-closed",
|
|
86
|
-
() => {
|
|
87
|
-
const placement = this.originalPlacements.get(element);
|
|
88
|
-
if (placement) {
|
|
89
|
-
element.setAttribute("placement", placement);
|
|
90
|
-
}
|
|
91
|
-
this.originalPlacements.delete(element);
|
|
92
|
-
},
|
|
93
|
-
{ once: true }
|
|
94
|
-
);
|
|
95
|
-
});
|
|
96
|
-
cleanupAncestorResize();
|
|
97
|
-
cleanupElementResize();
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
async computePlacement() {
|
|
101
|
-
var _a, _b;
|
|
102
|
-
const { options, target } = this;
|
|
103
|
-
await (document.fonts ? document.fonts.ready : Promise.resolve());
|
|
104
|
-
const flipMiddleware = !(options.trigger instanceof HTMLElement) ? flip({
|
|
105
|
-
padding: REQUIRED_DISTANCE_TO_EDGE,
|
|
106
|
-
fallbackPlacements: getFallbackPlacements(options.placement)
|
|
107
|
-
}) : flip();
|
|
108
|
-
const [mainAxis = 0, crossAxis = 0] = Array.isArray(options == null ? void 0 : options.offset) ? options.offset : [options.offset, 0];
|
|
109
|
-
const tipElement = (_a = this.host.elements.find(
|
|
110
|
-
(el) => el.tipElement
|
|
111
|
-
)) == null ? void 0 : _a.tipElement;
|
|
112
|
-
const middleware = [
|
|
113
|
-
offset({
|
|
114
|
-
mainAxis,
|
|
115
|
-
crossAxis
|
|
116
|
-
}),
|
|
117
|
-
shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
|
|
118
|
-
flipMiddleware,
|
|
119
|
-
size({
|
|
120
|
-
padding: REQUIRED_DISTANCE_TO_EDGE,
|
|
121
|
-
apply: ({
|
|
122
|
-
availableWidth,
|
|
123
|
-
availableHeight,
|
|
124
|
-
rects: { floating }
|
|
125
|
-
}) => {
|
|
126
|
-
const maxHeight = Math.max(
|
|
127
|
-
MIN_OVERLAY_HEIGHT,
|
|
128
|
-
Math.floor(availableHeight)
|
|
129
|
-
);
|
|
130
|
-
const actualHeight = floating.height;
|
|
131
|
-
this.initialHeight = !this.isConstrained ? actualHeight : this.initialHeight || actualHeight;
|
|
132
|
-
this.isConstrained = actualHeight < this.initialHeight || maxHeight <= actualHeight;
|
|
133
|
-
const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
|
|
134
|
-
Object.assign(target.style, {
|
|
135
|
-
maxWidth: `${Math.floor(availableWidth)}px`,
|
|
136
|
-
maxHeight: appliedHeight
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
}),
|
|
140
|
-
...tipElement ? [
|
|
141
|
-
arrow({
|
|
142
|
-
element: tipElement,
|
|
143
|
-
padding: options.tipPadding || REQUIRED_DISTANCE_TO_EDGE
|
|
144
|
-
})
|
|
145
|
-
] : []
|
|
146
|
-
];
|
|
147
|
-
const { x, y, placement, middlewareData } = await computePosition(
|
|
148
|
-
options.trigger,
|
|
149
|
-
target,
|
|
150
|
-
{
|
|
151
|
-
placement: options.placement,
|
|
152
|
-
middleware,
|
|
153
|
-
strategy: "fixed"
|
|
154
|
-
}
|
|
155
|
-
);
|
|
156
|
-
Object.assign(target.style, {
|
|
157
|
-
top: "0px",
|
|
158
|
-
left: "0px",
|
|
159
|
-
translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
|
|
160
|
-
});
|
|
161
|
-
target.setAttribute("actual-placement", placement);
|
|
162
|
-
(_b = this.host.elements) == null ? void 0 : _b.forEach((element) => {
|
|
163
|
-
if (!this.originalPlacements.has(element)) {
|
|
164
|
-
this.originalPlacements.set(
|
|
165
|
-
element,
|
|
166
|
-
element.getAttribute("placement")
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
element.setAttribute("placement", placement);
|
|
170
|
-
});
|
|
171
|
-
if (tipElement && middlewareData.arrow) {
|
|
172
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
173
|
-
Object.assign(tipElement.style, {
|
|
174
|
-
top: placement.startsWith("right") || placement.startsWith("left") ? "0px" : "",
|
|
175
|
-
left: placement.startsWith("bottom") || placement.startsWith("top") ? "0px" : "",
|
|
176
|
-
translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
clearOverlayPosition() {
|
|
181
|
-
if (!this.target) {
|
|
182
|
-
return;
|
|
183
|
-
}
|
|
184
|
-
this.target.style.removeProperty("max-height");
|
|
185
|
-
this.target.style.removeProperty("max-width");
|
|
186
|
-
this.initialHeight = void 0;
|
|
187
|
-
this.isConstrained = false;
|
|
188
|
-
}
|
|
189
|
-
hostConnected() {
|
|
190
|
-
document.addEventListener(
|
|
191
|
-
"sp-update-overlays",
|
|
192
|
-
this.resetOverlayPosition
|
|
193
|
-
);
|
|
194
|
-
}
|
|
195
|
-
hostUpdated() {
|
|
196
|
-
var _a;
|
|
197
|
-
if (!this.host.open) {
|
|
198
|
-
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
199
|
-
this.cleanup = void 0;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
hostDisconnected() {
|
|
203
|
-
var _a;
|
|
204
|
-
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
205
|
-
this.cleanup = void 0;
|
|
206
|
-
document.removeEventListener(
|
|
207
|
-
"sp-update-overlays",
|
|
208
|
-
this.resetOverlayPosition
|
|
209
|
-
);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
//# sourceMappingURL=PlacementController.dev.js.map
|