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

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>;
+}

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

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