@cas-smartdesign/popover 4.4.0 → 5.0.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/dist/popover.mjs CHANGED
@@ -1,308 +1,284 @@
1
- import { createPopper as d } from "@popperjs/core";
2
- const g = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="12" viewBox="0 0 24 12">\r
3
- <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
4
- <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
5
- </svg>\r
6
- `, f = navigator.userAgent.indexOf("Trident") !== -1, p = 1, c = "sd-popover-open", l = class l extends HTMLElement {
7
- constructor() {
8
- super(...arguments), this._open = !1, this._firstUpdated = !1, this.toggle = () => {
9
- this.open = !this.open;
10
- }, this.show = () => {
11
- this.open = !0;
12
- }, this.hide = () => {
13
- this.open = !1;
14
- }, this.hideIfExternalTarget = (e) => {
15
- const t = e.target;
16
- (!(t instanceof HTMLElement) || !this._container.contains(t) && !this.targetElement.contains(t)) && this.hide();
17
- }, this.handleTabKeyDown = (e) => {
18
- if (e.key !== "Tab")
19
- return;
20
- const t = e.shiftKey;
21
- let r = null;
22
- const s = e.target, i = this.content;
23
- if (s instanceof HTMLElement && i && (r = this.findNextFocusableAfter(s, i, !t)), r)
24
- return;
25
- e.preventDefault(), this.open = !1, this.findNextFocusableAfter(this.targetElement, null, !t)?.focus();
26
- };
27
- }
28
- get triggerType() {
29
- return this.getAttribute("trigger-type");
30
- }
31
- set triggerType(e) {
32
- e ? this.setAttribute("trigger-type", e) : this.removeAttribute("trigger-type");
33
- }
34
- get arrowSvg() {
35
- return this.getAttribute("arrow-svg") || g;
36
- }
37
- set arrowSvg(e) {
38
- e ? this.setAttribute("arrow-svg", e) : this.removeAttribute("arrow-svg"), this._arrow && (this._arrow.innerHTML = this.arrowSvg);
39
- }
40
- get placement() {
41
- return this.getAttribute("placement");
42
- }
43
- set placement(e) {
44
- e ? this.setAttribute("placement", e) : this.removeAttribute("placement");
45
- }
46
- get targetElement() {
47
- return this._targetElement;
48
- }
49
- set targetElement(e) {
50
- this.removeTargetEventListener(this.targetElement), this._targetElement && this._targetElement.getAttribute("aria-expanded") == "true" && this._targetElement.setAttribute("aria-expanded", "false"), this._targetElement = e, e && e.setAttribute("aria-expanded", "false"), this.addTargetEventListener(this.targetElement), this.updatePopper();
51
- }
52
- get targetSelector() {
53
- return this.getAttribute("target-selector");
54
- }
55
- set targetSelector(e) {
56
- e ? this.setAttribute("target-selector", e) : this.removeAttribute("target-selector");
57
- }
58
- get modal() {
59
- return this.hasAttribute("modal");
60
- }
61
- set modal(e) {
62
- e ? this.setAttribute("modal", "") : this.removeAttribute("modal");
63
- }
64
- get popoverFor() {
65
- return this.getAttribute("popover-for");
66
- }
67
- set popoverFor(e) {
68
- e ? this.setAttribute("popover-for", e) : this.removeAttribute("popover-for");
69
- }
70
- get flipPriority() {
71
- return this._flipPriority;
72
- }
73
- set flipPriority(e) {
74
- e && e.length > 0 ? this._flipPriority = e : this._flipPriority = null, this.reConfigurePopper();
75
- }
76
- get offset() {
77
- return this.getAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
78
- }
79
- set offset(e) {
80
- e ? this.setAttribute("offset", e.toString()) : this.removeAttribute("offset"), this.reConfigurePopper();
81
- }
82
- reConfigurePopper() {
83
- this._popper && this.configurePopper();
84
- }
85
- get noArrow() {
86
- return this.hasAttribute("no-arrow");
87
- }
88
- set noArrow(e) {
89
- e ? this.setAttribute("no-arrow", "") : this.removeAttribute("no-arrow");
90
- }
91
- static get observedAttributes() {
92
- return ["placement", "target-selector", "trigger-type"];
93
- }
94
- attributeChangedCallback(e, t) {
95
- switch (e) {
96
- case "placement": {
97
- this.updatePopper();
98
- break;
99
- }
100
- case "trigger-type": {
101
- this.removeTargetEventListener(this.targetElement), this.addTargetEventListener(this.targetElement);
102
- break;
103
- }
104
- case "target-selector": {
105
- this.handleTargetSelectorChange(t);
106
- break;
107
- }
108
- }
109
- }
110
- connectedCallback() {
111
- this._firstUpdated || (this.firstUpdated(), this._firstUpdated = !0), this.targetElement ? this.addTargetEventListener(this.targetElement) : this.targetSelector && requestAnimationFrame(() => {
112
- this.isConnected && this.handleTargetSelectorChange(null);
113
- }), this._arrow = document.createElement("div"), this._arrow.classList.add("popover-arrow"), this._arrow.setAttribute("data-popper-arrow", ""), this._arrow.style.display = "flex", this._arrow.innerHTML = this.arrowSvg;
114
- }
115
- disconnectedCallback() {
116
- this.targetElement && (this.removeTargetEventListener(this.targetElement), this.removeTargetClassForOpen(this.targetElement)), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
117
- }
118
- firstUpdated() {
119
- this.style.display = "none", this.triggerType = this.triggerType || "click", this.placement = this.placement || "auto";
120
- }
121
- get open() {
122
- return this._open;
123
- }
124
- set open(e) {
125
- e !== this._open && (this._open = e, this.handleOpenChange());
126
- }
127
- handleOpenChange() {
128
- this.open ? (this._popper || this.configurePopper(), this._container.innerHTML = "", this.popoverFor && this._container.setAttribute("popover-for", this.popoverFor), this.content && (this._container.prepend(this.content), Object.assign(this.content.style, {
129
- position: "relative",
130
- display: "block",
131
- zIndex: 1
132
- }), window.requestAnimationFrame(() => {
133
- let e = getComputedStyle(this.content).backgroundColor;
134
- e == "rgba(0, 0, 0, 0)" && (this.content.style.background = e = "#f2f2f2");
135
- const t = this._arrow.querySelector(".arrow-background");
136
- t && (t.style.fill = e);
137
- })), this.ensureArrowIsAdded(), this.ownerDocument.body.appendChild(this._container), this.updatePopper(), this.setAttribute("open", ""), this.modal && (window.addEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.addEventListener("focus", this.hideIfExternalTarget, { capture: !0 })), this.targetElement && (this.addTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "true")), this.dispatchEvent(new CustomEvent("open")), this._container.addEventListener("keydown", this.handleTabKeyDown)) : (this.ownerDocument.body.removeChild(this._container), this.removeAttribute("open"), window.removeEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.removeEventListener("focus", this.hideIfExternalTarget, { capture: !0 }), this.targetElement && (this.removeTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "false")), this.dispatchEvent(new CustomEvent("close")), this._container.removeEventListener("keydown", this.handleTabKeyDown));
138
- }
139
- handleTargetSelectorChange(e) {
140
- const t = document.querySelector(e);
141
- t && (this.removeTargetEventListener(t), this.removeTargetClassForOpen(t)), this.targetSelector && (this.targetElement = document.querySelector(this.targetSelector), this.addTargetEventListener(this.targetElement));
142
- }
143
- addTargetEventListener(e) {
144
- if (e)
145
- switch (this.triggerType) {
146
- case "hover": {
147
- e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide);
148
- break;
149
- }
150
- case "click": {
151
- e.addEventListener("click", this.toggle);
152
- break;
153
- }
154
- }
155
- }
156
- removeTargetEventListener(e) {
157
- if (e)
158
- switch (this.triggerType) {
159
- case "hover": {
160
- e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide);
161
- break;
162
- }
163
- case "click": {
164
- e.removeEventListener("click", this.toggle);
165
- break;
166
- }
167
- }
168
- }
169
- configurePopper() {
170
- this.createContentContainer(), this.ensureArrowIsAdded();
171
- const e = this, t = {
172
- placement: e.placement,
173
- strategy: "absolute",
174
- modifiers: [
175
- {
176
- name: "computeStyles",
177
- options: {
178
- gpuAcceleration: !f
179
- }
180
- },
181
- {
182
- name: "flip",
183
- options: {
184
- fallbackPlacements: e._flipPriority
185
- }
186
- },
187
- {
188
- name: "offset",
189
- options: {
190
- offset: () => [
191
- 0,
192
- e.noArrow ? 0 + e.offset : this._arrow.clientHeight + e.offset
193
- ]
194
- }
195
- },
196
- {
197
- name: "arrow",
198
- options: {
199
- padding: 6
200
- // Avoid to reach the edges of the popper element with the arrow
201
- }
202
- },
203
- {
204
- name: "resetArrowStyles",
205
- enabled: !0,
206
- phase: "beforeWrite",
207
- fn({ state: r }) {
208
- Object.assign(e._arrow.style, {
209
- top: r.styles.arrow.top || "",
210
- left: r.styles.arrow.left || "",
211
- bottom: r.styles.arrow.bottom || "",
212
- right: r.styles.arrow.right || ""
213
- });
214
- }
215
- },
216
- {
217
- name: "onUpdate",
218
- enabled: !0,
219
- phase: "afterWrite",
220
- fn({ state: r }) {
221
- e.updateArrow(r.placement);
222
- }
223
- }
224
- ]
225
- };
226
- this._popper = d(this.targetElement, this._container, t);
227
- }
228
- createContentContainer() {
229
- this._container = document.createElement("div"), this._container.classList.add("popover-container"), this._container.tabIndex = 0, this._resizeObserver && this._resizeObserver.disconnect(), this._resizeObserver = new ResizeObserver(() => {
230
- this._popper && this._popper.update();
231
- }), this._resizeObserver.observe(this._container), Object.assign(this._container.style, {
232
- boxShadow: `0 4px 5px 0 rgba(0, 0, 0, 0.14),
233
- 0 1px 10px 0 rgba(0, 0, 0, 0.12),
234
- 0 2px 4px -1px rgba(0, 0, 0, 0.4)`,
235
- border: "1px solid #999",
236
- boxSizing: "border-box",
237
- zIndex: 2e4
238
- });
239
- }
240
- ensureArrowIsAdded() {
241
- !this.noArrow && !this._container.contains(this._arrow) && this._container.appendChild(this._arrow);
242
- }
243
- updatePopper() {
244
- this._popper && (this._popper.state.elements.reference = this.targetElement, this._popper.state.options.placement = this.placement, this.open && this._popper.update());
245
- }
246
- updateArrow(e) {
247
- if (this._arrow) {
248
- const t = this.getArrowVariant(e);
249
- if (this._arrow.setAttribute("variant", t), this._content) {
250
- const r = this._arrow.querySelector("svg"), s = this._arrow.clientWidth, i = this._arrow.clientHeight, a = `-${i - p}px`, h = (s - i) / 2, n = `-${i + h - p}px`;
251
- switch (t) {
252
- case "bottom": {
253
- this._arrow.style.top = a, r.style.transform = "rotate(180deg)";
254
- break;
255
- }
256
- case "top": {
257
- this._arrow.style.bottom = a, r.style.transform = "rotate(0deg)";
258
- break;
259
- }
260
- case "left": {
261
- this._arrow.style.right = n, r.style.transform = "rotate(270deg)";
262
- break;
263
- }
264
- case "right": {
265
- this._arrow.style.left = n, r.style.transform = "rotate(90deg)";
266
- break;
267
- }
268
- }
269
- }
270
- }
271
- }
272
- getArrowVariant(e) {
273
- if (e.indexOf("bottom") !== -1)
274
- return "bottom";
275
- if (e.indexOf("top") !== -1)
276
- return "top";
277
- if (e.indexOf("left") !== -1)
278
- return "left";
279
- if (e.indexOf("right") !== -1)
280
- return "right";
281
- }
282
- get content() {
283
- return this._content || (this._content = this.firstElementChild, this._content.setAttribute("data-popper-content", "")), this._content;
284
- }
285
- addTargetClassForOpen(e) {
286
- e && e.classList.add(c);
287
- }
288
- removeTargetClassForOpen(e) {
289
- e && e.classList.remove(c);
290
- }
291
- findNextFocusableAfter(e, t, r) {
292
- if (!e) return null;
293
- const s = t ?? document.body, i = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
294
- acceptNode(h) {
295
- const n = h;
296
- return n.tabIndex >= 0 && !n.hidden && n.offsetParent !== null ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
297
- }
298
- });
299
- return i.currentNode = e, r ? i.nextNode() : i.previousNode();
300
- }
1
+ import { createPopper as e } from "@popperjs/core";
2
+ //#endregion
3
+ //#region popover.ts
4
+ var t = 1, n = "sd-popover-open", r = class r extends HTMLElement {
5
+ constructor(...e) {
6
+ super(...e), this._open = !1, this._firstUpdated = !1, this.toggle = () => {
7
+ this.open = !this.open;
8
+ }, this.show = () => {
9
+ this.open = !0;
10
+ }, this.hide = () => {
11
+ this.open = !1;
12
+ }, this.hideIfExternalTarget = (e) => {
13
+ let t = e.target;
14
+ (!(t instanceof HTMLElement) || this._container == null || this.targetElement == null || !this._container.contains(t) && !this.targetElement.contains(t)) && this.hide();
15
+ }, this.handleTabKeyDown = (e) => {
16
+ if (e.key !== "Tab") return;
17
+ let t = e.shiftKey, n = null, r = e.target, i = this.content;
18
+ r instanceof HTMLElement && i && (n = this.findNextFocusableAfter(r, i, !t)), !n && (e.preventDefault(), this.open = !1, this.findNextFocusableAfter(this.targetElement, null, !t)?.focus());
19
+ };
20
+ }
21
+ static {
22
+ this.ID = "sd-popover";
23
+ }
24
+ static {
25
+ this.ensureDefined = () => {
26
+ customElements.get(r.ID) || customElements.define(r.ID, r);
27
+ };
28
+ }
29
+ get triggerType() {
30
+ return this.getAttribute("trigger-type");
31
+ }
32
+ set triggerType(e) {
33
+ e ? this.setAttribute("trigger-type", e) : this.removeAttribute("trigger-type");
34
+ }
35
+ get arrowSvg() {
36
+ return this.getAttribute("arrow-svg") || "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"12\" viewBox=\"0 0 24 12\">\r\n <path d=\"M0 0l11.96 12L24 0z\" fill=\"#999\" class=\"arrow-border\"/>\r\n <path d=\"M12 11L1 0h22z\" fill=\"#f2f2f2\" class=\"arrow-background\"/>\r\n</svg>\r\n";
37
+ }
38
+ set arrowSvg(e) {
39
+ e ? this.setAttribute("arrow-svg", e) : this.removeAttribute("arrow-svg"), this._arrow && (this._arrow.innerHTML = this.arrowSvg);
40
+ }
41
+ get placement() {
42
+ return this.getAttribute("placement");
43
+ }
44
+ set placement(e) {
45
+ e ? this.setAttribute("placement", e) : this.removeAttribute("placement");
46
+ }
47
+ get targetElement() {
48
+ return this._targetElement;
49
+ }
50
+ set targetElement(e) {
51
+ this.removeTargetEventListener(this.targetElement), this._targetElement && this._targetElement.getAttribute("aria-expanded") == "true" && this._targetElement.setAttribute("aria-expanded", "false"), this._targetElement = e, e && e.setAttribute("aria-expanded", "false"), this.addTargetEventListener(this.targetElement), this.updatePopper();
52
+ }
53
+ get targetSelector() {
54
+ return this.getAttribute("target-selector");
55
+ }
56
+ set targetSelector(e) {
57
+ e ? this.setAttribute("target-selector", e) : this.removeAttribute("target-selector");
58
+ }
59
+ get modal() {
60
+ return this.hasAttribute("modal");
61
+ }
62
+ set modal(e) {
63
+ e ? this.setAttribute("modal", "") : this.removeAttribute("modal");
64
+ }
65
+ get popoverFor() {
66
+ return this.getAttribute("popover-for");
67
+ }
68
+ set popoverFor(e) {
69
+ e ? this.setAttribute("popover-for", e) : this.removeAttribute("popover-for");
70
+ }
71
+ get flipPriority() {
72
+ return this._flipPriority;
73
+ }
74
+ set flipPriority(e) {
75
+ e && e.length > 0 ? this._flipPriority = e : this._flipPriority = void 0, this.reConfigurePopper();
76
+ }
77
+ get offset() {
78
+ return this.getAttribute("offset") ? parseInt(this.getAttribute("offset") ?? "0") : 0;
79
+ }
80
+ set offset(e) {
81
+ e ? this.setAttribute("offset", e.toString()) : this.removeAttribute("offset"), this.reConfigurePopper();
82
+ }
83
+ reConfigurePopper() {
84
+ this._popper && this.configurePopper();
85
+ }
86
+ get noArrow() {
87
+ return this.hasAttribute("no-arrow");
88
+ }
89
+ set noArrow(e) {
90
+ e ? this.setAttribute("no-arrow", "") : this.removeAttribute("no-arrow");
91
+ }
92
+ static get observedAttributes() {
93
+ return [
94
+ "placement",
95
+ "target-selector",
96
+ "trigger-type"
97
+ ];
98
+ }
99
+ attributeChangedCallback(e, t) {
100
+ switch (e) {
101
+ case "placement":
102
+ this.updatePopper();
103
+ break;
104
+ case "trigger-type":
105
+ this.removeTargetEventListener(this.targetElement), this.addTargetEventListener(this.targetElement);
106
+ break;
107
+ case "target-selector":
108
+ this.handleTargetSelectorChange(t);
109
+ break;
110
+ }
111
+ }
112
+ connectedCallback() {
113
+ this._firstUpdated ||= (this.firstUpdated(), !0), this.targetElement ? this.addTargetEventListener(this.targetElement) : this.targetSelector && requestAnimationFrame(() => {
114
+ this.isConnected && this.handleTargetSelectorChange(null);
115
+ }), this._arrow = document.createElement("div"), this._arrow.classList.add("popover-arrow"), this._arrow.setAttribute("data-popper-arrow", ""), this._arrow.style.display = "flex", this._arrow.innerHTML = this.arrowSvg;
116
+ }
117
+ disconnectedCallback() {
118
+ this.targetElement && (this.removeTargetEventListener(this.targetElement), this.removeTargetClassForOpen(this.targetElement)), this._resizeObserver &&= (this._resizeObserver.disconnect(), void 0);
119
+ }
120
+ firstUpdated() {
121
+ this.style.display = "none", this.triggerType = this.triggerType || "click", this.placement = this.placement || "auto";
122
+ }
123
+ get open() {
124
+ return this._open;
125
+ }
126
+ set open(e) {
127
+ e !== this._open && (this._open = e, this.handleOpenChange());
128
+ }
129
+ handleOpenChange() {
130
+ if (this.open) {
131
+ if (this._popper || this.configurePopper(), this._container == null) return;
132
+ this._container.innerHTML = "", this.popoverFor && this._container.setAttribute("popover-for", this.popoverFor), this.content && (this._container.prepend(this.content), Object.assign(this.content.style, {
133
+ position: "relative",
134
+ display: "block",
135
+ zIndex: 1
136
+ }), window.requestAnimationFrame(() => {
137
+ let e = getComputedStyle(this.content).backgroundColor;
138
+ if (e == "rgba(0, 0, 0, 0)" && (this.content.style.background = e = "#f2f2f2"), !this._arrow) return;
139
+ let t = this._arrow.querySelector(".arrow-background");
140
+ t && (t.style.fill = e);
141
+ })), this.ensureArrowIsAdded(), this.ownerDocument.body.appendChild(this._container), this.updatePopper(), this.setAttribute("open", ""), this.modal && (window.addEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.addEventListener("focus", this.hideIfExternalTarget, { capture: !0 })), this.targetElement && (this.addTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "true")), this.dispatchEvent(new CustomEvent("sd-popover-open")), this._container.addEventListener("keydown", this.handleTabKeyDown);
142
+ } else this._container != null && this.ownerDocument.body.removeChild(this._container), this.removeAttribute("open"), window.removeEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.removeEventListener("focus", this.hideIfExternalTarget, { capture: !0 }), this.targetElement && (this.removeTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "false")), this.dispatchEvent(new CustomEvent("sd-popover-close")), this._container != null && this._container.removeEventListener("keydown", this.handleTabKeyDown);
143
+ }
144
+ handleTargetSelectorChange(e) {
145
+ if (e != null) {
146
+ let t = document.querySelector(e);
147
+ t && (this.removeTargetEventListener(t), this.removeTargetClassForOpen(t));
148
+ }
149
+ if (this.targetSelector) {
150
+ let e = document.querySelector(this.targetSelector);
151
+ e instanceof HTMLElement && (this.targetElement = e), this.addTargetEventListener(this.targetElement);
152
+ }
153
+ }
154
+ addTargetEventListener(e) {
155
+ if (e) switch (this.triggerType) {
156
+ case "hover":
157
+ e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide);
158
+ break;
159
+ case "click":
160
+ e.addEventListener("click", this.toggle);
161
+ break;
162
+ }
163
+ }
164
+ removeTargetEventListener(e) {
165
+ if (e) switch (this.triggerType) {
166
+ case "hover":
167
+ e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide);
168
+ break;
169
+ case "click":
170
+ e.removeEventListener("click", this.toggle);
171
+ break;
172
+ }
173
+ }
174
+ configurePopper() {
175
+ this.createContentContainer(), this.ensureArrowIsAdded();
176
+ let t = this, n = {
177
+ placement: t.placement,
178
+ strategy: "absolute",
179
+ modifiers: [
180
+ {
181
+ name: "computeStyles",
182
+ options: { gpuAcceleration: !0 }
183
+ },
184
+ {
185
+ name: "flip",
186
+ options: { fallbackPlacements: t._flipPriority }
187
+ },
188
+ {
189
+ name: "offset",
190
+ options: { offset: () => [0, t.noArrow ? 0 + t.offset : this._arrow?.clientHeight ?? 0 + t.offset] }
191
+ },
192
+ {
193
+ name: "arrow",
194
+ options: { padding: 6 }
195
+ },
196
+ {
197
+ name: "resetArrowStyles",
198
+ enabled: !0,
199
+ phase: "beforeWrite",
200
+ fn({ state: e }) {
201
+ t._arrow && e.styles.arrow && Object.assign(t._arrow.style, {
202
+ top: e.styles.arrow.top || "",
203
+ left: e.styles.arrow.left || "",
204
+ bottom: e.styles.arrow.bottom || "",
205
+ right: e.styles.arrow.right || ""
206
+ });
207
+ }
208
+ },
209
+ {
210
+ name: "onUpdate",
211
+ enabled: !0,
212
+ phase: "afterWrite",
213
+ fn({ state: e }) {
214
+ t.updateArrow(e.placement);
215
+ }
216
+ }
217
+ ]
218
+ };
219
+ this._popper = e(this.targetElement, this._container, n);
220
+ }
221
+ createContentContainer() {
222
+ this._container = document.createElement("div"), this._container.classList.add("popover-container"), this._container.tabIndex = 0, this._resizeObserver && this._resizeObserver.disconnect(), this._resizeObserver = new ResizeObserver(() => {
223
+ this._popper && this._popper.update();
224
+ }), this._resizeObserver.observe(this._container), Object.assign(this._container.style, {
225
+ boxShadow: "0 4px 5px 0 rgba(0, 0, 0, 0.14),\n 0 1px 10px 0 rgba(0, 0, 0, 0.12),\n 0 2px 4px -1px rgba(0, 0, 0, 0.4)",
226
+ border: "1px solid #999",
227
+ boxSizing: "border-box",
228
+ zIndex: 2e4
229
+ });
230
+ }
231
+ ensureArrowIsAdded() {
232
+ this._container && this._arrow && !this.noArrow && !this._container.contains(this._arrow) && this._container.appendChild(this._arrow);
233
+ }
234
+ updatePopper() {
235
+ this._popper && (this._popper.state.elements.reference = this.targetElement ?? document.body, this._popper.state.options.placement = this.placement, this.open && this._popper.update());
236
+ }
237
+ updateArrow(e) {
238
+ if (this._arrow) {
239
+ let n = this.getArrowVariant(e);
240
+ if (this._arrow.setAttribute("variant", n), this._content) {
241
+ let e = this._arrow.querySelector("svg"), r = this._arrow.clientWidth, i = this._arrow.clientHeight, a = `-${i - t}px`, o = `-${i + (r - i) / 2 - t}px`;
242
+ switch (n) {
243
+ case "bottom":
244
+ this._arrow.style.top = a, e.style.transform = "rotate(180deg)";
245
+ break;
246
+ case "top":
247
+ this._arrow.style.bottom = a, e.style.transform = "rotate(0deg)";
248
+ break;
249
+ case "left":
250
+ this._arrow.style.right = o, e.style.transform = "rotate(270deg)";
251
+ break;
252
+ case "right":
253
+ this._arrow.style.left = o, e.style.transform = "rotate(90deg)";
254
+ break;
255
+ }
256
+ }
257
+ }
258
+ }
259
+ getArrowVariant(e) {
260
+ return e.indexOf("bottom") === -1 ? e.indexOf("top") === -1 ? e.indexOf("left") === -1 ? e.indexOf("right") === -1 ? "bottom" : "right" : "left" : "top" : "bottom";
261
+ }
262
+ get content() {
263
+ return this._content || (this._content = this.firstElementChild, this._content.setAttribute("data-popper-content", "")), this._content;
264
+ }
265
+ addTargetClassForOpen(e) {
266
+ e && e.classList.add(n);
267
+ }
268
+ removeTargetClassForOpen(e) {
269
+ e && e.classList.remove(n);
270
+ }
271
+ findNextFocusableAfter(e, t, n) {
272
+ if (!e) return null;
273
+ let r = t ?? document.body, i = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, { acceptNode(e) {
274
+ let t = e;
275
+ return t.tabIndex >= 0 && !t.hidden && t.offsetParent !== null ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
276
+ } });
277
+ return i.currentNode = e, n ? i.nextNode() : i.previousNode();
278
+ }
301
279
  };
302
- l.ID = "sd-popover";
303
- let o = l;
304
- customElements.get(o.ID) || customElements.define(o.ID, o);
305
- export {
306
- o as default
307
- };
308
- //# sourceMappingURL=popover.mjs.map
280
+ r.ensureDefined();
281
+ //#endregion
282
+ export { r as default };
283
+
284
+ //# sourceMappingURL=popover.mjs.map