@spectrum-web-components/overlay 0.18.0 → 0.18.2

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 (92) hide show
  1. package/active-overlay.dev.js +1 -0
  2. package/active-overlay.dev.js.map +1 -1
  3. package/active-overlay.js +1 -1
  4. package/active-overlay.js.map +2 -2
  5. package/overlay-trigger.dev.js +1 -0
  6. package/overlay-trigger.dev.js.map +1 -1
  7. package/overlay-trigger.js +1 -1
  8. package/overlay-trigger.js.map +2 -2
  9. package/package.json +4 -4
  10. package/src/ActiveOverlay.dev.js +60 -24
  11. package/src/ActiveOverlay.dev.js.map +3 -3
  12. package/src/ActiveOverlay.js +3 -3
  13. package/src/ActiveOverlay.js.map +3 -3
  14. package/src/OverlayTrigger.dev.js +51 -18
  15. package/src/OverlayTrigger.dev.js.map +1 -1
  16. package/src/OverlayTrigger.js +2 -2
  17. package/src/OverlayTrigger.js.map +2 -2
  18. package/src/VirtualTrigger.dev.js +1 -0
  19. package/src/VirtualTrigger.dev.js.map +1 -1
  20. package/src/VirtualTrigger.js +1 -1
  21. package/src/VirtualTrigger.js.map +2 -2
  22. package/src/active-overlay.css.dev.js +1 -0
  23. package/src/active-overlay.css.dev.js.map +1 -1
  24. package/src/active-overlay.css.js +1 -1
  25. package/src/active-overlay.css.js.map +2 -2
  26. package/src/index.dev.js +1 -0
  27. package/src/index.dev.js.map +1 -1
  28. package/src/index.js +1 -1
  29. package/src/index.js.map +1 -1
  30. package/src/loader.dev.js +1 -0
  31. package/src/loader.dev.js.map +1 -1
  32. package/src/loader.js +1 -1
  33. package/src/loader.js.map +2 -2
  34. package/src/overlay-events.dev.js +1 -0
  35. package/src/overlay-events.dev.js.map +1 -1
  36. package/src/overlay-events.js +1 -1
  37. package/src/overlay-events.js.map +2 -2
  38. package/src/overlay-stack.d.ts +1 -1
  39. package/src/overlay-stack.dev.js +97 -46
  40. package/src/overlay-stack.dev.js.map +3 -3
  41. package/src/overlay-stack.js +2 -2
  42. package/src/overlay-stack.js.map +3 -3
  43. package/src/overlay-timer.dev.js +1 -0
  44. package/src/overlay-timer.dev.js.map +1 -1
  45. package/src/overlay-timer.js +1 -1
  46. package/src/overlay-timer.js.map +2 -2
  47. package/src/overlay-trigger.css.dev.js +1 -0
  48. package/src/overlay-trigger.css.dev.js.map +1 -1
  49. package/src/overlay-trigger.css.js +1 -1
  50. package/src/overlay-trigger.css.js.map +2 -2
  51. package/src/overlay-types.dev.js +1 -0
  52. package/src/overlay-types.js +1 -0
  53. package/src/overlay-utils.dev.js +4 -1
  54. package/src/overlay-utils.dev.js.map +1 -1
  55. package/src/overlay-utils.js +1 -1
  56. package/src/overlay-utils.js.map +2 -2
  57. package/src/overlay.dev.js +1 -0
  58. package/src/overlay.dev.js.map +1 -1
  59. package/src/overlay.js +1 -1
  60. package/src/overlay.js.map +2 -2
  61. package/stories/overlay-story-components.js +219 -11
  62. package/stories/overlay-story-components.js.map +2 -2
  63. package/stories/overlay.stories.js +354 -55
  64. package/stories/overlay.stories.js.map +1 -1
  65. package/sync/overlay-trigger.dev.js +1 -0
  66. package/sync/overlay-trigger.dev.js.map +1 -1
  67. package/sync/overlay-trigger.js +1 -1
  68. package/sync/overlay-trigger.js.map +2 -2
  69. package/test/benchmark/basic-test.js +10 -2
  70. package/test/benchmark/basic-test.js.map +1 -1
  71. package/test/overlay-lifecycle.test.js +149 -6
  72. package/test/overlay-lifecycle.test.js.map +1 -1
  73. package/test/overlay-timer.test.js +117 -1
  74. package/test/overlay-timer.test.js.map +2 -2
  75. package/test/overlay-trigger-click.test.js +66 -7
  76. package/test/overlay-trigger-click.test.js.map +1 -1
  77. package/test/overlay-trigger-extended.test.js +187 -4
  78. package/test/overlay-trigger-extended.test.js.map +1 -1
  79. package/test/overlay-trigger-hover-click.test.js +68 -3
  80. package/test/overlay-trigger-hover-click.test.js.map +1 -1
  81. package/test/overlay-trigger-hover.test.js +172 -7
  82. package/test/overlay-trigger-hover.test.js.map +2 -2
  83. package/test/overlay-trigger-longpress.test.js +233 -9
  84. package/test/overlay-trigger-longpress.test.js.map +2 -2
  85. package/test/overlay-trigger-sync.test.js +536 -4
  86. package/test/overlay-trigger-sync.test.js.map +2 -2
  87. package/test/overlay-trigger.test.js +536 -4
  88. package/test/overlay-trigger.test.js.map +2 -2
  89. package/test/overlay.test-vrt.js +4 -1
  90. package/test/overlay.test-vrt.js.map +1 -1
  91. package/test/overlay.test.js +565 -11
  92. package/test/overlay.test.js.map +1 -1
@@ -1,4 +1,36 @@
1
- var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i)=>{for(var o=i>1?void 0:i?x(e,t):e,r=n.length-1,a;r>=0;r--)(a=n[r])&&(o=(i?a(e,t,o):a(o))||o);return i&&o&&b(e,t,o),o};import{css as u,html as l,LitElement as p}from"@spectrum-web-components/base";import{property as d,query as m}from"@spectrum-web-components/base/src/decorators.js";import{Overlay as T}from"@spectrum-web-components/overlay";import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-components/popover/sp-popover.js";import"@spectrum-web-components/radio/sp-radio.js";import"@spectrum-web-components/radio/sp-radio-group.js";import"@spectrum-web-components/overlay/overlay-trigger.js";const M=7;class w extends p{static get styles(){return u`
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)
10
+ __defProp(target, key, result);
11
+ return result;
12
+ };
13
+ import {
14
+ css,
15
+ html,
16
+ LitElement
17
+ } from "@spectrum-web-components/base";
18
+ import {
19
+ property,
20
+ query
21
+ } from "@spectrum-web-components/base/src/decorators.js";
22
+ import {
23
+ Overlay
24
+ } from "@spectrum-web-components/overlay";
25
+ import "@spectrum-web-components/button/sp-button.js";
26
+ import "@spectrum-web-components/popover/sp-popover.js";
27
+ import "@spectrum-web-components/radio/sp-radio.js";
28
+ import "@spectrum-web-components/radio/sp-radio-group.js";
29
+ import "@spectrum-web-components/overlay/overlay-trigger.js";
30
+ const MAX_DEPTH = 7;
31
+ class OverlayTargetIcon extends LitElement {
32
+ static get styles() {
33
+ return css`
2
34
  :host {
3
35
  position: absolute;
4
36
  display: block;
@@ -8,7 +40,10 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
8
40
  top: 0;
9
41
  left: 0;
10
42
  }
11
- `}render(){return l`
43
+ `;
44
+ }
45
+ render() {
46
+ return html`
12
47
  <svg
13
48
  aria-hidden="true"
14
49
  focusable="false"
@@ -23,7 +58,18 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
23
58
  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"
24
59
  ></path>
25
60
  </svg>
26
- `}}customElements.define("overlay-target-icon",w);class h extends p{constructor(){super(...arguments);this.top=100;this.left=100}static get styles(){return u`
61
+ `;
62
+ }
63
+ }
64
+ customElements.define("overlay-target-icon", OverlayTargetIcon);
65
+ class OverlayDrag extends LitElement {
66
+ constructor() {
67
+ super(...arguments);
68
+ this.top = 100;
69
+ this.left = 100;
70
+ }
71
+ static get styles() {
72
+ return css`
27
73
  :host {
28
74
  display: block;
29
75
  width: 100%;
@@ -36,9 +82,111 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
36
82
  width: 100%;
37
83
  height: 100%;
38
84
  }
39
- `}onSlotChange(e){const t=e.target;this.targetElement=void 0;const o=t.assignedNodes().find(r=>r instanceof HTMLElement);!o||(this.targetElement=o.querySelector('[slot="trigger"]'),this.targetElement&&(this.targetElement.addEventListener("mousedown",r=>this.onMouseDown(r)),this.resetTargetPosition()))}onMouseDown(e){const t=e.target,i=t.parentElement;if(!i)return;const o={x:i.offsetWidth-t.offsetWidth,y:i.offsetHeight-t.offsetHeight},r={x:e.clientX,y:e.clientY},a={x:this.left,y:this.top},g=f=>{const E={x:f.clientX-r.x,y:f.clientY-r.y},y={x:E.x+a.x,y:E.y+a.y};this.left=Math.min(Math.max(y.x,0),o.x),this.top=Math.min(Math.max(y.y,0),o.y),T.update()},v=()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",v)};document.addEventListener("mousemove",g),document.addEventListener("mouseup",v)}resetTargetPosition(){if(!this.targetElement)return;const e=this.targetElement,t=e.parentElement;!t||(this.left=(t.offsetWidth-e.offsetWidth)/2,this.top=(t.offsetHeight-e.offsetHeight)/2)}updated(){this.targetElement&&(this.targetElement.style.transform=`translate(${this.left}px, ${this.top}px)`)}render(){return l`
85
+ `;
86
+ }
87
+ onSlotChange(event) {
88
+ const slot = event.target;
89
+ this.targetElement = void 0;
90
+ const nodes = slot.assignedNodes();
91
+ const slotElement = nodes.find(
92
+ (node) => node instanceof HTMLElement
93
+ );
94
+ if (!slotElement)
95
+ return;
96
+ this.targetElement = slotElement.querySelector(
97
+ '[slot="trigger"]'
98
+ );
99
+ if (!this.targetElement)
100
+ return;
101
+ this.targetElement.addEventListener(
102
+ "mousedown",
103
+ (event2) => this.onMouseDown(event2)
104
+ );
105
+ this.resetTargetPosition();
106
+ }
107
+ onMouseDown(event) {
108
+ const target = event.target;
109
+ const parent = target.parentElement;
110
+ if (!parent)
111
+ return;
112
+ const max = {
113
+ x: parent.offsetWidth - target.offsetWidth,
114
+ y: parent.offsetHeight - target.offsetHeight
115
+ };
116
+ const dragStart = {
117
+ x: event.clientX,
118
+ y: event.clientY
119
+ };
120
+ const originalPos = {
121
+ x: this.left,
122
+ y: this.top
123
+ };
124
+ const onMouseMove = (event2) => {
125
+ const dragDelta = {
126
+ x: event2.clientX - dragStart.x,
127
+ y: event2.clientY - dragStart.y
128
+ };
129
+ const newPosition = {
130
+ x: dragDelta.x + originalPos.x,
131
+ y: dragDelta.y + originalPos.y
132
+ };
133
+ this.left = Math.min(Math.max(newPosition.x, 0), max.x);
134
+ this.top = Math.min(Math.max(newPosition.y, 0), max.y);
135
+ Overlay.update();
136
+ };
137
+ const onMouseUp = () => {
138
+ document.removeEventListener("mousemove", onMouseMove);
139
+ document.removeEventListener("mouseup", onMouseUp);
140
+ };
141
+ document.addEventListener("mousemove", onMouseMove);
142
+ document.addEventListener("mouseup", onMouseUp);
143
+ }
144
+ resetTargetPosition() {
145
+ if (!this.targetElement)
146
+ return;
147
+ const target = this.targetElement;
148
+ const parent = target.parentElement;
149
+ if (!parent)
150
+ return;
151
+ this.left = (parent.offsetWidth - target.offsetWidth) / 2;
152
+ this.top = (parent.offsetHeight - target.offsetHeight) / 2;
153
+ }
154
+ updated() {
155
+ if (this.targetElement) {
156
+ this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;
157
+ }
158
+ }
159
+ render() {
160
+ return html`
40
161
  <slot @slotchange=${this.onSlotChange}></slot>
41
- `}}s([d({type:Number})],h.prototype,"top",2),s([d({type:Number})],h.prototype,"left",2),customElements.define("overlay-drag",h);class c extends p{constructor(){super();this.depth=0;this.isShiftTabbing=!1;this.placement="right",this.depth=0,this.addEventListener("keydown",e=>{const{code:t}=e;t==="Enter"&&this.trigger.click()}),this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[u`
162
+ `;
163
+ }
164
+ }
165
+ __decorateClass([
166
+ property({ type: Number })
167
+ ], OverlayDrag.prototype, "top", 2);
168
+ __decorateClass([
169
+ property({ type: Number })
170
+ ], OverlayDrag.prototype, "left", 2);
171
+ customElements.define("overlay-drag", OverlayDrag);
172
+ class RecursivePopover extends LitElement {
173
+ constructor() {
174
+ super();
175
+ this.depth = 0;
176
+ this.isShiftTabbing = false;
177
+ this.placement = "right";
178
+ this.depth = 0;
179
+ this.addEventListener("keydown", (event) => {
180
+ const { code } = event;
181
+ if (code === "Enter") {
182
+ this.trigger.click();
183
+ }
184
+ });
185
+ this.addEventListener("focusin", this.handleFocusin);
186
+ }
187
+ static get styles() {
188
+ return [
189
+ css`
42
190
  :host {
43
191
  display: block;
44
192
  text-align: center;
@@ -48,7 +196,43 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
48
196
  display: inline-flex;
49
197
  margin-top: 11px;
50
198
  }
51
- `]}handleFocusin(){this.focus()}focus(){if(this.shadowRoot.activeElement!==null)return;const e=this.shadowRoot.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(e){e.updateComplete?e.updateComplete.then(()=>e.focus()):e.focus();return}super.focus()}onRadioChange(e){const t=e.target;this.placement=t.selected}captureEnter(e){const{code:t}=e;t==="Enter"&&e.stopPropagation()}render(){return l`
199
+ `
200
+ ];
201
+ }
202
+ handleFocusin() {
203
+ this.focus();
204
+ }
205
+ focus() {
206
+ if (this.shadowRoot.activeElement !== null) {
207
+ return;
208
+ }
209
+ const firstFocusable = this.shadowRoot.querySelector(
210
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
211
+ );
212
+ if (firstFocusable) {
213
+ if (firstFocusable.updateComplete) {
214
+ firstFocusable.updateComplete.then(
215
+ () => firstFocusable.focus()
216
+ );
217
+ } else {
218
+ firstFocusable.focus();
219
+ }
220
+ return;
221
+ }
222
+ super.focus();
223
+ }
224
+ onRadioChange(event) {
225
+ const target = event.target;
226
+ this.placement = target.selected;
227
+ }
228
+ captureEnter(event) {
229
+ const { code } = event;
230
+ if (code === "Enter") {
231
+ event.stopPropagation();
232
+ }
233
+ }
234
+ render() {
235
+ return html`
52
236
  <sp-radio-group
53
237
  horizontal
54
238
  @change=${this.onRadioChange}
@@ -75,18 +259,33 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
75
259
  tip
76
260
  open
77
261
  >
78
- ${this.depth<M?l`
262
+ ${this.depth < MAX_DEPTH ? html`
79
263
  <recursive-popover
80
264
  position="${this.placement}"
81
- depth="${this.depth+1}"
265
+ depth="${this.depth + 1}"
82
266
  tabindex="0"
83
267
  ></recursive-popover>
84
- `:l`
268
+ ` : html`
85
269
  <div>Maximum Depth</div>
86
270
  `}
87
271
  </sp-popover>
88
272
  </overlay-trigger>
89
- `}}s([d({type:String})],c.prototype,"placement",2),s([d({type:Number})],c.prototype,"depth",2),s([m('[slot="trigger"]')],c.prototype,"trigger",2),customElements.define("recursive-popover",c);export class PopoverContent extends p{render(){return l`
273
+ `;
274
+ }
275
+ }
276
+ __decorateClass([
277
+ property({ type: String })
278
+ ], RecursivePopover.prototype, "placement", 2);
279
+ __decorateClass([
280
+ property({ type: Number })
281
+ ], RecursivePopover.prototype, "depth", 2);
282
+ __decorateClass([
283
+ query('[slot="trigger"]')
284
+ ], RecursivePopover.prototype, "trigger", 2);
285
+ customElements.define("recursive-popover", RecursivePopover);
286
+ export class PopoverContent extends LitElement {
287
+ render() {
288
+ return html`
90
289
  <overlay-trigger>
91
290
  <sp-button slot="trigger">Open me</sp-button>
92
291
  <sp-popover slot="click-content" direction="bottom" dialog>
@@ -96,5 +295,14 @@ var b=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var s=(n,e,t,i
96
295
  <p>This is all the content.</p>
97
296
  </sp-popover>
98
297
  </overlay-trigger>
99
- `}}s([m('[slot="trigger"]')],PopoverContent.prototype,"button",2),s([m("overlay-trigger")],PopoverContent.prototype,"trigger",2),customElements.define("popover-content",PopoverContent);
298
+ `;
299
+ }
300
+ }
301
+ __decorateClass([
302
+ query('[slot="trigger"]')
303
+ ], PopoverContent.prototype, "button", 2);
304
+ __decorateClass([
305
+ query("overlay-trigger")
306
+ ], PopoverContent.prototype, "trigger", 2);
307
+ customElements.define("popover-content", PopoverContent);
100
308
  //# sourceMappingURL=overlay-story-components.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["overlay-story-components.ts"],
4
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": []
5
+ "mappings": "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",
6
+ "names": ["event"]
7
7
  }