@redvars/peacock 3.8.1 → 3.8.3

package/dist/popover.js

@@ -1,4 +1,176 @@
-import './IndividualComponent-DUINtMGK.js';
-import './property-1psGvXOq.js';
-export { P as Popover } from './popover-DUPmMVWS.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { F as FloatingController } from './floating-controller-CnUZnOhK.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+}`;
+
+/**
+ * @label Popover
+ * @tag wc-popover
+ * @rawTag popover
+ * @summary Displays additional information in a floating panel anchored to a trigger element.
+ * @overview
+ * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
+ * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
+ * @tags display
+ *
+ * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
+ * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
+ *
+ * @example
+ * ```html
+ * <wc-popover trigger="click">
+ *   <wc-button>Open popover</wc-button>
+ *   <wc-popover-content>
+ *     <p>Popover body text goes here.</p>
+ *   </wc-popover-content>
+ * </wc-popover>
+ * ```
+ */
+let Popover = class Popover extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines how the popover is triggered.
+         * Possible values are `"click"`, `"hover"`, `"manual"`.
+         */
+        this.trigger = 'click';
+        /**
+         * Preferred placement of the popover relative to the trigger element.
+         * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
+         */
+        this.placement = 'bottom';
+        /**
+         * Whether the popover is open.
+         */
+        this.open = false;
+        /**
+         * Distance in pixels between the trigger element and the popover panel.
+         */
+        this.offset = 8;
+        this._floating = null;
+        this._contentEl = null;
+        this._triggerEl = null;
+    }
+    _setupFloating() {
+        // Tear down any existing controller
+        if (this._floating) {
+            this._floating = null;
+        }
+        // Resolve the content element
+        this._contentEl = this.querySelector('wc-popover-content');
+        // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
+        this._triggerEl =
+            Array.from(this.children).find(c => c.tagName.toLowerCase() !== 'wc-popover-content') ?? null;
+        if (!this._triggerEl || !this._contentEl)
+            return;
+        const triggerMode = this.trigger === 'manual'
+            ? 'manual'
+            : this.trigger;
+        this._floating = new FloatingController(this, {
+            placement: this.placement,
+            strategy: 'fixed',
+            offset: this.offset,
+            trigger: triggerMode,
+            closeOnClickOutside: true,
+            onOpenChange: isOpen => {
+                this.open = isOpen;
+                if (this._contentEl) {
+                    this._contentEl.open = isOpen;
+                }
+                this.dispatchEvent(new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+        });
+        this._floating.setElements(this._triggerEl, this._contentEl);
+        if (this.open) {
+            this._floating.open();
+            this._contentEl.open = true;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    firstUpdated() {
+        this._setupFloating();
+    }
+    updated(changedProps) {
+        if (changedProps.has('trigger') ||
+            changedProps.has('placement') ||
+            changedProps.has('offset')) {
+            this._setupFloating();
+        }
+        if (changedProps.has('open') && this._floating) {
+            if (this.open && !this._floating.isOpen) {
+                this._floating.open();
+                if (this._contentEl)
+                    this._contentEl.open = true;
+            }
+            else if (!this.open && this._floating.isOpen) {
+                this._floating.close();
+                if (this._contentEl)
+                    this._contentEl.open = false;
+            }
+        }
+    }
+    /**
+     * Programmatically opens the popover.
+     */
+    show() {
+        if (this._floating && !this._floating.isOpen) {
+            this._floating.open();
+        }
+        else if (!this._floating) {
+            this.open = true;
+        }
+    }
+    /**
+     * Programmatically closes the popover.
+     */
+    hide() {
+        if (this._floating && this._floating.isOpen) {
+            this._floating.close();
+        }
+        else if (!this._floating) {
+            this.open = false;
+        }
+    }
+    render() {
+        return b `<slot></slot>`;
+    }
+};
+Popover.styles = [css_248z];
+__decorate([
+    n({ reflect: true })
+], Popover.prototype, "trigger", void 0);
+__decorate([
+    n({ reflect: true })
+], Popover.prototype, "placement", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Popover.prototype, "open", void 0);
+__decorate([
+    n({ type: Number })
+], Popover.prototype, "offset", void 0);
+Popover = __decorate([
+    IndividualComponent
+], Popover);
+
+export { Popover };
 //# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"popover.js","sources":["../../src/popover/popover.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { FloatingController } from '../__internal/controllers/floating-controller.js';\nimport styles from './popover.scss';\nimport type { PopoverContent } from './popover-content.js';\n\n/**\n * @label Popover\n * @tag wc-popover\n * @rawTag popover\n * @summary Displays additional information in a floating panel anchored to a trigger element.\n * @overview\n * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses\n * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>\n * @tags display\n *\n * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.\n * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.\n *\n * @example\n * ```html\n * <wc-popover trigger=\"click\">\n *   <wc-button>Open popover</wc-button>\n *   <wc-popover-content>\n *     <p>Popover body text goes here.</p>\n *   </wc-popover-content>\n * </wc-popover>\n * ```\n */\n@IndividualComponent\nexport class Popover extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Determines how the popover is triggered.\n   * Possible values are `\"click\"`, `\"hover\"`, `\"manual\"`.\n   */\n  @property({ reflect: true }) trigger: 'click' | 'hover' | 'manual' = 'click';\n\n  /**\n   * Preferred placement of the popover relative to the trigger element.\n   * Accepts any floating-ui `Placement` string such as `\"bottom\"`, `\"top-start\"`, `\"right\"`, etc.\n   */\n  @property({ reflect: true }) placement: Placement = 'bottom';\n\n  /**\n   * Whether the popover is open.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Distance in pixels between the trigger element and the popover panel.\n   */\n  @property({ type: Number }) offset = 8;\n\n  private _floating: FloatingController | null = null;\n\n  private _contentEl: PopoverContent | null = null;\n\n  private _triggerEl: HTMLElement | null = null;\n\n  private _setupFloating() {\n    // Tear down any existing controller\n    if (this._floating) {\n      this._floating = null;\n    }\n\n    // Resolve the content element\n    this._contentEl = this.querySelector<PopoverContent>('wc-popover-content');\n\n    // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content\n    this._triggerEl =\n      (Array.from(this.children).find(\n        c => c.tagName.toLowerCase() !== 'wc-popover-content',\n      ) as HTMLElement) ?? null;\n\n    if (!this._triggerEl || !this._contentEl) return;\n\n    const triggerMode =\n      this.trigger === 'manual'\n        ? 'manual'\n        : (this.trigger as 'click' | 'hover');\n\n    this._floating = new FloatingController(this, {\n      placement: this.placement,\n      strategy: 'fixed',\n      offset: this.offset,\n      trigger: triggerMode,\n      closeOnClickOutside: true,\n      onOpenChange: isOpen => {\n        this.open = isOpen;\n        if (this._contentEl) {\n          this._contentEl.open = isOpen;\n        }\n        this.dispatchEvent(\n          new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      },\n    });\n\n    this._floating.setElements(\n      this._triggerEl,\n      this._contentEl as unknown as HTMLElement,\n    );\n\n    if (this.open) {\n      this._floating.open();\n      this._contentEl.open = true;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    this._setupFloating();\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    if (\n      changedProps.has('trigger') ||\n      changedProps.has('placement') ||\n      changedProps.has('offset')\n    ) {\n      this._setupFloating();\n    }\n\n    if (changedProps.has('open') && this._floating) {\n      if (this.open && !this._floating.isOpen) {\n        this._floating.open();\n        if (this._contentEl) this._contentEl.open = true;\n      } else if (!this.open && this._floating.isOpen) {\n        this._floating.close();\n        if (this._contentEl) this._contentEl.open = false;\n      }\n    }\n  }\n\n  /**\n   * Programmatically opens the popover.\n   */\n  show() {\n    if (this._floating && !this._floating.isOpen) {\n      this._floating.open();\n    } else if (!this._floating) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Programmatically closes the popover.\n   */\n  hide() {\n    if (this._floating && this._floating.isOpen) {\n      this._floating.close();\n    } else if (!this._floating) {\n      this.open = false;\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":"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"}