agnosticui-core 2.0.0-alpha.2

package/dist/components/Popover/core/_Popover.js

@@ -0,0 +1,495 @@
+import { LitElement as f, css as w, html as h } from "lit";
+import { n as s } from "../../../property-CemaeiRl.js";
+import { r as y } from "../../../state-CovhUvdr.js";
+import { e as p } from "../../../query-BykXNUlT.js";
+import { a as E, o as T, f as S, s as k, d as m, b as L, c as x } from "../../../floating-ui.dom-muqvZJIo.js";
+import "../../shared/CloseButton/CloseButton.js";
+import { NAV_BUTTON_STYLES as C } from "../../../styles/nav-button-styles.js";
+var H = Object.defineProperty, r = (g, e, t, a) => {
+  for (var i = void 0, n = g.length - 1, l; n >= 0; n--)
+    (l = g[n]) && (i = l(e, t, i) || i);
+  return i && H(e, t, i), i;
+};
+const d = class d extends f {
+  constructor() {
+    super(), this._open = !1, this._handleTriggerClick = () => {
+      !this.disabled && this.triggerElement && this.triggerType === "click" && this.toggle();
+    }, this._handleTriggerMouseEnter = () => {
+      !this.disabled && this.triggerType === "hover" && (this._clearHoverTimeout(), this.show());
+    }, this._handleTriggerMouseLeave = () => {
+      this.triggerType === "hover" && (this._clearHoverTimeout(), this._hoverTimeout = window.setTimeout(() => {
+        this.hide();
+      }, 150));
+    }, this._handleTriggerFocus = () => {
+      !this.disabled && this.triggerType === "focus" && this.show();
+    }, this._handleTriggerBlur = () => {
+      this.triggerType === "focus" && (this._clearHoverTimeout(), this._hoverTimeout = window.setTimeout(() => {
+        this.hide();
+      }, 100));
+    }, this._handleCloseButtonClick = (e) => {
+      e.stopPropagation(), this.hide();
+    }, this._handleKeyDown = (e) => {
+      e.key === "Escape" && this._open && (this.hide(), e.stopPropagation());
+    }, this._handleClickOutside = (e) => {
+      if (!this._open || this.disabled) return;
+      const t = e.composedPath(), a = this.popoverElement && t.includes(this.popoverElement), i = this.triggerElement && t.includes(this.triggerElement);
+      !a && !i && this.hide();
+    }, this.placement = "bottom", this.distance = 8, this.skidding = 0, this.arrow = !0, this.disabled = !1, this.triggerType = "click", this.matchTriggerWidth = !1, this.showCloseButton = !0, this.showHeader = !0, this.closeLabel = "Close popover", this.trapFocus = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._updateSlotStates(), this._setupContentObservation();
+  }
+  firstUpdated() {
+    this._setupARIA(), this._addTriggerListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanupPositioning(), this._removeTriggerListeners(), this._removePopoverListeners(), this._cleanupContentObservation(), this._clearHoverTimeout();
+  }
+  /**
+   * Sets up ARIA attributes on the trigger element.
+   * @remarks Slot 'trigger' is required; missing it logs a warning and prevents opening.
+   */
+  _setupARIA() {
+    const e = this.triggerElement;
+    e && (e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-haspopup", "dialog"));
+  }
+  // Robust trigger element selection using slot assigned elements
+  get triggerElement() {
+    return this._triggerSlot && this._triggerSlot.assignedElements({ flatten: !0 })[0] || null;
+  }
+  get _hasTitleSlot() {
+    return !!this.querySelector('[slot="title"]');
+  }
+  get _hasContentSlot() {
+    return !!this.querySelector('[slot="content"]');
+  }
+  get _hasHeader() {
+    return this.showHeader && (this._hasTitleSlot || this.showCloseButton);
+  }
+  _updateSlotStates() {
+    this.toggleAttribute("has-header", this._hasHeader), this.toggleAttribute("has-content", this._hasContentSlot);
+  }
+  /**
+   * Sets up content observation for slot changes with limited depth
+   * to prevent performance issues in large applications.
+   */
+  _setupContentObservation() {
+    this._contentObserver = new MutationObserver(() => {
+      this._updateSlotStates();
+    }), this.querySelectorAll('[slot="title"], [slot="content"]').forEach((t) => {
+      this._contentObserver?.observe(t, {
+        childList: !0,
+        subtree: !1,
+        // Changed from true to false to limit depth
+        characterData: !0
+      });
+    });
+  }
+  _cleanupContentObservation() {
+    this._contentObserver?.disconnect(), this._contentObserver = void 0;
+  }
+  _clearHoverTimeout() {
+    this._hoverTimeout && (clearTimeout(this._hoverTimeout), this._hoverTimeout = void 0);
+  }
+  updated(e) {
+    if (super.updated(e), e.has("disabled") && this.disabled && this._open && this.hide(), e.has("triggerType") && (this._removeTriggerListeners(), this._addTriggerListeners()), (e.has("showCloseButton") || e.has("showHeader")) && this._updateSlotStates(), e.has("_open"))
+      if (this._updateARIA(), this._open) {
+        if (!this.triggerElement) {
+          this._open = !1;
+          return;
+        }
+        this._addPopoverListeners(), this.updateComplete.then(() => {
+          this._startPositioning();
+        });
+        const t = new CustomEvent("show", {
+          detail: { visible: !0 },
+          bubbles: !0,
+          composed: !0
+        });
+        this.dispatchEvent(t), this.onShow && this.onShow(t);
+      } else {
+        this._cleanupPositioning(), this._removePopoverListeners(), this._clearHoverTimeout();
+        const t = new CustomEvent("hide", {
+          detail: { visible: !1 },
+          bubbles: !0,
+          composed: !0
+        });
+        this.dispatchEvent(t), this.onHide && this.onHide(t);
+      }
+    e.has("matchTriggerWidth") && this._updatePopoverStyles();
+  }
+  _updatePopoverStyles() {
+    const e = this.popoverElement;
+    e && (this.matchTriggerWidth || (e.style.width = ""));
+  }
+  _updateARIA() {
+    const e = this.triggerElement;
+    e && e.setAttribute("aria-expanded", this._open ? "true" : "false");
+  }
+  _addTriggerListeners() {
+    const e = this.triggerElement;
+    if (e && !this.disabled)
+      switch (this.triggerType) {
+        case "click":
+          e.addEventListener("click", this._handleTriggerClick);
+          break;
+        case "hover":
+          e.addEventListener("mouseenter", this._handleTriggerMouseEnter), e.addEventListener("mouseleave", this._handleTriggerMouseLeave);
+          break;
+        case "focus":
+          e.addEventListener("focus", this._handleTriggerFocus), e.addEventListener("blur", this._handleTriggerBlur);
+          break;
+      }
+  }
+  _removeTriggerListeners() {
+    const e = this.triggerElement;
+    e && (e.removeEventListener("click", this._handleTriggerClick), e.removeEventListener("mouseenter", this._handleTriggerMouseEnter), e.removeEventListener("mouseleave", this._handleTriggerMouseLeave), e.removeEventListener("focus", this._handleTriggerFocus), e.removeEventListener("blur", this._handleTriggerBlur));
+  }
+  _addPopoverListeners() {
+    this.triggerType === "hover" && this.popoverElement && (this.popoverElement.addEventListener("mouseenter", this._handleTriggerMouseEnter), this.popoverElement.addEventListener("mouseleave", this._handleTriggerMouseLeave)), this.addEventListener("keydown", this._handleKeyDown), this._clickOutsideHandler = this._handleClickOutside.bind(this), document.addEventListener("click", this._clickOutsideHandler, !0);
+  }
+  _removePopoverListeners() {
+    this.popoverElement && (this.popoverElement.removeEventListener("mouseenter", this._handleTriggerMouseEnter), this.popoverElement.removeEventListener("mouseleave", this._handleTriggerMouseLeave)), this.removeEventListener("keydown", this._handleKeyDown), this._clickOutsideHandler && document.removeEventListener("click", this._clickOutsideHandler, !0);
+  }
+  _startPositioning() {
+    const e = this.popoverElement;
+    if (!e) return;
+    const t = this.triggerElement;
+    t && (this._updatePosition(), this._cleanup = E(t, e, () => {
+      this._updatePosition();
+    }));
+  }
+  _cleanupPositioning() {
+    this._cleanup?.(), this._cleanup = void 0;
+  }
+  async _updatePosition() {
+    const e = this.popoverElement;
+    if (!e) return;
+    const t = this.triggerElement;
+    if (!t) return;
+    const a = [];
+    this.matchTriggerWidth && a.push(
+      m({
+        apply: ({ rects: i }) => {
+          this.popoverElement && (this.popoverElement.style.width = `${i.reference.width}px`);
+        }
+      })
+    ), a.push(
+      T({ mainAxis: this.distance, crossAxis: this.skidding }),
+      S(),
+      k({ padding: 8 }),
+      m({
+        apply: ({ availableWidth: i, availableHeight: n, elements: l }) => {
+          Object.assign(l.floating.style, {
+            maxWidth: `${i}px`,
+            maxHeight: `${n}px`
+          });
+        }
+      })
+    ), this.arrow && this.arrowElement && a.push(L({
+      element: this.arrowElement,
+      padding: 5
+      // Adjust this value if arrow placement near corners needs tweaking.
+    }));
+    try {
+      const { x: i, y: n, placement: l, middlewareData: c } = await x(
+        t,
+        e,
+        {
+          placement: this.placement,
+          middleware: a
+        }
+      );
+      if (Object.assign(e.style, {
+        left: `${i}px`,
+        top: `${n}px`
+      }), e.dataset.placement = l, this.arrow && this.arrowElement && c.arrow) {
+        const { x: v, y: u } = c.arrow, b = l.split("-")[0], _ = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[b];
+        Object.assign(this.arrowElement.style, {
+          left: v != null ? `${v}px` : "",
+          top: u != null ? `${u}px` : "",
+          right: "",
+          bottom: "",
+          [_]: `-${this.arrowElement.offsetWidth / 2}px`
+        });
+      }
+    } catch {
+    }
+  }
+  show() {
+    this._open || this.disabled || !this.triggerElement || (this._open = !0);
+  }
+  /**
+   * Helper to get the active element, handling Shadow DOM boundaries.
+   */
+  _getActiveElement() {
+    let e = document.activeElement;
+    for (; e?.shadowRoot && e.shadowRoot.activeElement; )
+      e = e.shadowRoot.activeElement;
+    return e;
+  }
+  hide() {
+    if (!this._open) return;
+    this._open = !1;
+    const e = this._getActiveElement(), t = this.shadowRoot?.getElementById("popover"), a = e === document.body, i = t?.contains(e) || e === t, n = this.triggerElement === e;
+    this.triggerElement && (a || i || n) && this.triggerElement.focus();
+  }
+  toggle() {
+    this._open ? this.hide() : this.show();
+  }
+  // Public getters for testing
+  get isOpen() {
+    return this._open;
+  }
+  get hasContentSlot() {
+    return this._hasContentSlot;
+  }
+  get hasTitleSlot() {
+    return this._hasTitleSlot;
+  }
+  get hasHeader() {
+    return this._hasHeader;
+  }
+  render() {
+    return h`
+      <slot name="trigger" @slotchange=${this._updateSlotStates}></slot>
+
+      <div
+        id="popover"
+        part="ag-popover"
+        role="dialog"
+        aria-modal="false"
+        aria-labelledby=${this._hasTitleSlot ? "popover-title" : void 0}
+        aria-label=${this._hasTitleSlot ? void 0 : "Popover"}
+        ?data-show=${this._open}
+      >
+        ${this._hasHeader ? h`
+          <header part="ag-popover-header" class="popover-header">
+            ${this._hasTitleSlot ? h`
+              <h3 id="popover-title" class="popover-title">
+                <slot name="title" @slotchange=${this._updateSlotStates}></slot>
+              </h3>
+            ` : h`<div class="popover-title"></div>`}
+
+            ${this.showCloseButton ? h`
+              <div class="popover-close-wrapper">
+                <ag-close-button
+                  part="ag-popover-close"
+                  label=${this.closeLabel}
+                  @close-button-click=${this._handleCloseButtonClick}
+                ></ag-close-button>
+              </div>
+            ` : ""}
+          </header>
+        ` : ""}
+
+        ${this._hasContentSlot ? h`
+          <div part="ag-popover-body" class="popover-body">
+            <slot name="content" @slotchange=${this._updateSlotStates}></slot>
+          </div>
+        ` : ""}
+        
+        ${this.arrow ? h`<div id="arrow" part="ag-popover-arrow"></div>` : ""}
+      </div>
+    `;
+  }
+};
+d.styles = w`
+    :host {
+      display: inline-block;
+      position: relative;
+
+      /* Define with fallback only — never hard-code the value */
+      --ag-popover-min-width: var(--ag-popover-min-width, 200px);
+      --ag-popover-max-width: var(--ag-popover-max-width, 400px);
+      --ag-popover-arrow-size: var(--ag-popover-arrow-size, var(--ag-space-2, 8px));
+    }
+
+    #popover {
+      position: absolute;
+      z-index: var(--ag-z-index-modal);
+      background: var(--ag-background-primary);
+      border: var(--ag-border-width-1) solid var(--ag-border);
+      border-radius: var(--ag-radius-md);
+      box-shadow: var(--ag-shadow-lg);
+      min-inline-size: var(--ag-popover-min-width);
+      max-inline-size: var(--ag-popover-max-width);
+      opacity: 0;
+      transform: scale(0.95);
+      transition:
+        opacity var(--ag-motion-fast) ease-in-out,
+        transform var(--ag-motion-fast) ease-in-out;
+      pointer-events: none;
+    }
+
+    #popover[data-show] {
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+
+    /* Hide header when no title content and no close button */
+    :host(:not([has-header])) .popover-header {
+      display: none;
+    }
+
+    /* Hide body when no content */
+    :host(:not([has-content])) .popover-body {
+      display: none;
+    }
+
+    #arrow {
+      /* Base styles for the arrow: a rotated square with borders for the visible edges. */
+      position: absolute;
+      background: var(--ag-background-primary);
+      width: var(--ag-popover-arrow-size);
+      height: var(--ag-popover-arrow-size);
+      border: var(--ag-border-width-1) solid transparent;
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+
+    /* Placement-specific border colors for the arrow to match the popover border on the visible sides. */
+    #popover[data-placement^="top"] #arrow {
+      border-bottom-color: var(--ag-border);
+      border-inline-end-color: var(--ag-border);
+    }
+
+    #popover[data-placement^="right"] #arrow {
+      border-bottom-color: var(--ag-border);
+      border-inline-start-color: var(--ag-border);
+    }
+
+    #popover[data-placement^="bottom"] #arrow {
+      border-inline-start-color: var(--ag-border);
+      border-top-color: var(--ag-border);
+    }
+
+    #popover[data-placement^="left"] #arrow {
+      border-top-color: var(--ag-border);
+      border-inline-end-color: var(--ag-border);
+    }
+
+    .popover-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: var(--ag-space-4) var(--ag-space-4) var(--ag-space-3);
+      gap: var(--ag-space-3);
+    }
+
+    .popover-title {
+      font-weight: var(--ag-font-weight-semibold);
+      font-size: var(--ag-font-size-lg);
+      margin: 0;
+      color: var(--ag-text-primary);
+      flex: 1;
+    }
+
+    /* Hide placeholder title when empty and no actual title content */
+    .popover-title:empty:not(:has(*)) {
+      visibility: hidden;
+      min-width: 0;
+      flex: 0 1 0px;
+    }
+
+    .popover-close-wrapper {
+      flex-shrink: 0;
+      line-height: 1;
+      margin: calc(var(--ag-space-2) * -1) calc(var(--ag-space-2) * -1) 0 0;
+    }
+
+    .popover-body {
+      font-size: var(--ag-font-size-sm);
+      line-height: var(--ag-line-height-normal);
+      color: var(--ag-text-secondary);
+      padding: 0 var(--ag-space-4) var(--ag-space-4);
+    }
+
+    .popover-body ::slotted(*) {
+      margin: 0 0 var(--ag-space-2) 0;
+    }
+
+    .popover-body ::slotted(*:last-child) {
+      margin-block-end: 0;
+    }
+
+    /* Ensure popover is hidden when not active */
+    #popover:not([data-show]) {
+      display: none;
+    }
+
+    /* For when Popover is used on Sidebar sub-menues */
+    ${C}
+
+    /* Popover-specific additions (flat) */
+    ::slotted([slot="trigger"]) {
+      justify-content: center; /* Collapsed rail mode */
+      padding: var(--ag-space-1); /* Tighter fit */
+    }
+
+    /* Trigger-specific hover (flat) */
+    ::slotted([slot="trigger"]:hover) {
+      background: var(--ag-background-secondary);
+    }
+  `;
+let o = d;
+r([
+  s({ type: String, reflect: !0 })
+], o.prototype, "placement");
+r([
+  s({ type: Number })
+], o.prototype, "distance");
+r([
+  s({ type: Number })
+], o.prototype, "skidding");
+r([
+  s({ type: Boolean })
+], o.prototype, "arrow");
+r([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+r([
+  s({ type: String, attribute: "trigger-type" })
+], o.prototype, "triggerType");
+r([
+  s({ type: Boolean, attribute: "match-trigger-width" })
+], o.prototype, "matchTriggerWidth");
+r([
+  s({ type: Boolean, attribute: "show-close-button" })
+], o.prototype, "showCloseButton");
+r([
+  s({ type: Boolean, attribute: "show-header" })
+], o.prototype, "showHeader");
+r([
+  s({ type: String, attribute: "close-label" })
+], o.prototype, "closeLabel");
+r([
+  s({ type: Boolean, attribute: "trap-focus" })
+], o.prototype, "trapFocus");
+r([
+  s({ attribute: !1 })
+], o.prototype, "onShow");
+r([
+  s({ attribute: !1 })
+], o.prototype, "onHide");
+r([
+  y()
+], o.prototype, "_open");
+r([
+  p("#popover")
+], o.prototype, "popoverElement");
+r([
+  p("#arrow")
+], o.prototype, "arrowElement");
+r([
+  p('slot[name="trigger"]')
+], o.prototype, "_triggerSlot");
+export {
+  o as Popover
+};

package/dist/components/Popover/react/ReactPopover.d.ts

@@ -0,0 +1,37 @@
+import { EventName } from '@lit/react';
+import { Popover, PopoverProps, PopoverShowEvent, PopoverHideEvent } from '../core/Popover';
+import * as React from 'react';
+/**
+ * React-specific props for Popover
+ */
+export interface ReactPopoverProps extends PopoverProps {
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+/**
+ * Helper component for popover trigger slot
+ */
+export interface PopoverTriggerProps {
+    children?: React.ReactNode;
+}
+/**
+ * Helper component for popover title slot
+ */
+export interface PopoverTitleProps {
+    children?: React.ReactNode;
+}
+/**
+ * Helper component for popover content slot
+ */
+export interface PopoverContentProps {
+    children?: React.ReactNode;
+}
+export declare const ReactPopover: import('@lit/react').ReactWebComponent<Popover, {
+    onShow: EventName<PopoverShowEvent>;
+    onHide: EventName<PopoverHideEvent>;
+}>;
+export declare const PopoverTrigger: React.FC<PopoverTriggerProps>;
+export declare const PopoverTitle: React.FC<PopoverTitleProps>;
+export declare const PopoverContent: React.FC<PopoverContentProps>;
+//# sourceMappingURL=ReactPopover.d.ts.map

package/dist/components/Popover/react/ReactPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/react/ReactPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,YAAY;YAKH,SAAS,CAAC,gBAAgB,CAAC;YAC3B,SAAS,CAAC,gBAAgB,CAAC;EAE/C,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAExD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAExD,CAAC"}

package/dist/components/Popover/react/ReactPopover.js

@@ -0,0 +1,20 @@
+import { j as t } from "../../../jsx-runtime-BzflLqGi.js";
+import * as e from "react";
+import { o as r } from "../../../create-component-BPMDMe-q.js";
+import "../core/Popover.js";
+import { Popover as s } from "../core/_Popover.js";
+const v = r({
+  tagName: "ag-popover",
+  elementClass: s,
+  react: e,
+  events: {
+    onShow: "show",
+    onHide: "hide"
+  }
+}), a = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { slot: "trigger", children: o }), c = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { slot: "title", children: o }), l = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { slot: "content", children: o });
+export {
+  l as PopoverContent,
+  c as PopoverTitle,
+  a as PopoverTrigger,
+  v as ReactPopover
+};

package/dist/components/Popover/react/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ReactPopover';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/Popover/react/index.js

@@ -0,0 +1,7 @@
+import { PopoverContent as r, PopoverTitle as p, PopoverTrigger as t, ReactPopover as v } from "./ReactPopover.js";
+export {
+  r as PopoverContent,
+  p as PopoverTitle,
+  t as PopoverTrigger,
+  v as ReactPopover
+};

package/dist/components/Popover/vue/VuePopover.js

@@ -0,0 +1,87 @@
+import { defineComponent as i, ref as d, onMounted as l, nextTick as c, watchEffect as u, createElementBlock as g, openBlock as p, mergeProps as h, renderSlot as m } from "vue";
+import "../core/Popover.js";
+import { _ as f } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const w = i({
+  name: "VuePopover",
+  props: {
+    placement: {
+      type: String,
+      default: "bottom"
+    },
+    distance: {
+      type: Number,
+      default: 8
+    },
+    skidding: {
+      type: Number,
+      default: 0
+    },
+    arrow: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    triggerType: {
+      type: String,
+      default: "click"
+    },
+    matchTriggerWidth: {
+      type: Boolean,
+      default: !1
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: !0
+    },
+    closeLabel: {
+      type: String,
+      default: "Close popover"
+    },
+    trapFocus: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["show", "hide"],
+  setup(e, { emit: a }) {
+    const o = d(null), n = () => {
+      const t = o.value;
+      t && (t.placement = e.placement, t.distance = e.distance, t.skidding = e.skidding, t.arrow = e.arrow, t.disabled = e.disabled, t.triggerType = e.triggerType, t.matchTriggerWidth = e.matchTriggerWidth, t.showCloseButton = e.showCloseButton, t.closeLabel = e.closeLabel, t.trapFocus = e.trapFocus);
+    }, r = (t) => {
+      a("show", t);
+    }, s = (t) => {
+      a("hide", t);
+    };
+    return l(async () => {
+      await customElements.whenDefined("ag-popover"), await c(), n();
+      const t = o.value;
+      t && (t.addEventListener("show", r), t.addEventListener("hide", s));
+    }), u(() => {
+      o.value && n();
+    }), { agComponent: o };
+  }
+}), y = [".arrow", ".disabled", ".matchTriggerWidth", ".showCloseButton", ".trapFocus", "placement", "distance", "skidding", "triggerType", "closeLabel"];
+function b(e, a, o, n, r, s) {
+  return p(), g("ag-popover", h({
+    ref: "agComponent",
+    ".arrow": e.arrow,
+    ".disabled": e.disabled,
+    ".matchTriggerWidth": e.matchTriggerWidth,
+    ".showCloseButton": e.showCloseButton,
+    ".trapFocus": e.trapFocus,
+    placement: e.placement,
+    distance: e.distance,
+    skidding: e.skidding,
+    triggerType: e.triggerType,
+    closeLabel: e.closeLabel
+  }, e.$attrs), [
+    m(e.$slots, "default")
+  ], 48, y);
+}
+const k = /* @__PURE__ */ f(w, [["render", b]]);
+export {
+  k as default
+};