@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

package/dist/src/nile-popover/nile-popover.js

@@ -11,6 +11,7 @@ import { styles } from './nile-popover.css';
 import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
 import { PopoverPortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 /**
  * Nile icon component.
  *
@@ -35,6 +36,8 @@ let NilePopover = class NilePopover extends NileElement {
         this.isShow = false;
         this.arrowPlacement = 'anchor';
         this.portalManager = null;
+        this.enableVisibilityEffect = false;
+        this.enableTabClose = false;
         /**
          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
          * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
@@ -88,12 +91,40 @@ let NilePopover = class NilePopover extends NileElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.emit('nile-destroy');
+        this.visibilityManager?.cleanup();
         document.removeEventListener('click', this.handleDocumentClick);
         if (this.portalManager) {
             this.portalManager.cleanupPortalAppend();
             this.portalManager = null;
         }
     }
+    async firstUpdated(_changed) {
+        await this.updateComplete;
+        const anchorSlot = this.renderRoot.querySelector('slot[name="anchor"]');
+        const anchorEl = anchorSlot?.assignedElements({ flatten: true })[0];
+        this.visibilityManager = new VisibilityManager({
+            host: this,
+            target: anchorEl || null,
+            enableVisibilityEffect: this.enableVisibilityEffect,
+            enableTabClose: this.enableTabClose,
+            isOpen: () => this.isShow,
+            onAnchorOutOfView: () => {
+                this.isShow = false;
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'anchor-out-of-view',
+                });
+            },
+            onDocumentHidden: () => {
+                this.isShow = false;
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'document-hidden',
+                });
+            },
+            emit: (event, detail) => this.emit(`nile-${event}`, detail),
+        });
+    }
     updated(_changedProperties) {
         if (_changedProperties.has('open')) {
             this.isShow = this.open;
@@ -111,6 +142,7 @@ let NilePopover = class NilePopover extends NileElement {
     handleShowHide() {
         if (this.isShow) {
             this.emit('nile-show');
+            this.visibilityManager?.setup();
             if (this.portal && this.portalManager) {
                 this.portalManager.setupPortalAppend();
             }
@@ -121,6 +153,7 @@ let NilePopover = class NilePopover extends NileElement {
         }
         else {
             this.emit('nile-hide');
+            this.visibilityManager?.cleanup();
             if (this.portal && this.portalManager) {
                 this.portalManager.cleanupPortalAppend();
             }
@@ -203,6 +236,12 @@ __decorate([
 __decorate([
     property({ attribute: 'arrow-placement' })
 ], NilePopover.prototype, "arrowPlacement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NilePopover.prototype, "enableVisibilityEffect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NilePopover.prototype, "enableTabClose", void 0);
 __decorate([
     property({ type: Boolean })
 ], NilePopover.prototype, "hoist", void 0);

package/dist/src/nile-popover/nile-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit-element';\nimport { customElement,property, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { CSSResultGroup } from 'lit';\nimport { PopoverPortalManager } from './portal-manager';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends NileElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultGroup {\n    return [styles];\n  }\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @property({type:Boolean }) open = false;\n\n  @state() isShow:boolean = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  private portalManager: PopoverPortalManager | null = null;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  /**\n   * Enable portal mode to render the popover content in a portal outside the component's DOM tree.\n   * This provides better positioning control and prevents clipping issues in complex layouts.\n   */\n  @property({ type: Boolean }) portal = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    document.addEventListener('click', this.handleDocumentClick);\n    \n    requestAnimationFrame(() => {\n      if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n    document.removeEventListener('click', this.handleDocumentClick);\n    \n    if (this.portalManager) {\n      this.portalManager.cleanupPortalAppend();\n      this.portalManager = null;\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('open')) {\n      this.isShow = this.open;\n    }\n    \n    if (_changedProperties.has('portal')) {\n      if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n      } else if (!this.portal && this.portalManager) {\n        this.portalManager.cleanupPortalAppend();\n        this.portalManager = null;\n      }\n    }\n  }\n\n  @watch('isShow')\n  handleShowHide() {\n    if (this.isShow) {\n      this.emit('nile-show');\n      if (this.portal && this.portalManager) {\n        this.portalManager.setupPortalAppend();\n      } else if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n        this.portalManager.setupPortalAppend();\n      }\n    } else {\n      this.emit('nile-hide');\n      if (this.portal && this.portalManager) {\n        this.portalManager.cleanupPortalAppend();\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    const shouldRenderContent = this.isShow && !(this.portal && this.portalManager);\n    \n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow && !this.portal}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${shouldRenderContent\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow && !this.preventOverlayClose) {\n      this.isShow = false;\n    }\n  };\n\n  public updatePortalContent(): void {\n    if (this.portalManager) {\n      this.portalManager.updatePortalAppendPosition();\n    }\n  }\n\n  public forceReposition(): void {\n    if (this.portalManager) {\n      this.portalManager.forceReposition();\n    }\n  }\n\n  public getCurrentPlacement(): string {\n    if (this.portalManager) {\n      return this.portalManager.getCurrentPlacement();\n    }\n    return this.placement;\n  }\n\n  public isPositioningOptimal(): boolean {\n    if (this.portalManager) {\n      return this.portalManager.isPositioningOptimal();\n    }\n    return true;\n  }\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"]}
+{"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit-element';\nimport { customElement,property, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { CSSResultGroup } from 'lit';\nimport { PopoverPortalManager } from './portal-manager';\nimport { VisibilityManager } from '../utilities/visibility-manager.js';\n\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends NileElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultGroup {\n    return [styles];\n  }\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @property({type:Boolean }) open = false;\n\n  @state() isShow:boolean = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  private portalManager: PopoverPortalManager | null = null;\n  private visibilityManager?: VisibilityManager;\n\n  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;\n\n  @property({ type: Boolean, reflect: true }) enableTabClose = false;\n\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  /**\n   * Enable portal mode to render the popover content in a portal outside the component's DOM tree.\n   * This provides better positioning control and prevents clipping issues in complex layouts.\n   */\n  @property({ type: Boolean }) portal = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    document.addEventListener('click', this.handleDocumentClick);\n    \n    requestAnimationFrame(() => {\n      if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n    this.visibilityManager?.cleanup();\n    document.removeEventListener('click', this.handleDocumentClick);\n    \n    if (this.portalManager) {\n      this.portalManager.cleanupPortalAppend();\n      this.portalManager = null;\n    }\n  }\n\n  protected async firstUpdated(_changed: PropertyValues) {\n    await this.updateComplete;\n  \n    const anchorSlot = this.renderRoot.querySelector('slot[name=\"anchor\"]') as HTMLSlotElement | null;\n    const anchorEl = anchorSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    \n  \n    this.visibilityManager = new VisibilityManager({\n      host: this,\n      target: anchorEl || null,\n      enableVisibilityEffect: this.enableVisibilityEffect,\n      enableTabClose: this.enableTabClose,\n      isOpen: () => this.isShow,\n      onAnchorOutOfView: () => {\n        this.isShow = false;\n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'anchor-out-of-view',\n        });\n      },\n      onDocumentHidden: () => {\n        this.isShow = false;\n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'document-hidden',\n        });\n      },\n      emit: (event, detail) => this.emit(`nile-${event}`, detail),\n    });\n  }\n\n  \n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('open')) {\n      this.isShow = this.open;\n    }\n    \n    if (_changedProperties.has('portal')) {\n      if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n      } else if (!this.portal && this.portalManager) {\n        this.portalManager.cleanupPortalAppend();\n        this.portalManager = null;\n      }\n    }\n  }\n\n  @watch('isShow')\n  handleShowHide() {\n    if (this.isShow) {\n      this.emit('nile-show');\n      this.visibilityManager?.setup();\n      if (this.portal && this.portalManager) {\n        this.portalManager.setupPortalAppend();\n      } else if (this.portal && !this.portalManager) {\n        this.portalManager = new PopoverPortalManager(this);\n        this.portalManager.setupPortalAppend();\n      }\n    } else {\n      this.emit('nile-hide');\n      this.visibilityManager?.cleanup();\n      if (this.portal && this.portalManager) {\n        this.portalManager.cleanupPortalAppend();\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    const shouldRenderContent = this.isShow && !(this.portal && this.portalManager);\n    \n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow && !this.portal}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${shouldRenderContent\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow && !this.preventOverlayClose) {\n      this.isShow = false;\n    }\n  };\n\n  public updatePortalContent(): void {\n    if (this.portalManager) {\n      this.portalManager.updatePortalAppendPosition();\n    }\n  }\n\n  public forceReposition(): void {\n    if (this.portalManager) {\n      this.portalManager.forceReposition();\n    }\n  }\n\n  public getCurrentPlacement(): string {\n    if (this.portalManager) {\n      return this.portalManager.getCurrentPlacement();\n    }\n    return this.placement;\n  }\n\n  public isPositioningOptimal(): boolean {\n    if (this.portalManager) {\n      return this.portalManager.isPositioningOptimal();\n    }\n    return true;\n  }\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"]}

package/dist/src/nile-popover/popover-portal-handler.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { PortalContentHandler, PortalConfig } from '../internal/portal-manager';
+import type { CSSResultGroup } from 'lit';
+export declare class PopoverPortalHandler implements PortalContentHandler {
+    private component;
+    private config;
+    private clonedPopoverContent;
+    constructor(component: any, config?: PortalConfig);
+    createPortalContent(): HTMLElement;
+    private createFallbackContent;
+    updatePortalContent(portalElement: HTMLElement): void;
+    setupEventListeners(portalElement: HTMLElement): void;
+    cleanupEventListeners(portalElement: HTMLElement): void;
+    getReferenceElement(): HTMLElement;
+    getComponentStyles(): CSSResultGroup | undefined;
+}

package/dist/src/nile-popover/popover-portal-handler.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class PopoverPortalHandler {
+    constructor(component, config = {}) {
+        this.component = component;
+        this.config = config;
+        this.clonedPopoverContent = null;
+    }
+    createPortalContent() {
+        // Find the popover content in the shadow DOM (now it's always rendered but hidden when portal is enabled)
+        const popoverBox = this.component.shadowRoot?.querySelector('.popover__box');
+        if (!popoverBox) {
+            // Fallback: create content directly
+            return this.createFallbackContent();
+        }
+        // Clone the popover content for portal
+        this.clonedPopoverContent = popoverBox.cloneNode(true);
+        this.clonedPopoverContent.style.display = 'block';
+        this.clonedPopoverContent.style.position = 'relative';
+        return this.clonedPopoverContent;
+    }
+    createFallbackContent() {
+        // Create the popover content directly as fallback
+        this.clonedPopoverContent = document.createElement('div');
+        this.clonedPopoverContent.className = 'popover__box';
+        this.clonedPopoverContent.setAttribute('part', 'popover');
+        this.clonedPopoverContent.style.display = 'block';
+        this.clonedPopoverContent.style.position = 'relative';
+        // Create the title element
+        const titleElement = document.createElement('div');
+        titleElement.className = 'popover__title';
+        titleElement.textContent = this.component.title;
+        // Create the base content slot
+        const baseSlot = document.createElement('div');
+        baseSlot.setAttribute('part', 'base');
+        // Create the action slot
+        const actionSlot = document.createElement('div');
+        actionSlot.className = 'popover__action';
+        // Append elements
+        this.clonedPopoverContent.appendChild(titleElement);
+        this.clonedPopoverContent.appendChild(baseSlot);
+        this.clonedPopoverContent.appendChild(actionSlot);
+        return this.clonedPopoverContent;
+    }
+    updatePortalContent(portalElement) {
+        if (!this.component.isShow) {
+            portalElement.style.display = 'none';
+            return;
+        }
+        portalElement.style.display = 'block';
+        // Update the content by cloning from the shadow DOM again
+        const originalPopoverBox = this.component.shadowRoot?.querySelector('.popover__box');
+        if (originalPopoverBox) {
+            // Clone the updated content
+            const updatedContent = originalPopoverBox.cloneNode(true);
+            updatedContent.style.display = 'block';
+            updatedContent.style.position = 'relative';
+            // Replace the content
+            portalElement.innerHTML = updatedContent.innerHTML;
+        }
+    }
+    setupEventListeners(portalElement) {
+        // Handle click events to prevent them from bubbling up
+        portalElement.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+        // Handle any other popover-specific events
+        // For example, if the popover has action buttons, we might need to handle those
+        const actionSlot = portalElement.querySelector('slot[name="action"]');
+        if (actionSlot) {
+            actionSlot.addEventListener('click', (event) => {
+                event.stopPropagation();
+                // Forward the event to the original component if needed
+                this.component.dispatchEvent(new CustomEvent('nile-popover-action', {
+                    detail: { originalEvent: event },
+                    bubbles: true
+                }));
+            });
+        }
+    }
+    cleanupEventListeners(portalElement) {
+        // Remove all event listeners
+        const newElement = portalElement.cloneNode(true);
+        portalElement.parentNode?.replaceChild(newElement, portalElement);
+    }
+    getReferenceElement() {
+        // Get the anchor element from the slot
+        const anchorSlot = this.component.shadowRoot?.querySelector('slot[name="anchor"]');
+        if (anchorSlot) {
+            const assignedElements = anchorSlot.assignedElements();
+            if (assignedElements.length > 0) {
+                return assignedElements[0];
+            }
+        }
+        // Fallback to the component itself
+        return this.component;
+    }
+    getComponentStyles() {
+        return this.component.constructor.styles;
+    }
+}
+//# sourceMappingURL=popover-portal-handler.js.map

package/dist/src/nile-popover/popover-portal-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-portal-handler.js","sourceRoot":"","sources":["../../../src/nile-popover/popover-portal-handler.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { PortalContentHandler, PortalConfig } from '../internal/portal-manager';\nimport type { CSSResultGroup } from 'lit';\n\nexport class PopoverPortalHandler implements PortalContentHandler {\n  private clonedPopoverContent: HTMLElement | null = null;\n\n  constructor(\n    private component: any,\n    private config: PortalConfig = {}\n  ) {}\n\n  createPortalContent(): HTMLElement {\n    // Find the popover content in the shadow DOM (now it's always rendered but hidden when portal is enabled)\n    const popoverBox = this.component.shadowRoot?.querySelector('.popover__box') as HTMLElement;\n    if (!popoverBox) {\n      // Fallback: create content directly\n      return this.createFallbackContent();\n    }\n\n    // Clone the popover content for portal\n    this.clonedPopoverContent = popoverBox.cloneNode(true) as HTMLElement;\n    this.clonedPopoverContent.style.display = 'block';\n    this.clonedPopoverContent.style.position = 'relative';\n    \n    return this.clonedPopoverContent;\n  }\n\n  private createFallbackContent(): HTMLElement {\n    // Create the popover content directly as fallback\n    this.clonedPopoverContent = document.createElement('div');\n    this.clonedPopoverContent.className = 'popover__box';\n    this.clonedPopoverContent.setAttribute('part', 'popover');\n    this.clonedPopoverContent.style.display = 'block';\n    this.clonedPopoverContent.style.position = 'relative';\n    \n    // Create the title element\n    const titleElement = document.createElement('div');\n    titleElement.className = 'popover__title';\n    titleElement.textContent = this.component.title;\n    \n    // Create the base content slot\n    const baseSlot = document.createElement('div');\n    baseSlot.setAttribute('part', 'base');\n    \n    // Create the action slot\n    const actionSlot = document.createElement('div');\n    actionSlot.className = 'popover__action';\n    \n    // Append elements\n    this.clonedPopoverContent.appendChild(titleElement);\n    this.clonedPopoverContent.appendChild(baseSlot);\n    this.clonedPopoverContent.appendChild(actionSlot);\n    \n    return this.clonedPopoverContent;\n  }\n\n  updatePortalContent(portalElement: HTMLElement): void {\n    if (!this.component.isShow) {\n      portalElement.style.display = 'none';\n      return;\n    }\n\n    portalElement.style.display = 'block';\n\n    // Update the content by cloning from the shadow DOM again\n    const originalPopoverBox = this.component.shadowRoot?.querySelector('.popover__box') as HTMLElement;\n    if (originalPopoverBox) {\n      // Clone the updated content\n      const updatedContent = originalPopoverBox.cloneNode(true) as HTMLElement;\n      updatedContent.style.display = 'block';\n      updatedContent.style.position = 'relative';\n      \n      // Replace the content\n      portalElement.innerHTML = updatedContent.innerHTML;\n    }\n  }\n\n  setupEventListeners(portalElement: HTMLElement): void {\n    // Handle click events to prevent them from bubbling up\n    portalElement.addEventListener('click', (event) => {\n      event.stopPropagation();\n    });\n\n    // Handle any other popover-specific events\n    // For example, if the popover has action buttons, we might need to handle those\n    const actionSlot = portalElement.querySelector('slot[name=\"action\"]');\n    if (actionSlot) {\n      actionSlot.addEventListener('click', (event) => {\n        event.stopPropagation();\n        // Forward the event to the original component if needed\n        this.component.dispatchEvent(new CustomEvent('nile-popover-action', {\n          detail: { originalEvent: event },\n          bubbles: true\n        }));\n      });\n    }\n  }\n\n  cleanupEventListeners(portalElement: HTMLElement): void {\n    // Remove all event listeners\n    const newElement = portalElement.cloneNode(true) as HTMLElement;\n    portalElement.parentNode?.replaceChild(newElement, portalElement);\n  }\n\n  getReferenceElement(): HTMLElement {\n    // Get the anchor element from the slot\n    const anchorSlot = this.component.shadowRoot?.querySelector('slot[name=\"anchor\"]') as HTMLSlotElement;\n    if (anchorSlot) {\n      const assignedElements = anchorSlot.assignedElements();\n      if (assignedElements.length > 0) {\n        return assignedElements[0] as HTMLElement;\n      }\n    }\n    \n    // Fallback to the component itself\n    return this.component;\n  }\n\n  getComponentStyles(): CSSResultGroup | undefined {\n    return (this.component.constructor as any).styles;\n  }\n}\n"]}

package/dist/src/nile-portal-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NilePortalWrapper } from './nile-portal-wrapper.js';

package/dist/src/nile-portal-wrapper/index.js

@@ -0,0 +1,2 @@
+export { NilePortalWrapper } from './nile-portal-wrapper.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-portal-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-portal-wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { NilePortalWrapper } from './nile-portal-wrapper.js';\n"]}

package/dist/src/nile-portal-wrapper/nile-portal-wrapper.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { type Placement, type Boundary } from '@floating-ui/dom';
+export declare class NilePortalWrapper extends LitElement {
+    enabled: boolean;
+    targetElement: HTMLElement | null;
+    content: HTMLElement | null;
+    placement: Placement;
+    offset: number;
+    padding: number;
+    boundary: Boundary;
+    fallbackPlacements: Placement[];
+    strategy: 'absolute' | 'fixed';
+    className: string;
+    zIndex: number;
+    preserveStyles: boolean;
+    cloneContent: boolean;
+    private portalContainer;
+    private clonedContent;
+    private currentPlacement;
+    private currentMiddlewareData;
+    private measuredHeight;
+    private cleanupAutoUpdate;
+    private injectedStyleId;
+    private resizeObserver;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private setupPortal;
+    private createPortalContainer;
+    private createClonedContent;
+    private createPortalListbox;
+    private cloneOption;
+    private positionPortal;
+    private handleSizeMiddleware;
+    private applyPosition;
+    private fallbackPositioning;
+    private setupAutoUpdate;
+    private setupEventListeners;
+    private handleOptionClick;
+    private forwardEvent;
+    private findOriginalElement;
+    private injectStyles;
+    private extractStylesAsCSS;
+    private cleanup;
+    render(): import("lit-html").TemplateResult<1>;
+}