@planningcenter/tapestry 1.1.0-rc.6 → 1.1.0-rc.8

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 (27) hide show
  1. package/README.md +12 -6
  2. package/dist/components/sidenav/index.js +2 -0
  3. package/dist/components/sidenav/index.js.map +1 -1
  4. package/dist/index.css +50 -11
  5. package/dist/index.css.map +1 -1
  6. package/dist/packages/tapestry-wc/dist/components/popover-container.js +723 -0
  7. package/dist/packages/tapestry-wc/dist/components/popover-container.js.map +1 -0
  8. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js +63 -0
  9. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js.map +1 -0
  10. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js +93 -0
  11. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js.map +1 -0
  12. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +1 -1
  13. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  14. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +10 -4
  15. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  16. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +63 -0
  17. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -0
  18. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +2 -2
  19. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +18 -4
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  22. package/dist/unstable.css +50 -11
  23. package/dist/unstable.css.map +1 -1
  24. package/dist/webComponents.css +50 -11
  25. package/dist/webComponents.css.map +1 -1
  26. package/package.json +3 -3
  27. package/react-types/index.d.ts +29 -1
@@ -0,0 +1,723 @@
1
+ import { proxyCustomElement, H, h, Host } from './../../../../ext/@stencil/core/internal/client/index.js';
2
+
3
+ /*!
4
+ * Planning Center Tapestry Web Components
5
+ * Version: 1.1.0-rc.7
6
+ */
7
+
8
+ // src/events.ts
9
+ var ToggleEvent = class extends Event {
10
+ oldState;
11
+ newState;
12
+ constructor(type, { oldState = "", newState = "", ...init } = {}) {
13
+ super(type, init);
14
+ this.oldState = String(oldState || "");
15
+ this.newState = String(newState || "");
16
+ }
17
+ };
18
+ var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
19
+ function queuePopoverToggleEventTask(element, oldState, newState) {
20
+ popoverToggleTaskQueue.set(
21
+ element,
22
+ setTimeout(() => {
23
+ if (!popoverToggleTaskQueue.has(element)) return;
24
+ element.dispatchEvent(
25
+ new ToggleEvent("toggle", {
26
+ cancelable: false,
27
+ oldState,
28
+ newState
29
+ })
30
+ );
31
+ }, 0)
32
+ );
33
+ }
34
+
35
+ // src/popover-helpers.ts
36
+ var ShadowRoot = globalThis.ShadowRoot || function() {
37
+ };
38
+ var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
39
+ };
40
+ var topLayerElements = /* @__PURE__ */ new WeakMap();
41
+ var autoPopoverList = /* @__PURE__ */ new WeakMap();
42
+ var visibilityState = /* @__PURE__ */ new WeakMap();
43
+ function getPopoverVisibilityState(popover) {
44
+ return visibilityState.get(popover) || "hidden";
45
+ }
46
+ var popoverInvoker = /* @__PURE__ */ new WeakMap();
47
+ function popoverTargetAttributeActivationBehavior(element) {
48
+ const popover = element.popoverTargetElement;
49
+ if (!(popover instanceof HTMLElement)) {
50
+ return;
51
+ }
52
+ const visibility = getPopoverVisibilityState(popover);
53
+ if (element.popoverTargetAction === "show" && visibility === "showing") {
54
+ return;
55
+ }
56
+ if (element.popoverTargetAction === "hide" && visibility === "hidden") return;
57
+ if (visibility === "showing") {
58
+ hidePopover(popover, true, true);
59
+ } else if (checkPopoverValidity(popover, false)) {
60
+ popoverInvoker.set(popover, element);
61
+ showPopover(popover);
62
+ }
63
+ }
64
+ function checkPopoverValidity(element, expectedToBeShowing) {
65
+ if (element.popover !== "auto" && element.popover !== "manual") {
66
+ return false;
67
+ }
68
+ if (!element.isConnected) return false;
69
+ if (expectedToBeShowing && getPopoverVisibilityState(element) !== "showing") {
70
+ return false;
71
+ }
72
+ if (!expectedToBeShowing && getPopoverVisibilityState(element) !== "hidden") {
73
+ return false;
74
+ }
75
+ if (element instanceof HTMLDialogElement && element.hasAttribute("open")) {
76
+ return false;
77
+ }
78
+ if (document.fullscreenElement === element) return false;
79
+ return true;
80
+ }
81
+ function getStackPosition(popover) {
82
+ if (!popover) return 0;
83
+ return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
84
+ popover
85
+ ) + 1;
86
+ }
87
+ function topMostClickedPopover(target) {
88
+ const clickedPopover = nearestInclusiveOpenPopover(target);
89
+ const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
90
+ if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
91
+ return clickedPopover;
92
+ }
93
+ return invokerPopover;
94
+ }
95
+ function topMostAutoPopover(document2) {
96
+ const documentPopovers = autoPopoverList.get(document2);
97
+ for (const popover of documentPopovers || []) {
98
+ if (!popover.isConnected) {
99
+ documentPopovers.delete(popover);
100
+ } else {
101
+ return popover;
102
+ }
103
+ }
104
+ return null;
105
+ }
106
+ function getRootNode(node) {
107
+ if (typeof node.getRootNode === "function") {
108
+ return node.getRootNode();
109
+ }
110
+ if (node.parentNode) return getRootNode(node.parentNode);
111
+ return node;
112
+ }
113
+ function nearestInclusiveOpenPopover(node) {
114
+ while (node) {
115
+ if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
116
+ return node;
117
+ }
118
+ node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
119
+ if (node instanceof ShadowRoot) node = node.host;
120
+ if (node instanceof Document) return;
121
+ }
122
+ }
123
+ function nearestInclusiveTargetPopoverForInvoker(node) {
124
+ while (node) {
125
+ const nodePopover = node.popoverTargetElement;
126
+ if (nodePopover instanceof HTMLElement) return nodePopover;
127
+ node = node.parentElement || getRootNode(node);
128
+ if (node instanceof ShadowRoot) node = node.host;
129
+ if (node instanceof Document) return;
130
+ }
131
+ }
132
+ function topMostPopoverAncestor(newPopover) {
133
+ const popoverPositions = /* @__PURE__ */ new Map();
134
+ let i = 0;
135
+ for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
136
+ popoverPositions.set(popover, i);
137
+ i += 1;
138
+ }
139
+ popoverPositions.set(newPopover, i);
140
+ i += 1;
141
+ let topMostPopoverAncestor2 = null;
142
+ function checkAncestor(candidate) {
143
+ const candidateAncestor = nearestInclusiveOpenPopover(candidate);
144
+ if (candidateAncestor === null) return null;
145
+ const candidatePosition = popoverPositions.get(candidateAncestor);
146
+ if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) {
147
+ topMostPopoverAncestor2 = candidateAncestor;
148
+ }
149
+ }
150
+ checkAncestor(newPopover.parentElement || getRootNode(newPopover));
151
+ return topMostPopoverAncestor2;
152
+ }
153
+ function isFocusable(focusTarget) {
154
+ if (focusTarget.hidden || focusTarget instanceof ShadowRoot) return false;
155
+ if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
156
+ if (focusTarget.disabled) return false;
157
+ }
158
+ if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
159
+ return false;
160
+ }
161
+ if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
162
+ return false;
163
+ }
164
+ return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
165
+ }
166
+ function focusDelegate(focusTarget) {
167
+ if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
168
+ return null;
169
+ }
170
+ let whereToLook = focusTarget;
171
+ if (whereToLook.shadowRoot) {
172
+ whereToLook = whereToLook.shadowRoot;
173
+ }
174
+ let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
175
+ if (autoFocusDelegate) {
176
+ return autoFocusDelegate;
177
+ } else {
178
+ const slots = whereToLook.querySelectorAll("slot");
179
+ for (const slot of slots) {
180
+ const assignedElements = slot.assignedElements({ flatten: true });
181
+ for (const el of assignedElements) {
182
+ if (el.hasAttribute("autofocus")) {
183
+ return el;
184
+ } else {
185
+ autoFocusDelegate = el.querySelector("[autofocus]");
186
+ if (autoFocusDelegate) {
187
+ return autoFocusDelegate;
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ const walker = focusTarget.ownerDocument.createTreeWalker(
194
+ whereToLook,
195
+ NodeFilter.SHOW_ELEMENT
196
+ );
197
+ let descendant = walker.currentNode;
198
+ while (descendant) {
199
+ if (isFocusable(descendant)) {
200
+ return descendant;
201
+ }
202
+ descendant = walker.nextNode();
203
+ }
204
+ }
205
+ function popoverFocusingSteps(subject) {
206
+ focusDelegate(subject)?.focus();
207
+ }
208
+ var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
209
+ function showPopover(element) {
210
+ if (!checkPopoverValidity(element, false)) {
211
+ return;
212
+ }
213
+ const document2 = element.ownerDocument;
214
+ if (!element.dispatchEvent(
215
+ new ToggleEvent("beforetoggle", {
216
+ cancelable: true,
217
+ oldState: "closed",
218
+ newState: "open"
219
+ })
220
+ )) {
221
+ return;
222
+ }
223
+ if (!checkPopoverValidity(element, false)) {
224
+ return;
225
+ }
226
+ let shouldRestoreFocus = false;
227
+ if (element.popover === "auto") {
228
+ const originalType = element.getAttribute("popover");
229
+ const ancestor = topMostPopoverAncestor(element) || document2;
230
+ hideAllPopoversUntil(ancestor, false, true);
231
+ if (originalType !== element.getAttribute("popover") || !checkPopoverValidity(element, false)) {
232
+ return;
233
+ }
234
+ }
235
+ if (!topMostAutoPopover(document2)) {
236
+ shouldRestoreFocus = true;
237
+ }
238
+ previouslyFocusedElements.delete(element);
239
+ const originallyFocusedElement = document2.activeElement;
240
+ element.classList.add(":popover-open");
241
+ visibilityState.set(element, "showing");
242
+ if (!topLayerElements.has(document2)) {
243
+ topLayerElements.set(document2, /* @__PURE__ */ new Set());
244
+ }
245
+ topLayerElements.get(document2).add(element);
246
+ popoverFocusingSteps(element);
247
+ if (element.popover === "auto") {
248
+ if (!autoPopoverList.has(document2)) {
249
+ autoPopoverList.set(document2, /* @__PURE__ */ new Set());
250
+ }
251
+ autoPopoverList.get(document2).add(element);
252
+ setInvokerAriaExpanded(popoverInvoker.get(element), true);
253
+ }
254
+ if (shouldRestoreFocus && originallyFocusedElement && element.popover === "auto") {
255
+ previouslyFocusedElements.set(element, originallyFocusedElement);
256
+ }
257
+ queuePopoverToggleEventTask(element, "closed", "open");
258
+ }
259
+ function hidePopover(element, focusPreviousElement = false, fireEvents = false) {
260
+ if (!checkPopoverValidity(element, true)) {
261
+ return;
262
+ }
263
+ const document2 = element.ownerDocument;
264
+ if (element.popover === "auto") {
265
+ hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
266
+ if (!checkPopoverValidity(element, true)) {
267
+ return;
268
+ }
269
+ }
270
+ setInvokerAriaExpanded(popoverInvoker.get(element), false);
271
+ popoverInvoker.delete(element);
272
+ if (fireEvents) {
273
+ element.dispatchEvent(
274
+ new ToggleEvent("beforetoggle", {
275
+ oldState: "open",
276
+ newState: "closed"
277
+ })
278
+ );
279
+ if (!checkPopoverValidity(element, true)) {
280
+ return;
281
+ }
282
+ }
283
+ topLayerElements.get(document2)?.delete(element);
284
+ autoPopoverList.get(document2)?.delete(element);
285
+ element.classList.remove(":popover-open");
286
+ visibilityState.set(element, "hidden");
287
+ if (fireEvents) {
288
+ queuePopoverToggleEventTask(element, "open", "closed");
289
+ }
290
+ const previouslyFocusedElement = previouslyFocusedElements.get(element);
291
+ if (previouslyFocusedElement) {
292
+ previouslyFocusedElements.delete(element);
293
+ if (focusPreviousElement) {
294
+ previouslyFocusedElement.focus();
295
+ }
296
+ }
297
+ }
298
+ function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
299
+ let popover = topMostAutoPopover(document2);
300
+ while (popover) {
301
+ hidePopover(popover, focusPreviousElement, fireEvents);
302
+ popover = topMostAutoPopover(document2);
303
+ }
304
+ }
305
+ function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
306
+ const document2 = endpoint.ownerDocument || endpoint;
307
+ if (endpoint instanceof Document) {
308
+ return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
309
+ }
310
+ let lastToHide = null;
311
+ let foundEndpoint = false;
312
+ for (const popover of autoPopoverList.get(document2) || []) {
313
+ if (popover === endpoint) {
314
+ foundEndpoint = true;
315
+ } else if (foundEndpoint) {
316
+ lastToHide = popover;
317
+ break;
318
+ }
319
+ }
320
+ if (!foundEndpoint) {
321
+ return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
322
+ }
323
+ while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
324
+ hidePopover(lastToHide, focusPreviousElement, fireEvents);
325
+ }
326
+ }
327
+ var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
328
+ function lightDismissOpenPopovers(event) {
329
+ if (!event.isTrusted) return;
330
+ const target = event.composedPath()[0];
331
+ if (!target) return;
332
+ const document2 = target.ownerDocument;
333
+ const topMostPopover = topMostAutoPopover(document2);
334
+ if (!topMostPopover) return;
335
+ const ancestor = topMostClickedPopover(target);
336
+ if (ancestor && event.type === "pointerdown") {
337
+ popoverPointerDownTargets.set(document2, ancestor);
338
+ } else if (event.type === "pointerup") {
339
+ const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
340
+ popoverPointerDownTargets.delete(document2);
341
+ if (sameTarget) {
342
+ hideAllPopoversUntil(ancestor || document2, false, true);
343
+ }
344
+ }
345
+ }
346
+ var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
347
+ function setInvokerAriaExpanded(el, force = false) {
348
+ if (!el) return;
349
+ if (!initialAriaExpandedValue.has(el)) {
350
+ initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
351
+ }
352
+ const popover = el.popoverTargetElement;
353
+ if (popover instanceof HTMLElement && popover.popover === "auto") {
354
+ el.setAttribute("aria-expanded", String(force));
355
+ } else {
356
+ const initialValue = initialAriaExpandedValue.get(el);
357
+ if (!initialValue) {
358
+ el.removeAttribute("aria-expanded");
359
+ } else {
360
+ el.setAttribute("aria-expanded", initialValue);
361
+ }
362
+ }
363
+ }
364
+
365
+ // src/popover.ts
366
+ var ShadowRoot2 = globalThis.ShadowRoot || function() {
367
+ };
368
+ function isSupported() {
369
+ return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
370
+ }
371
+ function patchSelectorFn(object, name, mapper) {
372
+ const original = object[name];
373
+ Object.defineProperty(object, name, {
374
+ value(selector) {
375
+ return original.call(this, mapper(selector));
376
+ }
377
+ });
378
+ }
379
+ var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
380
+ function hasLayerSupport() {
381
+ return typeof globalThis.CSSLayerBlockRule === "function";
382
+ }
383
+ function getStyles() {
384
+ const useLayer = hasLayerSupport();
385
+ return `
386
+ ${useLayer ? "@layer popover-polyfill {" : ""}
387
+ :where([popover]) {
388
+ position: fixed;
389
+ z-index: 2147483647;
390
+ inset: 0;
391
+ padding: 0.25em;
392
+ width: fit-content;
393
+ height: fit-content;
394
+ border-width: initial;
395
+ border-color: initial;
396
+ border-image: initial;
397
+ border-style: solid;
398
+ background-color: canvas;
399
+ color: canvastext;
400
+ overflow: auto;
401
+ margin: auto;
402
+ }
403
+
404
+ :where([popover]:not(.\\:popover-open)) {
405
+ display: none;
406
+ }
407
+
408
+ :where(dialog[popover].\\:popover-open) {
409
+ display: block;
410
+ }
411
+
412
+ :where(dialog[popover][open]) {
413
+ display: revert;
414
+ }
415
+
416
+ :where([anchor].\\:popover-open) {
417
+ inset: auto;
418
+ }
419
+
420
+ :where([anchor]:popover-open) {
421
+ inset: auto;
422
+ }
423
+
424
+ @supports not (background-color: canvas) {
425
+ :where([popover]) {
426
+ background-color: white;
427
+ color: black;
428
+ }
429
+ }
430
+
431
+ @supports (width: -moz-fit-content) {
432
+ :where([popover]) {
433
+ width: -moz-fit-content;
434
+ height: -moz-fit-content;
435
+ }
436
+ }
437
+
438
+ @supports not (inset: 0) {
439
+ :where([popover]) {
440
+ top: 0;
441
+ left: 0;
442
+ right: 0;
443
+ bottom: 0;
444
+ }
445
+ }
446
+ ${useLayer ? "}" : ""}
447
+ `;
448
+ }
449
+ var popoverStyleSheet = null;
450
+ function injectStyles(root) {
451
+ const styles = getStyles();
452
+ if (popoverStyleSheet === null) {
453
+ try {
454
+ popoverStyleSheet = new CSSStyleSheet();
455
+ popoverStyleSheet.replaceSync(styles);
456
+ } catch {
457
+ popoverStyleSheet = false;
458
+ }
459
+ }
460
+ if (popoverStyleSheet === false) {
461
+ const sheet = document.createElement("style");
462
+ sheet.textContent = styles;
463
+ if (root instanceof Document) {
464
+ root.head.prepend(sheet);
465
+ } else {
466
+ root.prepend(sheet);
467
+ }
468
+ } else {
469
+ root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
470
+ }
471
+ }
472
+ function apply() {
473
+ if (typeof window === "undefined") return;
474
+ window.ToggleEvent = window.ToggleEvent || ToggleEvent;
475
+ function rewriteSelector(selector) {
476
+ if (selector?.includes(":popover-open")) {
477
+ selector = selector.replace(
478
+ nonEscapedPopoverSelector,
479
+ "$1.\\:popover-open"
480
+ );
481
+ }
482
+ return selector;
483
+ }
484
+ patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
485
+ patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
486
+ patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
487
+ patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
488
+ patchSelectorFn(Element.prototype, "matches", rewriteSelector);
489
+ patchSelectorFn(Element.prototype, "closest", rewriteSelector);
490
+ patchSelectorFn(
491
+ DocumentFragment.prototype,
492
+ "querySelectorAll",
493
+ rewriteSelector
494
+ );
495
+ Object.defineProperties(HTMLElement.prototype, {
496
+ popover: {
497
+ enumerable: true,
498
+ configurable: true,
499
+ get() {
500
+ if (!this.hasAttribute("popover")) return null;
501
+ const value = (this.getAttribute("popover") || "").toLowerCase();
502
+ if (value === "" || value == "auto") return "auto";
503
+ return "manual";
504
+ },
505
+ set(value) {
506
+ if (value === null) {
507
+ this.removeAttribute("popover");
508
+ } else {
509
+ this.setAttribute("popover", value);
510
+ }
511
+ }
512
+ },
513
+ showPopover: {
514
+ enumerable: true,
515
+ configurable: true,
516
+ value() {
517
+ showPopover(this);
518
+ }
519
+ },
520
+ hidePopover: {
521
+ enumerable: true,
522
+ configurable: true,
523
+ value() {
524
+ hidePopover(this, true, true);
525
+ }
526
+ },
527
+ togglePopover: {
528
+ enumerable: true,
529
+ configurable: true,
530
+ value(force) {
531
+ if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
532
+ hidePopover(this, true, true);
533
+ } else if (force === void 0 || force === true) {
534
+ showPopover(this);
535
+ }
536
+ }
537
+ }
538
+ });
539
+ const originalAttachShadow = Element.prototype.attachShadow;
540
+ if (originalAttachShadow) {
541
+ Object.defineProperties(Element.prototype, {
542
+ attachShadow: {
543
+ enumerable: true,
544
+ configurable: true,
545
+ writable: true,
546
+ value(options) {
547
+ const shadowRoot = originalAttachShadow.call(this, options);
548
+ injectStyles(shadowRoot);
549
+ return shadowRoot;
550
+ }
551
+ }
552
+ });
553
+ }
554
+ const originalAttachInternals = HTMLElement.prototype.attachInternals;
555
+ if (originalAttachInternals) {
556
+ Object.defineProperties(HTMLElement.prototype, {
557
+ attachInternals: {
558
+ enumerable: true,
559
+ configurable: true,
560
+ writable: true,
561
+ value() {
562
+ const internals = originalAttachInternals.call(this);
563
+ if (internals.shadowRoot) {
564
+ injectStyles(internals.shadowRoot);
565
+ }
566
+ return internals;
567
+ }
568
+ }
569
+ });
570
+ }
571
+ const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
572
+ function applyPopoverInvokerElementMixin(ElementClass) {
573
+ Object.defineProperties(ElementClass.prototype, {
574
+ popoverTargetElement: {
575
+ enumerable: true,
576
+ configurable: true,
577
+ set(targetElement) {
578
+ if (targetElement === null) {
579
+ this.removeAttribute("popovertarget");
580
+ popoverTargetAssociatedElements.delete(this);
581
+ } else if (!(targetElement instanceof Element)) {
582
+ throw new TypeError(
583
+ `popoverTargetElement must be an element or null`
584
+ );
585
+ } else {
586
+ this.setAttribute("popovertarget", "");
587
+ popoverTargetAssociatedElements.set(this, targetElement);
588
+ }
589
+ },
590
+ get() {
591
+ if (this.localName !== "button" && this.localName !== "input") {
592
+ return null;
593
+ }
594
+ if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
595
+ return null;
596
+ }
597
+ if (this.disabled) {
598
+ return null;
599
+ }
600
+ if (this.form && this.type === "submit") {
601
+ return null;
602
+ }
603
+ const targetElement = popoverTargetAssociatedElements.get(this);
604
+ if (targetElement && targetElement.isConnected) {
605
+ return targetElement;
606
+ } else if (targetElement && !targetElement.isConnected) {
607
+ popoverTargetAssociatedElements.delete(this);
608
+ return null;
609
+ }
610
+ const root = getRootNode(this);
611
+ const idref = this.getAttribute("popovertarget");
612
+ if ((root instanceof Document || root instanceof ShadowRoot2) && idref) {
613
+ return root.getElementById(idref) || null;
614
+ }
615
+ return null;
616
+ }
617
+ },
618
+ popoverTargetAction: {
619
+ enumerable: true,
620
+ configurable: true,
621
+ get() {
622
+ const value = (this.getAttribute("popovertargetaction") || "").toLowerCase();
623
+ if (value === "show" || value === "hide") return value;
624
+ return "toggle";
625
+ },
626
+ set(value) {
627
+ this.setAttribute("popovertargetaction", value);
628
+ }
629
+ }
630
+ });
631
+ }
632
+ applyPopoverInvokerElementMixin(HTMLButtonElement);
633
+ applyPopoverInvokerElementMixin(HTMLInputElement);
634
+ const handleInvokerActivation = (event) => {
635
+ const composedPath = event.composedPath();
636
+ const target = composedPath[0];
637
+ if (!(target instanceof Element) || target?.shadowRoot) {
638
+ return;
639
+ }
640
+ const root = getRootNode(target);
641
+ if (!(root instanceof ShadowRoot2 || root instanceof Document)) {
642
+ return;
643
+ }
644
+ const invoker = composedPath.find(
645
+ (el) => el.matches?.("[popovertargetaction],[popovertarget]")
646
+ );
647
+ if (invoker) {
648
+ popoverTargetAttributeActivationBehavior(invoker);
649
+ event.preventDefault();
650
+ return;
651
+ }
652
+ };
653
+ const onKeydown = (event) => {
654
+ const key = event.key;
655
+ const target = event.target;
656
+ if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
657
+ hideAllPopoversUntil(target.ownerDocument, true, true);
658
+ }
659
+ };
660
+ const addEventListeners = (root) => {
661
+ root.addEventListener("click", handleInvokerActivation);
662
+ root.addEventListener("keydown", onKeydown);
663
+ root.addEventListener("pointerdown", lightDismissOpenPopovers);
664
+ root.addEventListener("pointerup", lightDismissOpenPopovers);
665
+ };
666
+ addEventListeners(document);
667
+ injectStyles(document);
668
+ }
669
+
670
+ const TdsPopoverContainer = /*@__PURE__*/ proxyCustomElement(class TdsPopoverContainer extends H {
671
+ constructor() {
672
+ super();
673
+ this.__registerHost();
674
+ }
675
+ connectedCallback() {
676
+ if (!isSupported()) {
677
+ apply();
678
+ }
679
+ this.initializeRelatedTdsTarget();
680
+ }
681
+ /**
682
+ * Stores the related tds target, which is the trigger element for the popover. (Which we'll display the popover relative to)
683
+ */
684
+ initializeRelatedTdsTarget() {
685
+ const popoverId = this.el.id;
686
+ const trigger = document.querySelector(`button[popoverTarget="${popoverId}"]`);
687
+ if (trigger) {
688
+ this.relatedTdsTarget = trigger;
689
+ }
690
+ }
691
+ /**
692
+ * Handles the toggle event, because we'll need the coordinates of the trigger to determine the height/width of the popover
693
+ */
694
+ handleToggle(e) {
695
+ const trigger = this.relatedTdsTarget;
696
+ const triggerRect = trigger.getBoundingClientRect();
697
+ console.log(triggerRect);
698
+ console.log(e);
699
+ console.log(this.relatedTdsTarget);
700
+ }
701
+ render() {
702
+ return (h(Host, { key: 'a9999347dc0f9ef2ed4956600429e87670ebf8e3', popover: "auto", onBeforeToggle: (e) => this.handleToggle(e) }, h("slot", { key: '4d9947f8ac1690896ac1b5ea7fd6071df9eb19b5' })));
703
+ }
704
+ get el() { return this; }
705
+ }, [4, "tds-popover-container", {
706
+ "relatedTdsTarget": [32]
707
+ }]);
708
+ function defineCustomElement() {
709
+ if (typeof customElements === "undefined") {
710
+ return;
711
+ }
712
+ const components = ["tds-popover-container"];
713
+ components.forEach(tagName => { switch (tagName) {
714
+ case "tds-popover-container":
715
+ if (!customElements.get(tagName)) {
716
+ customElements.define(tagName, TdsPopoverContainer);
717
+ }
718
+ break;
719
+ } });
720
+ }
721
+
722
+ export { TdsPopoverContainer as T, defineCustomElement as d };
723
+ //# sourceMappingURL=popover-container.js.map