@aquera/nile-elements 1.4.4-beta-1.1 → 1.4.4-beta-1.2

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

@@ -1,106 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"version":3,"file":"popover-portal-handler.js","sourceRoot":"","sources":["../../../src/nile-popover/popover-portal-handler.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,OAAO,oBAAoB;IAG/B,YACU,SAAc,EACd,SAAuB,EAAE;QADzB,cAAS,GAAT,SAAS,CAAK;QACd,WAAM,GAAN,MAAM,CAAmB;QAJ3B,yBAAoB,GAAuB,IAAI,CAAC;IAKrD,CAAC;IAEJ,mBAAmB;QACjB,0GAA0G;QAC1G,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,eAAe,CAAgB,CAAC;QAC5F,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,oCAAoC;YACpC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACtC,CAAC;QAED,uCAAuC;QACvC,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;QACtE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtD,OAAO,IAAI,CAAC,oBAAoB,CAAC;IACnC,CAAC;IAEO,qBAAqB;QAC3B,kDAAkD;QAClD,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1D,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAG,cAAc,CAAC;QACrD,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC1D,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtD,2BAA2B;QAC3B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnD,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;QAC1C,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QAEhD,+BAA+B;QAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEtC,yBAAyB;QACzB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,SAAS,GAAG,iBAAiB,CAAC;QAEzC,kBAAkB;QAClB,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACpD,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAElD,OAAO,IAAI,CAAC,oBAAoB,CAAC;IACnC,CAAC;IAED,mBAAmB,CAAC,aAA0B;QAC5C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC3B,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACrC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAEtC,0DAA0D;QAC1D,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,eAAe,CAAgB,CAAC;QACpG,IAAI,kBAAkB,EAAE,CAAC;YACvB,4BAA4B;YAC5B,MAAM,cAAc,GAAG,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YACzE,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YACvC,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YAE3C,sBAAsB;YACtB,aAAa,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC;QACrD,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,aAA0B;QAC5C,uDAAuD;QACvD,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YAChD,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,2CAA2C;QAC3C,gFAAgF;QAChF,MAAM,UAAU,GAAG,aAAa,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACtE,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,wDAAwD;gBACxD,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBAClE,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;oBAChC,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC,CAAC;YACN,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,aAA0B;QAC9C,6BAA6B;QAC7B,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;QAChE,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IACpE,CAAC;IAED,mBAAmB;QACjB,uCAAuC;QACvC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,qBAAqB,CAAoB,CAAC;QACtG,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAC;YACvD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAChC,OAAO,gBAAgB,CAAC,CAAC,CAAgB,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,mCAAmC;QACnC,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,kBAAkB;QAChB,OAAQ,IAAI,CAAC,SAAS,CAAC,WAAmB,CAAC,MAAM,CAAC;IACpD,CAAC;CACF","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

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

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,47 +0,0 @@
-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>;
-}

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

@@ -1,451 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { autoUpdate, computePosition, flip, offset, shift, size, platform } from '@floating-ui/dom';
-let NilePortalWrapper = class NilePortalWrapper extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.enabled = false;
-        this.targetElement = null;
-        this.content = null;
-        this.placement = 'bottom';
-        this.offset = 4;
-        this.padding = 10;
-        this.boundary = document.documentElement;
-        this.fallbackPlacements = ['bottom', 'top', 'bottom-start', 'top-start', 'bottom-end', 'top-end'];
-        this.strategy = 'fixed';
-        this.className = '';
-        this.zIndex = 9999;
-        this.preserveStyles = true;
-        this.cloneContent = true;
-        this.portalContainer = null;
-        this.clonedContent = null;
-        this.currentPlacement = 'bottom';
-        this.currentMiddlewareData = null;
-        this.measuredHeight = null;
-        this.cleanupAutoUpdate = null;
-        this.injectedStyleId = null;
-        this.resizeObserver = null;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.enabled) {
-            this.setupPortal();
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.cleanup();
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('enabled')) {
-            if (this.enabled) {
-                this.setupPortal();
-            }
-            else {
-                this.cleanup();
-            }
-        }
-        if (this.enabled && (changedProperties.has('targetElement') || changedProperties.has('content'))) {
-            this.cleanup();
-            this.setupPortal();
-        }
-    }
-    async setupPortal() {
-        if (!this.enabled || !this.targetElement || !this.content)
-            return;
-        await this.updateComplete;
-        // Create portal container
-        this.portalContainer = this.createPortalContainer();
-        document.body.appendChild(this.portalContainer);
-        // Create cloned content
-        this.clonedContent = this.createClonedContent();
-        this.portalContainer.appendChild(this.clonedContent);
-        // Make sure the cloned content is visible
-        this.clonedContent.style.display = '';
-        this.clonedContent.style.visibility = '';
-        // Inject styles if needed
-        if (this.preserveStyles) {
-            this.injectStyles();
-        }
-        // Position the portal
-        await this.positionPortal();
-        // Setup auto-update
-        this.setupAutoUpdate();
-        // Setup event listeners
-        this.setupEventListeners();
-    }
-    createPortalContainer() {
-        const container = document.createElement('div');
-        container.style.position = 'absolute';
-        container.style.zIndex = this.zIndex.toString();
-        container.style.pointerEvents = 'none';
-        container.className = `nile-portal-wrapper ${this.className}`;
-        // Copy CSS classes from the original content to maintain styling context
-        if (this.content) {
-            const contentClasses = Array.from(this.content.classList);
-            contentClasses.forEach(cls => {
-                if (!container.classList.contains(cls)) {
-                    container.classList.add(cls);
-                }
-            });
-        }
-        return container;
-    }
-    createClonedContent() {
-        if (!this.content) {
-            throw new Error('Content element is required for cloning');
-        }
-        // Create a new listbox structure based on the original content
-        const clonedContent = this.createPortalListbox();
-        return clonedContent;
-    }
-    createPortalListbox() {
-        const listbox = document.createElement('div');
-        listbox.className = 'select__listbox';
-        listbox.setAttribute('tabindex', '-1');
-        listbox.setAttribute('role', 'listbox');
-        listbox.setAttribute('aria-expanded', 'true');
-        // Get the nile-select component
-        const selectComponent = this.targetElement?.closest('nile-select');
-        if (!selectComponent)
-            return listbox;
-        // Create options container
-        const optionsContainer = document.createElement('div');
-        optionsContainer.className = 'select__options';
-        // Get options directly from the component (not from the slot)
-        const options = Array.from(selectComponent.querySelectorAll('nile-option'));
-        options.forEach((option) => {
-            const clonedOption = this.cloneOption(option);
-            optionsContainer.appendChild(clonedOption);
-        });
-        listbox.appendChild(optionsContainer);
-        return listbox;
-    }
-    cloneOption(option) {
-        const clonedOption = option.cloneNode(true);
-        // Copy all attributes
-        Array.from(option.attributes).forEach(attr => {
-            clonedOption.setAttribute(attr.name, attr.value);
-        });
-        // Copy properties (matching the original implementation)
-        const properties = ['selected', 'disabled', 'current', 'hidden'];
-        properties.forEach(prop => {
-            if (option[prop] !== undefined) {
-                clonedOption[prop] = option[prop];
-            }
-        });
-        return clonedOption;
-    }
-    async positionPortal() {
-        if (!this.portalContainer || !this.targetElement)
-            return;
-        try {
-            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.portalContainer, {
-                placement: this.placement,
-                strategy: this.strategy,
-                middleware: [
-                    offset(this.offset),
-                    size({
-                        apply: this.handleSizeMiddleware.bind(this),
-                        padding: this.padding,
-                        boundary: this.boundary
-                    }),
-                    flip({
-                        fallbackPlacements: this.fallbackPlacements,
-                        fallbackStrategy: 'bestFit',
-                        padding: this.padding,
-                        boundary: this.boundary
-                    }),
-                    shift({
-                        padding: this.padding,
-                        crossAxis: true,
-                        boundary: this.boundary
-                    })
-                ],
-                platform: platform
-            });
-            this.applyPosition(x, y, placement, middlewareData);
-        }
-        catch (error) {
-            console.warn('Floating UI positioning failed, falling back to simple positioning:', error);
-            this.fallbackPositioning();
-        }
-    }
-    handleSizeMiddleware({ availableWidth, availableHeight, elements }) {
-        elements.floating.style.maxWidth = `${availableWidth}px`;
-        elements.floating.style.maxHeight = `${availableHeight}px`;
-    }
-    applyPosition(x, y, placement, middlewareData) {
-        if (!this.portalContainer)
-            return;
-        Object.assign(this.portalContainer.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            position: this.strategy,
-            pointerEvents: 'auto'
-        });
-        this.currentPlacement = placement;
-        this.currentMiddlewareData = middlewareData;
-        // Apply placement class
-        const placementClass = placement.split('-')[0];
-        this.portalContainer.className = `nile-portal-wrapper select__listbox--${placementClass} ${this.className}`;
-        // Set width to match target element
-        if (this.targetElement) {
-            const targetRect = this.targetElement.getBoundingClientRect();
-            this.portalContainer.style.width = `${targetRect.width}px`;
-        }
-    }
-    fallbackPositioning() {
-        if (!this.portalContainer || !this.targetElement)
-            return;
-        const rect = this.targetElement.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const popupHeight = this.measuredHeight || 200;
-        const spaceBelow = viewportHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        let topPosition;
-        let placementClass;
-        let maxHeight;
-        if (spaceAbove > spaceBelow) {
-            maxHeight = Math.max(spaceAbove - 20, 100);
-            topPosition = Math.max(rect.top - maxHeight - this.offset, 10);
-            placementClass = 'top';
-        }
-        else {
-            maxHeight = Math.max(spaceBelow - 20, 100);
-            topPosition = rect.bottom + this.offset;
-            placementClass = 'bottom';
-        }
-        this.portalContainer.style.left = `${rect.left}px`;
-        this.portalContainer.style.top = `${topPosition}px`;
-        this.portalContainer.style.width = `${rect.width}px`;
-        this.portalContainer.style.maxHeight = `${maxHeight}px`;
-        this.portalContainer.style.pointerEvents = 'auto';
-        this.portalContainer.className = `nile-portal-wrapper select__listbox--${placementClass} ${this.className}`;
-    }
-    setupAutoUpdate() {
-        if (!this.portalContainer || !this.targetElement)
-            return;
-        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.portalContainer, () => {
-            this.positionPortal();
-        }, {
-            ancestorScroll: true,
-            ancestorResize: true,
-            elementResize: true,
-            layoutShift: true,
-            animationFrame: true
-        });
-    }
-    setupEventListeners() {
-        if (!this.clonedContent)
-            return;
-        // Handle option clicks
-        this.clonedContent.addEventListener('mouseup', (event) => {
-            const target = event.target;
-            const option = target.closest('nile-option');
-            if (option) {
-                this.handleOptionClick(option);
-            }
-        });
-        // Handle other events that need to be forwarded
-        const events = ['click', 'keydown', 'keyup', 'focus', 'blur'];
-        events.forEach(eventType => {
-            this.clonedContent?.addEventListener(eventType, (event) => {
-                this.forwardEvent(event, eventType);
-            });
-        });
-    }
-    handleOptionClick(clonedOption) {
-        if (!this.content)
-            return;
-        // Find the original option by value
-        const value = clonedOption.getAttribute('value');
-        if (!value)
-            return;
-        const originalOption = this.content.querySelector(`nile-option[value="${value}"]`);
-        if (!originalOption)
-            return;
-        // Dispatch a synthetic event on the original option
-        const syntheticEvent = new MouseEvent('mouseup', {
-            bubbles: true,
-            cancelable: true,
-            view: window
-        });
-        Object.defineProperty(syntheticEvent, 'target', {
-            value: originalOption,
-            writable: false
-        });
-        originalOption.dispatchEvent(syntheticEvent);
-    }
-    forwardEvent(event, eventType) {
-        const target = event.target;
-        const originalTarget = this.findOriginalElement(target);
-        if (originalTarget) {
-            const syntheticEvent = new event.constructor(eventType, {
-                view: window,
-                ...event,
-                bubbles: true,
-                cancelable: true
-            });
-            Object.defineProperty(syntheticEvent, 'target', {
-                value: originalTarget,
-                writable: false
-            });
-            originalTarget.dispatchEvent(syntheticEvent);
-        }
-    }
-    findOriginalElement(clonedElement) {
-        if (!this.content || !this.clonedContent)
-            return null;
-        if (clonedElement.tagName === 'NILE-OPTION') {
-            const value = clonedElement.getAttribute('value');
-            if (value) {
-                return this.content.querySelector(`nile-option[value="${value}"]`);
-            }
-        }
-        const tagName = clonedElement.tagName;
-        const attributes = Array.from(clonedElement.attributes).map(attr => `${attr.name}="${attr.value}"`);
-        const originalElements = this.content.querySelectorAll(tagName);
-        for (const original of originalElements) {
-            const originalAttributes = Array.from(original.attributes).map(attr => `${attr.name}="${attr.value}"`);
-            if (JSON.stringify(originalAttributes) === JSON.stringify(attributes)) {
-                return original;
-            }
-        }
-        return null;
-    }
-    injectStyles() {
-        if (!this.preserveStyles || !this.portalContainer)
-            return;
-        const styleId = `nile-portal-styles-${Math.random().toString(36).substring(2, 11)}`;
-        if (document.getElementById(styleId))
-            return;
-        // Try to get styles from the component's constructor
-        const component = this.targetElement?.closest('nile-select');
-        if (component) {
-            const componentStyles = component.constructor.styles;
-            if (componentStyles) {
-                const styleElement = document.createElement('style');
-                styleElement.id = styleId;
-                styleElement.textContent = this.extractStylesAsCSS(componentStyles);
-                document.head.appendChild(styleElement);
-                this.injectedStyleId = styleId;
-                return;
-            }
-        }
-        // Fallback: try to copy styles from shadow root
-        if (this.content) {
-            const shadowRoot = this.content.getRootNode();
-            if (shadowRoot && shadowRoot.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-                const styleElements = shadowRoot.querySelectorAll('style');
-                styleElements.forEach(styleEl => {
-                    const styleElement = document.createElement('style');
-                    styleElement.id = `${styleId}-${Math.random().toString(36).substring(2, 6)}`;
-                    styleElement.textContent = styleEl.textContent;
-                    document.head.appendChild(styleElement);
-                });
-                this.injectedStyleId = styleId;
-            }
-        }
-    }
-    extractStylesAsCSS(styles) {
-        if (typeof styles === 'string') {
-            return styles;
-        }
-        if (Array.isArray(styles)) {
-            return styles.map(style => this.extractStylesAsCSS(style)).join('\n');
-        }
-        if (styles && typeof styles === 'object' && styles.cssText) {
-            return styles.cssText;
-        }
-        return '';
-    }
-    cleanup() {
-        this.cleanupAutoUpdate?.();
-        this.cleanupAutoUpdate = null;
-        if (this.portalContainer && this.portalContainer.parentNode) {
-            this.portalContainer.parentNode.removeChild(this.portalContainer);
-        }
-        if (this.injectedStyleId) {
-            const styleElement = document.getElementById(this.injectedStyleId);
-            if (styleElement) {
-                styleElement.remove();
-            }
-            this.injectedStyleId = null;
-        }
-        this.portalContainer = null;
-        this.clonedContent = null;
-        this.currentPlacement = 'bottom';
-        this.currentMiddlewareData = null;
-        this.measuredHeight = null;
-    }
-    render() {
-        return html ``;
-    }
-};
-NilePortalWrapper.styles = css `
-    :host {
-      display: none;
-    }
-  `;
-__decorate([
-    property({ type: Boolean })
-], NilePortalWrapper.prototype, "enabled", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], NilePortalWrapper.prototype, "targetElement", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], NilePortalWrapper.prototype, "content", void 0);
-__decorate([
-    property()
-], NilePortalWrapper.prototype, "placement", void 0);
-__decorate([
-    property({ type: Number })
-], NilePortalWrapper.prototype, "offset", void 0);
-__decorate([
-    property({ type: Number })
-], NilePortalWrapper.prototype, "padding", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], NilePortalWrapper.prototype, "boundary", void 0);
-__decorate([
-    property({ type: Array, attribute: false })
-], NilePortalWrapper.prototype, "fallbackPlacements", void 0);
-__decorate([
-    property()
-], NilePortalWrapper.prototype, "strategy", void 0);
-__decorate([
-    property()
-], NilePortalWrapper.prototype, "className", void 0);
-__decorate([
-    property({ type: Number })
-], NilePortalWrapper.prototype, "zIndex", void 0);
-__decorate([
-    property({ type: Boolean })
-], NilePortalWrapper.prototype, "preserveStyles", void 0);
-__decorate([
-    property({ type: Boolean })
-], NilePortalWrapper.prototype, "cloneContent", void 0);
-__decorate([
-    state()
-], NilePortalWrapper.prototype, "portalContainer", void 0);
-__decorate([
-    state()
-], NilePortalWrapper.prototype, "clonedContent", void 0);
-__decorate([
-    state()
-], NilePortalWrapper.prototype, "currentPlacement", void 0);
-__decorate([
-    state()
-], NilePortalWrapper.prototype, "currentMiddlewareData", void 0);
-__decorate([
-    state()
-], NilePortalWrapper.prototype, "measuredHeight", void 0);
-NilePortalWrapper = __decorate([
-    customElement('nile-portal-wrapper')
-], NilePortalWrapper);
-export { NilePortalWrapper };
-//# sourceMappingURL=nile-portal-wrapper.js.map