@cas-smartdesign/popover 4.4.0 → 6.0.0

package/dist/popover.mjs

@@ -1,308 +1,292 @@
-import { createPopper as d } from "@popperjs/core";
-const g = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="12" viewBox="0 0 24 12">\r
-  <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
-  <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
-</svg>\r
-`, f = navigator.userAgent.indexOf("Trident") !== -1, p = 1, c = "sd-popover-open", l = class l extends HTMLElement {
-  constructor() {
-    super(...arguments), this._open = !1, this._firstUpdated = !1, this.toggle = () => {
-      this.open = !this.open;
-    }, this.show = () => {
-      this.open = !0;
-    }, this.hide = () => {
-      this.open = !1;
-    }, this.hideIfExternalTarget = (e) => {
-      const t = e.target;
-      (!(t instanceof HTMLElement) || !this._container.contains(t) && !this.targetElement.contains(t)) && this.hide();
-    }, this.handleTabKeyDown = (e) => {
-      if (e.key !== "Tab")
-        return;
-      const t = e.shiftKey;
-      let r = null;
-      const s = e.target, i = this.content;
-      if (s instanceof HTMLElement && i && (r = this.findNextFocusableAfter(s, i, !t)), r)
-        return;
-      e.preventDefault(), this.open = !1, this.findNextFocusableAfter(this.targetElement, null, !t)?.focus();
-    };
-  }
-  get triggerType() {
-    return this.getAttribute("trigger-type");
-  }
-  set triggerType(e) {
-    e ? this.setAttribute("trigger-type", e) : this.removeAttribute("trigger-type");
-  }
-  get arrowSvg() {
-    return this.getAttribute("arrow-svg") || g;
-  }
-  set arrowSvg(e) {
-    e ? this.setAttribute("arrow-svg", e) : this.removeAttribute("arrow-svg"), this._arrow && (this._arrow.innerHTML = this.arrowSvg);
-  }
-  get placement() {
-    return this.getAttribute("placement");
-  }
-  set placement(e) {
-    e ? this.setAttribute("placement", e) : this.removeAttribute("placement");
-  }
-  get targetElement() {
-    return this._targetElement;
-  }
-  set targetElement(e) {
-    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();
-  }
-  get targetSelector() {
-    return this.getAttribute("target-selector");
-  }
-  set targetSelector(e) {
-    e ? this.setAttribute("target-selector", e) : this.removeAttribute("target-selector");
-  }
-  get modal() {
-    return this.hasAttribute("modal");
-  }
-  set modal(e) {
-    e ? this.setAttribute("modal", "") : this.removeAttribute("modal");
-  }
-  get popoverFor() {
-    return this.getAttribute("popover-for");
-  }
-  set popoverFor(e) {
-    e ? this.setAttribute("popover-for", e) : this.removeAttribute("popover-for");
-  }
-  get flipPriority() {
-    return this._flipPriority;
-  }
-  set flipPriority(e) {
-    e && e.length > 0 ? this._flipPriority = e : this._flipPriority = null, this.reConfigurePopper();
-  }
-  get offset() {
-    return this.getAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-  }
-  set offset(e) {
-    e ? this.setAttribute("offset", e.toString()) : this.removeAttribute("offset"), this.reConfigurePopper();
-  }
-  reConfigurePopper() {
-    this._popper && this.configurePopper();
-  }
-  get noArrow() {
-    return this.hasAttribute("no-arrow");
-  }
-  set noArrow(e) {
-    e ? this.setAttribute("no-arrow", "") : this.removeAttribute("no-arrow");
-  }
-  static get observedAttributes() {
-    return ["placement", "target-selector", "trigger-type"];
-  }
-  attributeChangedCallback(e, t) {
-    switch (e) {
-      case "placement": {
-        this.updatePopper();
-        break;
-      }
-      case "trigger-type": {
-        this.removeTargetEventListener(this.targetElement), this.addTargetEventListener(this.targetElement);
-        break;
-      }
-      case "target-selector": {
-        this.handleTargetSelectorChange(t);
-        break;
-      }
-    }
-  }
-  connectedCallback() {
-    this._firstUpdated || (this.firstUpdated(), this._firstUpdated = !0), this.targetElement ? this.addTargetEventListener(this.targetElement) : this.targetSelector && requestAnimationFrame(() => {
-      this.isConnected && this.handleTargetSelectorChange(null);
-    }), 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;
-  }
-  disconnectedCallback() {
-    this.targetElement && (this.removeTargetEventListener(this.targetElement), this.removeTargetClassForOpen(this.targetElement)), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
-  }
-  firstUpdated() {
-    this.style.display = "none", this.triggerType = this.triggerType || "click", this.placement = this.placement || "auto";
-  }
-  get open() {
-    return this._open;
-  }
-  set open(e) {
-    e !== this._open && (this._open = e, this.handleOpenChange());
-  }
-  handleOpenChange() {
-    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, {
-      position: "relative",
-      display: "block",
-      zIndex: 1
-    }), window.requestAnimationFrame(() => {
-      let e = getComputedStyle(this.content).backgroundColor;
-      e == "rgba(0, 0, 0, 0)" && (this.content.style.background = e = "#f2f2f2");
-      const t = this._arrow.querySelector(".arrow-background");
-      t && (t.style.fill = e);
-    })), 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));
-  }
-  handleTargetSelectorChange(e) {
-    const t = document.querySelector(e);
-    t && (this.removeTargetEventListener(t), this.removeTargetClassForOpen(t)), this.targetSelector && (this.targetElement = document.querySelector(this.targetSelector), this.addTargetEventListener(this.targetElement));
-  }
-  addTargetEventListener(e) {
-    if (e)
-      switch (this.triggerType) {
-        case "hover": {
-          e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide);
-          break;
-        }
-        case "click": {
-          e.addEventListener("click", this.toggle);
-          break;
-        }
-      }
-  }
-  removeTargetEventListener(e) {
-    if (e)
-      switch (this.triggerType) {
-        case "hover": {
-          e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide);
-          break;
-        }
-        case "click": {
-          e.removeEventListener("click", this.toggle);
-          break;
-        }
-      }
-  }
-  configurePopper() {
-    this.createContentContainer(), this.ensureArrowIsAdded();
-    const e = this, t = {
-      placement: e.placement,
-      strategy: "absolute",
-      modifiers: [
-        {
-          name: "computeStyles",
-          options: {
-            gpuAcceleration: !f
-          }
-        },
-        {
-          name: "flip",
-          options: {
-            fallbackPlacements: e._flipPriority
-          }
-        },
-        {
-          name: "offset",
-          options: {
-            offset: () => [
-              0,
-              e.noArrow ? 0 + e.offset : this._arrow.clientHeight + e.offset
-            ]
-          }
-        },
-        {
-          name: "arrow",
-          options: {
-            padding: 6
-            // Avoid to reach the edges of the popper element with the arrow
-          }
-        },
-        {
-          name: "resetArrowStyles",
-          enabled: !0,
-          phase: "beforeWrite",
-          fn({ state: r }) {
-            Object.assign(e._arrow.style, {
-              top: r.styles.arrow.top || "",
-              left: r.styles.arrow.left || "",
-              bottom: r.styles.arrow.bottom || "",
-              right: r.styles.arrow.right || ""
-            });
-          }
-        },
-        {
-          name: "onUpdate",
-          enabled: !0,
-          phase: "afterWrite",
-          fn({ state: r }) {
-            e.updateArrow(r.placement);
-          }
-        }
-      ]
-    };
-    this._popper = d(this.targetElement, this._container, t);
-  }
-  createContentContainer() {
-    this._container = document.createElement("div"), this._container.classList.add("popover-container"), this._container.tabIndex = 0, this._resizeObserver && this._resizeObserver.disconnect(), this._resizeObserver = new ResizeObserver(() => {
-      this._popper && this._popper.update();
-    }), this._resizeObserver.observe(this._container), Object.assign(this._container.style, {
-      boxShadow: `0 4px 5px 0 rgba(0, 0, 0, 0.14),
-                        0 1px 10px 0 rgba(0, 0, 0, 0.12),
-                        0 2px 4px -1px rgba(0, 0, 0, 0.4)`,
-      border: "1px solid #999",
-      boxSizing: "border-box",
-      zIndex: 2e4
-    });
-  }
-  ensureArrowIsAdded() {
-    !this.noArrow && !this._container.contains(this._arrow) && this._container.appendChild(this._arrow);
-  }
-  updatePopper() {
-    this._popper && (this._popper.state.elements.reference = this.targetElement, this._popper.state.options.placement = this.placement, this.open && this._popper.update());
-  }
-  updateArrow(e) {
-    if (this._arrow) {
-      const t = this.getArrowVariant(e);
-      if (this._arrow.setAttribute("variant", t), this._content) {
-        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`;
-        switch (t) {
-          case "bottom": {
-            this._arrow.style.top = a, r.style.transform = "rotate(180deg)";
-            break;
-          }
-          case "top": {
-            this._arrow.style.bottom = a, r.style.transform = "rotate(0deg)";
-            break;
-          }
-          case "left": {
-            this._arrow.style.right = n, r.style.transform = "rotate(270deg)";
-            break;
-          }
-          case "right": {
-            this._arrow.style.left = n, r.style.transform = "rotate(90deg)";
-            break;
-          }
-        }
-      }
-    }
-  }
-  getArrowVariant(e) {
-    if (e.indexOf("bottom") !== -1)
-      return "bottom";
-    if (e.indexOf("top") !== -1)
-      return "top";
-    if (e.indexOf("left") !== -1)
-      return "left";
-    if (e.indexOf("right") !== -1)
-      return "right";
-  }
-  get content() {
-    return this._content || (this._content = this.firstElementChild, this._content.setAttribute("data-popper-content", "")), this._content;
-  }
-  addTargetClassForOpen(e) {
-    e && e.classList.add(c);
-  }
-  removeTargetClassForOpen(e) {
-    e && e.classList.remove(c);
-  }
-  findNextFocusableAfter(e, t, r) {
-    if (!e) return null;
-    const s = t ?? document.body, i = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-      acceptNode(h) {
-        const n = h;
-        return n.tabIndex >= 0 && !n.hidden && n.offsetParent !== null ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-      }
-    });
-    return i.currentNode = e, r ? i.nextNode() : i.previousNode();
-  }
+import { createPopper as e } from "@popperjs/core";
+//#endregion
+//#region popover.ts
+var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends HTMLElement {
+	constructor(...e) {
+		super(...e), this.popoverContainerId = "popover-container-" + i(), this._open = !1, this._firstUpdated = !1, this.toggle = () => {
+			this.open = !this.open;
+		}, this.show = () => {
+			this.open = !0;
+		}, this.hide = () => {
+			this.open = !1;
+		}, this.hideIfExternalTarget = (e) => {
+			let t = e.target;
+			(!(t instanceof HTMLElement) || this._container == null || this.targetElement == null || !this._container.contains(t) && !this.targetElement.contains(t)) && this.hide();
+		}, this.handleTabKeyDown = (e) => {
+			if (e.key !== "Tab") return;
+			let t = e.shiftKey, n = null, r = e.target, i = this.content;
+			r instanceof HTMLElement && i && (n = this.findNextFocusableAfter(r, i, !t)), !n && (e.preventDefault(), this.open = !1, this.findNextFocusableAfter(this.targetElement, null, !t)?.focus());
+		};
+	}
+	static {
+		this.ID = "sd-popover";
+	}
+	static {
+		this.ensureDefined = () => {
+			customElements.get(r.ID) || customElements.define(r.ID, r);
+		};
+	}
+	get triggerType() {
+		return this.getAttribute("trigger-type");
+	}
+	set triggerType(e) {
+		e ? this.setAttribute("trigger-type", e) : this.removeAttribute("trigger-type");
+	}
+	get arrowSvg() {
+		return this.getAttribute("arrow-svg") || "<svg width=\"26\" height=\"12\" viewBox=\"0 0 26 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M13.7072 0.707031L0.707153 0.707031L9.87873 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031L13.7072 0.707031Z\" fill=\"var(--color-bg-default, #ffffff)\" class=\"arrow-background\"/>\r\n<path d=\"M0.707153 0.707031L9.87872 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031\" stroke=\"var(--color-border-strong, #B3B3B3)\" stroke-linecap=\"square\" class=\"arrow-border\"/>\r\n</svg>\r\n";
+	}
+	set arrowSvg(e) {
+		e ? this.setAttribute("arrow-svg", e) : this.removeAttribute("arrow-svg"), this._arrow && (this._arrow.innerHTML = this.arrowSvg);
+	}
+	get placement() {
+		return this.getAttribute("placement");
+	}
+	set placement(e) {
+		e ? this.setAttribute("placement", e) : this.removeAttribute("placement");
+	}
+	get targetElement() {
+		return this._targetElement;
+	}
+	set targetElement(e) {
+		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();
+	}
+	get targetSelector() {
+		return this.getAttribute("target-selector");
+	}
+	set targetSelector(e) {
+		e ? this.setAttribute("target-selector", e) : this.removeAttribute("target-selector");
+	}
+	get modal() {
+		return this.hasAttribute("modal");
+	}
+	set modal(e) {
+		e ? this.setAttribute("modal", "") : this.removeAttribute("modal");
+	}
+	get popoverFor() {
+		return this.getAttribute("popover-for");
+	}
+	set popoverFor(e) {
+		e ? this.setAttribute("popover-for", e) : this.removeAttribute("popover-for");
+	}
+	get flipPriority() {
+		return this._flipPriority;
+	}
+	set flipPriority(e) {
+		e && e.length > 0 ? this._flipPriority = e : this._flipPriority = void 0, this.reConfigurePopper();
+	}
+	get offset() {
+		return this.getAttribute("offset") ? parseInt(this.getAttribute("offset") ?? "0") : 0;
+	}
+	set offset(e) {
+		e ? this.setAttribute("offset", e.toString()) : this.removeAttribute("offset"), this.reConfigurePopper();
+	}
+	reConfigurePopper() {
+		this._popper && this.configurePopper();
+	}
+	get noArrow() {
+		return this.hasAttribute("no-arrow");
+	}
+	set noArrow(e) {
+		e ? this.setAttribute("no-arrow", "") : this.removeAttribute("no-arrow");
+	}
+	static get observedAttributes() {
+		return [
+			"placement",
+			"target-selector",
+			"trigger-type"
+		];
+	}
+	attributeChangedCallback(e, t) {
+		switch (e) {
+			case "placement":
+				this.updatePopper();
+				break;
+			case "trigger-type":
+				this.removeTargetEventListener(this.targetElement), this.addTargetEventListener(this.targetElement);
+				break;
+			case "target-selector":
+				this.handleTargetSelectorChange(t);
+				break;
+		}
+	}
+	connectedCallback() {
+		this._firstUpdated ||= (this.firstUpdated(), !0), this.targetElement ? this.addTargetEventListener(this.targetElement) : this.targetSelector && requestAnimationFrame(() => {
+			this.isConnected && this.handleTargetSelectorChange(null);
+		}), 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;
+	}
+	disconnectedCallback() {
+		this.targetElement && (this.removeTargetEventListener(this.targetElement), this.removeTargetClassForOpen(this.targetElement)), this._resizeObserver &&= (this._resizeObserver.disconnect(), void 0);
+	}
+	firstUpdated() {
+		this.style.display = "none", this.triggerType = this.triggerType || "click", this.placement = this.placement || "auto";
+	}
+	get open() {
+		return this._open;
+	}
+	set open(e) {
+		e !== this._open && (this._open = e, this.handleOpenChange());
+	}
+	handleOpenChange() {
+		if (this.open) {
+			if (this._popper || this.configurePopper(), this._container == null) return;
+			this._container.innerHTML = "";
+			let e = document.createElement("style");
+			e.innerHTML = `#${this.popoverContainerId} {
+                box-shadow: var(--effect-shadow-strong, 1px 4px 24px 0 rgba(17, 17, 17, 0.5));
+                border: 1px solid var(--color-border-strong, #B3B3B3);
+                border-radius: var(--radius-s, 4px);
+                box-sizing: border-box;
+                z-index: 20000;
+
+                > *:not(.popover-arrow) {
+                    border-radius: var(--radius-s, 4px);
+                    clip-path: inset(0 round var(--radius-s, 4px));
+                }
+            }`, this._container.appendChild(e), this.popoverFor && this._container.setAttribute("popover-for", this.popoverFor), this.content && (this._container.prepend(this.content), Object.assign(this.content.style, {
+				position: "relative",
+				display: "block",
+				zIndex: 1
+			}), window.requestAnimationFrame(() => {
+				let e = getComputedStyle(this.content).backgroundColor;
+				if (e == "rgba(0, 0, 0, 0)" && (this.content.style.background = e = "var(--color-bg-default, #ffffff)"), !this._arrow) return;
+				let t = this._arrow.querySelector(".arrow-background");
+				t && (t.style.fill = e);
+			})), 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);
+		} 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);
+	}
+	handleTargetSelectorChange(e) {
+		if (e != null) {
+			let t = document.querySelector(e);
+			t && (this.removeTargetEventListener(t), this.removeTargetClassForOpen(t));
+		}
+		if (this.targetSelector) {
+			let e = document.querySelector(this.targetSelector);
+			e instanceof HTMLElement && (this.targetElement = e), this.addTargetEventListener(this.targetElement);
+		}
+	}
+	addTargetEventListener(e) {
+		if (e) switch (this.triggerType) {
+			case "hover":
+				e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide);
+				break;
+			case "click":
+				e.addEventListener("click", this.toggle);
+				break;
+		}
+	}
+	removeTargetEventListener(e) {
+		if (e) switch (this.triggerType) {
+			case "hover":
+				e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide);
+				break;
+			case "click":
+				e.removeEventListener("click", this.toggle);
+				break;
+		}
+	}
+	configurePopper() {
+		this.createContentContainer(), this.ensureArrowIsAdded();
+		let t = this, n = {
+			placement: t.placement,
+			strategy: "absolute",
+			modifiers: [
+				{
+					name: "computeStyles",
+					options: { gpuAcceleration: !0 }
+				},
+				{
+					name: "flip",
+					options: { fallbackPlacements: t._flipPriority }
+				},
+				{
+					name: "offset",
+					options: { offset: () => [0, t.noArrow ? 0 + t.offset : this._arrow?.clientHeight ?? 0 + t.offset] }
+				},
+				{
+					name: "arrow",
+					options: { padding: 10 }
+				},
+				{
+					name: "resetArrowStyles",
+					enabled: !0,
+					phase: "beforeWrite",
+					fn({ state: e }) {
+						t._arrow && e.styles.arrow && Object.assign(t._arrow.style, {
+							top: e.styles.arrow.top || "",
+							left: e.styles.arrow.left || "",
+							bottom: e.styles.arrow.bottom || "",
+							right: e.styles.arrow.right || ""
+						});
+					}
+				},
+				{
+					name: "onUpdate",
+					enabled: !0,
+					phase: "afterWrite",
+					fn({ state: e }) {
+						t.updateArrow(e.placement);
+					}
+				}
+			]
+		};
+		this._popper = e(this.targetElement, this._container, n);
+	}
+	createContentContainer() {
+		this._container = document.createElement("div"), this._container.id = this.popoverContainerId, this._container.classList.add("popover-container"), this._container.tabIndex = 0, this._resizeObserver && this._resizeObserver.disconnect(), this._resizeObserver = new ResizeObserver(() => {
+			this._popper && this._popper.update();
+		}), this._resizeObserver.observe(this._container);
+	}
+	ensureArrowIsAdded() {
+		this._container && this._arrow && !this.noArrow && !this._container.contains(this._arrow) && this._container.appendChild(this._arrow);
+	}
+	updatePopper() {
+		this._popper && (this._popper.state.elements.reference = this.targetElement ?? document.body, this._popper.state.options.placement = this.placement, this.open && this._popper.update());
+	}
+	updateArrow(e) {
+		if (this._arrow) {
+			let n = this.getArrowVariant(e);
+			if (this._arrow.setAttribute("variant", n), this._content) {
+				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`;
+				switch (n) {
+					case "bottom":
+						this._arrow.style.top = a, e.style.transform = "rotate(180deg)";
+						break;
+					case "top":
+						this._arrow.style.bottom = a, e.style.transform = "rotate(0deg)";
+						break;
+					case "left":
+						this._arrow.style.right = o, e.style.transform = "rotate(270deg)";
+						break;
+					case "right":
+						this._arrow.style.left = o, e.style.transform = "rotate(90deg)";
+						break;
+				}
+			}
+		}
+	}
+	getArrowVariant(e) {
+		return e.indexOf("bottom") === -1 ? e.indexOf("top") === -1 ? e.indexOf("left") === -1 ? e.indexOf("right") === -1 ? "bottom" : "right" : "left" : "top" : "bottom";
+	}
+	get content() {
+		return this._content || (this._content = this.firstElementChild, this._content.setAttribute("data-popper-content", "")), this._content;
+	}
+	addTargetClassForOpen(e) {
+		e && e.classList.add(n);
+	}
+	removeTargetClassForOpen(e) {
+		e && e.classList.remove(n);
+	}
+	findNextFocusableAfter(e, t, n) {
+		if (!e) return null;
+		let r = t ?? document.body, i = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, { acceptNode(e) {
+			let t = e;
+			return t.tabIndex >= 0 && !t.hidden && t.offsetParent !== null ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+		} });
+		return i.currentNode = e, n ? i.nextNode() : i.previousNode();
+	}
 };
-l.ID = "sd-popover";
-let o = l;
-customElements.get(o.ID) || customElements.define(o.ID, o);
-export {
-  o as default
-};
-//# sourceMappingURL=popover.mjs.map
+a.ensureDefined();
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=popover.mjs.map