@spectrum-web-components/overlay 0.16.5 → 0.16.6-devmode.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.
Files changed (93) hide show
  1. package/active-overlay.dev.js +3 -0
  2. package/active-overlay.dev.js.map +7 -0
  3. package/active-overlay.js +3 -14
  4. package/active-overlay.js.map +7 -1
  5. package/overlay-trigger.dev.js +3 -0
  6. package/overlay-trigger.dev.js.map +7 -0
  7. package/overlay-trigger.js +3 -14
  8. package/overlay-trigger.js.map +7 -1
  9. package/package.json +68 -14
  10. package/src/ActiveOverlay.dev.js +445 -0
  11. package/src/ActiveOverlay.dev.js.map +7 -0
  12. package/src/ActiveOverlay.js +404 -424
  13. package/src/ActiveOverlay.js.map +7 -1
  14. package/src/OverlayTrigger.dev.js +293 -0
  15. package/src/OverlayTrigger.dev.js.map +7 -0
  16. package/src/OverlayTrigger.js +245 -264
  17. package/src/OverlayTrigger.js.map +7 -1
  18. package/src/VirtualTrigger.dev.js +30 -0
  19. package/src/VirtualTrigger.dev.js.map +7 -0
  20. package/src/VirtualTrigger.js +28 -38
  21. package/src/VirtualTrigger.js.map +7 -1
  22. package/src/active-overlay.css.dev.js +12 -0
  23. package/src/active-overlay.css.dev.js.map +7 -0
  24. package/src/active-overlay.css.js +3 -14
  25. package/src/active-overlay.css.js.map +7 -1
  26. package/src/index.dev.js +7 -0
  27. package/src/index.dev.js.map +7 -0
  28. package/src/index.js +7 -18
  29. package/src/index.js.map +7 -1
  30. package/src/loader.dev.js +5 -0
  31. package/src/loader.dev.js.map +7 -0
  32. package/src/loader.js +3 -14
  33. package/src/loader.js.map +7 -1
  34. package/src/overlay-events.dev.js +7 -0
  35. package/src/overlay-events.dev.js.map +7 -0
  36. package/src/overlay-events.js +5 -16
  37. package/src/overlay-events.js.map +7 -1
  38. package/src/overlay-stack.dev.js +436 -0
  39. package/src/overlay-stack.dev.js.map +7 -0
  40. package/src/overlay-stack.js +374 -420
  41. package/src/overlay-stack.js.map +7 -1
  42. package/src/overlay-timer.dev.js +71 -0
  43. package/src/overlay-timer.dev.js.map +7 -0
  44. package/src/overlay-timer.js +64 -82
  45. package/src/overlay-timer.js.map +7 -1
  46. package/src/overlay-trigger.css.dev.js +6 -0
  47. package/src/overlay-trigger.css.dev.js.map +7 -0
  48. package/src/overlay-trigger.css.js +3 -14
  49. package/src/overlay-trigger.css.js.map +7 -1
  50. package/src/overlay-types.dev.js +1 -0
  51. package/src/overlay-types.dev.js.map +7 -0
  52. package/src/overlay-types.js +1 -13
  53. package/src/overlay-types.js.map +7 -1
  54. package/src/overlay-utils.dev.js +28 -0
  55. package/src/overlay-utils.dev.js.map +7 -0
  56. package/src/overlay-utils.js +22 -33
  57. package/src/overlay-utils.js.map +7 -1
  58. package/src/overlay.dev.js +85 -0
  59. package/src/overlay.dev.js.map +7 -0
  60. package/src/overlay.js +83 -119
  61. package/src/overlay.js.map +7 -1
  62. package/stories/overlay-story-components.js +188 -184
  63. package/stories/overlay-story-components.js.map +7 -1
  64. package/stories/overlay.stories.js +238 -228
  65. package/stories/overlay.stories.js.map +7 -1
  66. package/sync/overlay-trigger.dev.js +7 -0
  67. package/sync/overlay-trigger.dev.js.map +7 -0
  68. package/sync/overlay-trigger.js +5 -16
  69. package/sync/overlay-trigger.js.map +7 -1
  70. package/test/benchmark/basic-test.js +7 -18
  71. package/test/benchmark/basic-test.js.map +7 -1
  72. package/test/overlay-lifecycle.test.js +107 -115
  73. package/test/overlay-lifecycle.test.js.map +7 -1
  74. package/test/overlay-timer.test.js +110 -122
  75. package/test/overlay-timer.test.js.map +7 -1
  76. package/test/overlay-trigger-click.test.js +43 -48
  77. package/test/overlay-trigger-click.test.js.map +7 -1
  78. package/test/overlay-trigger-extended.test.js +167 -182
  79. package/test/overlay-trigger-extended.test.js.map +7 -1
  80. package/test/overlay-trigger-hover-click.test.js +59 -73
  81. package/test/overlay-trigger-hover-click.test.js.map +7 -1
  82. package/test/overlay-trigger-hover.test.js +74 -77
  83. package/test/overlay-trigger-hover.test.js.map +7 -1
  84. package/test/overlay-trigger-longpress.test.js +166 -178
  85. package/test/overlay-trigger-longpress.test.js.map +7 -1
  86. package/test/overlay-trigger-sync.test.js +400 -422
  87. package/test/overlay-trigger-sync.test.js.map +7 -1
  88. package/test/overlay-trigger.test.js +400 -422
  89. package/test/overlay-trigger.test.js.map +7 -1
  90. package/test/overlay.test-vrt.js +4 -15
  91. package/test/overlay.test-vrt.js.map +7 -1
  92. package/test/overlay.test.js +458 -479
  93. package/test/overlay.test.js.map +7 -1
@@ -1,28 +1,35 @@
1
- import { __decorate } from "tslib";
2
- /*
3
- Copyright 2020 Adobe. All rights reserved.
4
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
5
- you may not use this file except in compliance with the License. You may obtain a copy
6
- of the License at http://www.apache.org/licenses/LICENSE-2.0
7
-
8
- Unless required by applicable law or agreed to in writing, software distributed under
9
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10
- OF ANY KIND, either express or implied. See the License for the specific language
11
- governing permissions and limitations under the License.
12
- */
13
- import { css, html, LitElement, } from '@spectrum-web-components/base';
14
- import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
15
- import { Overlay } from '../';
16
- import '@spectrum-web-components/button/sp-button.js';
17
- import '@spectrum-web-components/popover/sp-popover.js';
18
- import '@spectrum-web-components/radio/sp-radio.js';
19
- import '@spectrum-web-components/radio/sp-radio-group.js';
20
- import '@spectrum-web-components/overlay/overlay-trigger.js';
21
- // Prevent infinite recursion in browser
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __decorateClass = (decorators, target, key, kind) => {
4
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
5
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
6
+ if (decorator = decorators[i])
7
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
8
+ if (kind && result)
9
+ __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ import {
13
+ css,
14
+ html,
15
+ LitElement
16
+ } from "@spectrum-web-components/base";
17
+ import {
18
+ property,
19
+ query
20
+ } from "@spectrum-web-components/base/src/decorators.js";
21
+ import {
22
+ Overlay
23
+ } from "@spectrum-web-components/overlay";
24
+ import "@spectrum-web-components/button/sp-button.js";
25
+ import "@spectrum-web-components/popover/sp-popover.js";
26
+ import "@spectrum-web-components/radio/sp-radio.js";
27
+ import "@spectrum-web-components/radio/sp-radio-group.js";
28
+ import "@spectrum-web-components/overlay/overlay-trigger.js";
22
29
  const MAX_DEPTH = 7;
23
30
  class OverlayTargetIcon extends LitElement {
24
- static get styles() {
25
- return css `
31
+ static get styles() {
32
+ return css`
26
33
  :host {
27
34
  position: absolute;
28
35
  display: block;
@@ -33,9 +40,9 @@ class OverlayTargetIcon extends LitElement {
33
40
  left: 0;
34
41
  }
35
42
  `;
36
- }
37
- render() {
38
- return html `
43
+ }
44
+ render() {
45
+ return html`
39
46
  <svg
40
47
  aria-hidden="true"
41
48
  focusable="false"
@@ -51,17 +58,17 @@ class OverlayTargetIcon extends LitElement {
51
58
  ></path>
52
59
  </svg>
53
60
  `;
54
- }
61
+ }
55
62
  }
56
- customElements.define('overlay-target-icon', OverlayTargetIcon);
63
+ customElements.define("overlay-target-icon", OverlayTargetIcon);
57
64
  class OverlayDrag extends LitElement {
58
- constructor() {
59
- super(...arguments);
60
- this.top = 100;
61
- this.left = 100;
62
- }
63
- static get styles() {
64
- return css `
65
+ constructor() {
66
+ super(...arguments);
67
+ this.top = 100;
68
+ this.left = 100;
69
+ }
70
+ static get styles() {
71
+ return css`
65
72
  :host {
66
73
  display: block;
67
74
  width: 100%;
@@ -75,103 +82,103 @@ class OverlayDrag extends LitElement {
75
82
  height: 100%;
76
83
  }
77
84
  `;
85
+ }
86
+ onSlotChange(event) {
87
+ const slot = event.target;
88
+ this.targetElement = void 0;
89
+ const nodes = slot.assignedNodes();
90
+ const slotElement = nodes.find((node) => node instanceof HTMLElement);
91
+ if (!slotElement)
92
+ return;
93
+ this.targetElement = slotElement.querySelector('[slot="trigger"]');
94
+ if (!this.targetElement)
95
+ return;
96
+ this.targetElement.addEventListener("mousedown", (event2) => this.onMouseDown(event2));
97
+ this.resetTargetPosition();
98
+ }
99
+ onMouseDown(event) {
100
+ const target = event.target;
101
+ const parent = target.parentElement;
102
+ if (!parent)
103
+ return;
104
+ const max = {
105
+ x: parent.offsetWidth - target.offsetWidth,
106
+ y: parent.offsetHeight - target.offsetHeight
107
+ };
108
+ const dragStart = {
109
+ x: event.clientX,
110
+ y: event.clientY
111
+ };
112
+ const originalPos = {
113
+ x: this.left,
114
+ y: this.top
115
+ };
116
+ const onMouseMove = (event2) => {
117
+ const dragDelta = {
118
+ x: event2.clientX - dragStart.x,
119
+ y: event2.clientY - dragStart.y
120
+ };
121
+ const newPosition = {
122
+ x: dragDelta.x + originalPos.x,
123
+ y: dragDelta.y + originalPos.y
124
+ };
125
+ this.left = Math.min(Math.max(newPosition.x, 0), max.x);
126
+ this.top = Math.min(Math.max(newPosition.y, 0), max.y);
127
+ Overlay.update();
128
+ };
129
+ const onMouseUp = () => {
130
+ document.removeEventListener("mousemove", onMouseMove);
131
+ document.removeEventListener("mouseup", onMouseUp);
132
+ };
133
+ document.addEventListener("mousemove", onMouseMove);
134
+ document.addEventListener("mouseup", onMouseUp);
135
+ }
136
+ resetTargetPosition() {
137
+ if (!this.targetElement)
138
+ return;
139
+ const target = this.targetElement;
140
+ const parent = target.parentElement;
141
+ if (!parent)
142
+ return;
143
+ this.left = (parent.offsetWidth - target.offsetWidth) / 2;
144
+ this.top = (parent.offsetHeight - target.offsetHeight) / 2;
145
+ }
146
+ updated() {
147
+ if (this.targetElement) {
148
+ this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;
78
149
  }
79
- onSlotChange(event) {
80
- const slot = event.target;
81
- this.targetElement = undefined;
82
- const nodes = slot.assignedNodes();
83
- const slotElement = nodes.find((node) => node instanceof HTMLElement);
84
- if (!slotElement)
85
- return;
86
- this.targetElement = slotElement.querySelector('[slot="trigger"]');
87
- if (!this.targetElement)
88
- return;
89
- this.targetElement.addEventListener('mousedown', (event) => this.onMouseDown(event));
90
- this.resetTargetPosition();
91
- }
92
- onMouseDown(event) {
93
- const target = event.target;
94
- const parent = target.parentElement;
95
- if (!parent)
96
- return;
97
- const max = {
98
- x: parent.offsetWidth - target.offsetWidth,
99
- y: parent.offsetHeight - target.offsetHeight,
100
- };
101
- const dragStart = {
102
- x: event.clientX,
103
- y: event.clientY,
104
- };
105
- const originalPos = {
106
- x: this.left,
107
- y: this.top,
108
- };
109
- const onMouseMove = (event) => {
110
- const dragDelta = {
111
- x: event.clientX - dragStart.x,
112
- y: event.clientY - dragStart.y,
113
- };
114
- const newPosition = {
115
- x: dragDelta.x + originalPos.x,
116
- y: dragDelta.y + originalPos.y,
117
- };
118
- this.left = Math.min(Math.max(newPosition.x, 0), max.x);
119
- this.top = Math.min(Math.max(newPosition.y, 0), max.y);
120
- Overlay.update();
121
- };
122
- const onMouseUp = () => {
123
- document.removeEventListener('mousemove', onMouseMove);
124
- document.removeEventListener('mouseup', onMouseUp);
125
- };
126
- document.addEventListener('mousemove', onMouseMove);
127
- document.addEventListener('mouseup', onMouseUp);
128
- }
129
- resetTargetPosition() {
130
- if (!this.targetElement)
131
- return;
132
- const target = this.targetElement;
133
- const parent = target.parentElement;
134
- if (!parent)
135
- return;
136
- this.left = (parent.offsetWidth - target.offsetWidth) / 2;
137
- this.top = (parent.offsetHeight - target.offsetHeight) / 2;
138
- }
139
- updated() {
140
- if (this.targetElement) {
141
- this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;
142
- }
143
- }
144
- render() {
145
- return html `
150
+ }
151
+ render() {
152
+ return html`
146
153
  <slot @slotchange=${this.onSlotChange}></slot>
147
154
  `;
148
- }
155
+ }
149
156
  }
150
- __decorate([
151
- property({ type: Number })
152
- ], OverlayDrag.prototype, "top", void 0);
153
- __decorate([
154
- property({ type: Number })
155
- ], OverlayDrag.prototype, "left", void 0);
156
- customElements.define('overlay-drag', OverlayDrag);
157
+ __decorateClass([
158
+ property({ type: Number })
159
+ ], OverlayDrag.prototype, "top", 2);
160
+ __decorateClass([
161
+ property({ type: Number })
162
+ ], OverlayDrag.prototype, "left", 2);
163
+ customElements.define("overlay-drag", OverlayDrag);
157
164
  class RecursivePopover extends LitElement {
158
- constructor() {
159
- super();
160
- this.depth = 0;
161
- this.isShiftTabbing = false;
162
- this.placement = 'right';
163
- this.depth = 0;
164
- this.addEventListener('keydown', (event) => {
165
- const { code } = event;
166
- if (code === 'Enter') {
167
- this.trigger.click();
168
- }
169
- });
170
- this.addEventListener('focusin', this.handleFocusin);
171
- }
172
- static get styles() {
173
- return [
174
- css `
165
+ constructor() {
166
+ super();
167
+ this.depth = 0;
168
+ this.isShiftTabbing = false;
169
+ this.placement = "right";
170
+ this.depth = 0;
171
+ this.addEventListener("keydown", (event) => {
172
+ const { code } = event;
173
+ if (code === "Enter") {
174
+ this.trigger.click();
175
+ }
176
+ });
177
+ this.addEventListener("focusin", this.handleFocusin);
178
+ }
179
+ static get styles() {
180
+ return [
181
+ css`
175
182
  :host {
176
183
  display: block;
177
184
  text-align: center;
@@ -181,40 +188,39 @@ class RecursivePopover extends LitElement {
181
188
  display: inline-flex;
182
189
  margin-top: 11px;
183
190
  }
184
- `,
185
- ];
186
- }
187
- handleFocusin() {
188
- this.focus();
189
- }
190
- focus() {
191
- if (this.shadowRoot.activeElement !== null) {
192
- return;
193
- }
194
- const firstFocusable = this.shadowRoot.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
195
- if (firstFocusable) {
196
- if (firstFocusable.updateComplete) {
197
- firstFocusable.updateComplete.then(() => firstFocusable.focus());
198
- }
199
- else {
200
- firstFocusable.focus();
201
- }
202
- return;
203
- }
204
- super.focus();
191
+ `
192
+ ];
193
+ }
194
+ handleFocusin() {
195
+ this.focus();
196
+ }
197
+ focus() {
198
+ if (this.shadowRoot.activeElement !== null) {
199
+ return;
205
200
  }
206
- onRadioChange(event) {
207
- const target = event.target;
208
- this.placement = target.selected;
201
+ const firstFocusable = this.shadowRoot.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
202
+ if (firstFocusable) {
203
+ if (firstFocusable.updateComplete) {
204
+ firstFocusable.updateComplete.then(() => firstFocusable.focus());
205
+ } else {
206
+ firstFocusable.focus();
207
+ }
208
+ return;
209
209
  }
210
- captureEnter(event) {
211
- const { code } = event;
212
- if (code === 'Enter') {
213
- event.stopPropagation();
214
- }
210
+ super.focus();
211
+ }
212
+ onRadioChange(event) {
213
+ const target = event.target;
214
+ this.placement = target.selected;
215
+ }
216
+ captureEnter(event) {
217
+ const { code } = event;
218
+ if (code === "Enter") {
219
+ event.stopPropagation();
215
220
  }
216
- render() {
217
- return html `
221
+ }
222
+ render() {
223
+ return html`
218
224
  <sp-radio-group
219
225
  horizontal
220
226
  @change=${this.onRadioChange}
@@ -241,35 +247,33 @@ class RecursivePopover extends LitElement {
241
247
  tip
242
248
  open
243
249
  >
244
- ${this.depth < MAX_DEPTH
245
- ? html `
250
+ ${this.depth < MAX_DEPTH ? html`
246
251
  <recursive-popover
247
252
  position="${this.placement}"
248
253
  depth="${this.depth + 1}"
249
254
  tabindex="0"
250
255
  ></recursive-popover>
251
- `
252
- : html `
256
+ ` : html`
253
257
  <div>Maximum Depth</div>
254
258
  `}
255
259
  </sp-popover>
256
260
  </overlay-trigger>
257
261
  `;
258
- }
262
+ }
259
263
  }
260
- __decorate([
261
- property({ type: String })
262
- ], RecursivePopover.prototype, "placement", void 0);
263
- __decorate([
264
- property({ type: Number })
265
- ], RecursivePopover.prototype, "depth", void 0);
266
- __decorate([
267
- query('[slot="trigger"]')
268
- ], RecursivePopover.prototype, "trigger", void 0);
269
- customElements.define('recursive-popover', RecursivePopover);
264
+ __decorateClass([
265
+ property({ type: String })
266
+ ], RecursivePopover.prototype, "placement", 2);
267
+ __decorateClass([
268
+ property({ type: Number })
269
+ ], RecursivePopover.prototype, "depth", 2);
270
+ __decorateClass([
271
+ query('[slot="trigger"]')
272
+ ], RecursivePopover.prototype, "trigger", 2);
273
+ customElements.define("recursive-popover", RecursivePopover);
270
274
  export class PopoverContent extends LitElement {
271
- render() {
272
- return html `
275
+ render() {
276
+ return html`
273
277
  <overlay-trigger>
274
278
  <sp-button slot="trigger">Open me</sp-button>
275
279
  <sp-popover slot="click-content" direction="bottom" dialog>
@@ -280,13 +284,13 @@ export class PopoverContent extends LitElement {
280
284
  </sp-popover>
281
285
  </overlay-trigger>
282
286
  `;
283
- }
287
+ }
284
288
  }
285
- __decorate([
286
- query('[slot="trigger"]')
287
- ], PopoverContent.prototype, "button", void 0);
288
- __decorate([
289
- query('overlay-trigger')
290
- ], PopoverContent.prototype, "trigger", void 0);
291
- customElements.define('popover-content', PopoverContent);
292
- //# sourceMappingURL=overlay-story-components.js.map
289
+ __decorateClass([
290
+ query('[slot="trigger"]')
291
+ ], PopoverContent.prototype, "button", 2);
292
+ __decorateClass([
293
+ query("overlay-trigger")
294
+ ], PopoverContent.prototype, "trigger", 2);
295
+ customElements.define("popover-content", PopoverContent);
296
+ //# sourceMappingURL=overlay-story-components.js.map
@@ -1 +1,7 @@
1
- {"version":3,"file":"overlay-story-components.js","sourceRoot":"","sources":["overlay-story-components.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Overlay, OverlayTrigger, Placement } from '../';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n display: block;\n color: var(--spectrum-global-color-magenta-700);\n width: 64px;\n height: 64px;\n top: 0;\n left: 0;\n }\n `;\n }\n\n public override render(): TemplateResult {\n return html`\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"bullseye\"\n class=\"svg-inline--fa fa-bullseye fa-w-16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 496 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n ></path>\n </svg>\n `;\n }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n @property({ type: Number })\n private top = 100;\n @property({ type: Number })\n private left = 100;\n\n private targetElement: HTMLElement | undefined | null;\n\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n ::slotted(*) {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n }\n\n private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n const slot = event.target as HTMLSlotElement;\n this.targetElement = undefined;\n\n const nodes = slot.assignedNodes();\n const slotElement = nodes.find(\n (node) => node instanceof HTMLElement\n ) as HTMLElement;\n if (!slotElement) return;\n\n this.targetElement = slotElement.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLElement;\n if (!this.targetElement) return;\n\n this.targetElement.addEventListener('mousedown', (event) =>\n this.onMouseDown(event)\n );\n\n this.resetTargetPosition();\n }\n\n private onMouseDown(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n const max = {\n x: parent.offsetWidth - target.offsetWidth,\n y: parent.offsetHeight - target.offsetHeight,\n };\n const dragStart = {\n x: event.clientX,\n y: event.clientY,\n };\n const originalPos = {\n x: this.left,\n y: this.top,\n };\n\n const onMouseMove = (event: MouseEvent): void => {\n const dragDelta = {\n x: event.clientX - dragStart.x,\n y: event.clientY - dragStart.y,\n };\n const newPosition = {\n x: dragDelta.x + originalPos.x,\n y: dragDelta.y + originalPos.y,\n };\n this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n Overlay.update();\n };\n\n const onMouseUp = (): void => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n\n public resetTargetPosition(): void {\n if (!this.targetElement) return;\n const target = this.targetElement as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n }\n\n public override updated(): void {\n if (this.targetElement) {\n this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <slot @slotchange=${this.onSlotChange}></slot>\n `;\n }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n @property({ type: String })\n private placement: Placement;\n\n @property({ type: Number })\n private depth = 0;\n\n @query('[slot=\"trigger\"]')\n private trigger!: Button;\n\n protected isShiftTabbing = false;\n\n public override shadowRoot!: ShadowRoot;\n\n public static override get styles(): CSSResultGroup {\n return [\n css`\n :host {\n display: block;\n text-align: center;\n }\n\n overlay-trigger {\n display: inline-flex;\n margin-top: 11px;\n }\n `,\n ];\n }\n\n public constructor() {\n super();\n this.placement = 'right';\n this.depth = 0;\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n if (code === 'Enter') {\n this.trigger.click();\n }\n });\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin(): void {\n this.focus();\n }\n\n public override focus(): void {\n if (this.shadowRoot.activeElement !== null) {\n return;\n }\n const firstFocusable = this.shadowRoot.querySelector(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as LitElement;\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n } else {\n firstFocusable.focus();\n }\n return;\n }\n super.focus();\n }\n\n public onRadioChange(event: Event): void {\n const target = event.target as RadioGroup;\n this.placement = target.selected as Placement;\n }\n\n private captureEnter(event: KeyboardEvent): void {\n const { code } = event;\n if (code === 'Enter') {\n event.stopPropagation();\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <sp-radio-group\n horizontal\n @change=${this.onRadioChange}\n selected=\"${this.placement}\"\n name=\"group-example\"\n >\n <sp-radio value=\"top\">Top</sp-radio>\n <sp-radio value=\"right\">Right</sp-radio>\n <sp-radio value=\"bottom\">Bottom</sp-radio>\n <sp-radio value=\"left\">Left</sp-radio>\n </sp-radio-group>\n <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"accent\"\n @keydown=${this.captureEnter}\n >\n Open Popover\n </sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n direction=\"${this.placement}\"\n tip\n open\n >\n ${this.depth < MAX_DEPTH\n ? html`\n <recursive-popover\n position=\"${this.placement}\"\n depth=\"${this.depth + 1}\"\n tabindex=\"0\"\n ></recursive-popover>\n `\n : html`\n <div>Maximum Depth</div>\n `}\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n @query('[slot=\"trigger\"]')\n public button!: Button;\n\n @query('overlay-trigger')\n public trigger!: OverlayTrigger;\n\n override render(): TemplateResult {\n return html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Open me</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" dialog>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'popover-content': PopoverContent;\n }\n}\n"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["overlay-story-components.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n Overlay,\n OverlayTrigger,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n display: block;\n color: var(--spectrum-global-color-magenta-700);\n width: 64px;\n height: 64px;\n top: 0;\n left: 0;\n }\n `;\n }\n\n public override render(): TemplateResult {\n return html`\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"bullseye\"\n class=\"svg-inline--fa fa-bullseye fa-w-16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 496 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n ></path>\n </svg>\n `;\n }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n @property({ type: Number })\n private top = 100;\n @property({ type: Number })\n private left = 100;\n\n private targetElement: HTMLElement | undefined | null;\n\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n ::slotted(*) {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n }\n\n private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n const slot = event.target as HTMLSlotElement;\n this.targetElement = undefined;\n\n const nodes = slot.assignedNodes();\n const slotElement = nodes.find(\n (node) => node instanceof HTMLElement\n ) as HTMLElement;\n if (!slotElement) return;\n\n this.targetElement = slotElement.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLElement;\n if (!this.targetElement) return;\n\n this.targetElement.addEventListener('mousedown', (event) =>\n this.onMouseDown(event)\n );\n\n this.resetTargetPosition();\n }\n\n private onMouseDown(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n const max = {\n x: parent.offsetWidth - target.offsetWidth,\n y: parent.offsetHeight - target.offsetHeight,\n };\n const dragStart = {\n x: event.clientX,\n y: event.clientY,\n };\n const originalPos = {\n x: this.left,\n y: this.top,\n };\n\n const onMouseMove = (event: MouseEvent): void => {\n const dragDelta = {\n x: event.clientX - dragStart.x,\n y: event.clientY - dragStart.y,\n };\n const newPosition = {\n x: dragDelta.x + originalPos.x,\n y: dragDelta.y + originalPos.y,\n };\n this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n Overlay.update();\n };\n\n const onMouseUp = (): void => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n\n public resetTargetPosition(): void {\n if (!this.targetElement) return;\n const target = this.targetElement as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n }\n\n public override updated(): void {\n if (this.targetElement) {\n this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <slot @slotchange=${this.onSlotChange}></slot>\n `;\n }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n @property({ type: String })\n private placement: Placement;\n\n @property({ type: Number })\n private depth = 0;\n\n @query('[slot=\"trigger\"]')\n private trigger!: Button;\n\n protected isShiftTabbing = false;\n\n public override shadowRoot!: ShadowRoot;\n\n public static override get styles(): CSSResultGroup {\n return [\n css`\n :host {\n display: block;\n text-align: center;\n }\n\n overlay-trigger {\n display: inline-flex;\n margin-top: 11px;\n }\n `,\n ];\n }\n\n public constructor() {\n super();\n this.placement = 'right';\n this.depth = 0;\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n if (code === 'Enter') {\n this.trigger.click();\n }\n });\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin(): void {\n this.focus();\n }\n\n public override focus(): void {\n if (this.shadowRoot.activeElement !== null) {\n return;\n }\n const firstFocusable = this.shadowRoot.querySelector(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as LitElement;\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n } else {\n firstFocusable.focus();\n }\n return;\n }\n super.focus();\n }\n\n public onRadioChange(event: Event): void {\n const target = event.target as RadioGroup;\n this.placement = target.selected as Placement;\n }\n\n private captureEnter(event: KeyboardEvent): void {\n const { code } = event;\n if (code === 'Enter') {\n event.stopPropagation();\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <sp-radio-group\n horizontal\n @change=${this.onRadioChange}\n selected=\"${this.placement}\"\n name=\"group-example\"\n >\n <sp-radio value=\"top\">Top</sp-radio>\n <sp-radio value=\"right\">Right</sp-radio>\n <sp-radio value=\"bottom\">Bottom</sp-radio>\n <sp-radio value=\"left\">Left</sp-radio>\n </sp-radio-group>\n <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"accent\"\n @keydown=${this.captureEnter}\n >\n Open Popover\n </sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n direction=\"${this.placement}\"\n tip\n open\n >\n ${this.depth < MAX_DEPTH\n ? html`\n <recursive-popover\n position=\"${this.placement}\"\n depth=\"${this.depth + 1}\"\n tabindex=\"0\"\n ></recursive-popover>\n `\n : html`\n <div>Maximum Depth</div>\n `}\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n @query('[slot=\"trigger\"]')\n public button!: Button;\n\n @query('overlay-trigger')\n public trigger!: OverlayTrigger;\n\n override render(): TemplateResult {\n return html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Open me</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" dialog>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'popover-content': PopoverContent;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }