@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-dropdown/portal-utils.js

@@ -0,0 +1,212 @@
+export class PortalUtils {
+    static calculateAvailableSpace(referenceElement) {
+        const rect = referenceElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const spaceRight = viewportWidth - rect.right;
+        const spaceLeft = rect.left;
+        return { spaceAbove, spaceBelow, spaceLeft, spaceRight, viewportHeight, viewportWidth };
+    }
+    static getOptimalPlacement(referenceElement) {
+        const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);
+        if (spaceBelow >= 200 && spaceBelow >= spaceAbove) {
+            return 'bottom';
+        }
+        else if (spaceAbove >= 200 && spaceAbove > spaceBelow) {
+            return 'top';
+        }
+        if (spaceRight >= 200 && spaceRight >= spaceLeft) {
+            return 'right';
+        }
+        else if (spaceLeft >= 200) {
+            return 'left';
+        }
+        return 'bottom';
+    }
+    static findBoundaryElements(component) {
+        const boundaryElements = [];
+        let currentElement = component.parentElement;
+        while (currentElement && currentElement !== document.body) {
+            const computedStyle = window.getComputedStyle(currentElement);
+            const overflow = computedStyle.overflow;
+            const overflowY = computedStyle.overflowY;
+            const overflowX = computedStyle.overflowX;
+            if (overflow === 'auto' || overflow === 'scroll' ||
+                overflowY === 'auto' || overflowY === 'scroll' ||
+                overflowX === 'auto' || overflowX === 'scroll') {
+                boundaryElements.push(currentElement);
+            }
+            if (currentElement.hasAttribute('data-floating-boundary') ||
+                currentElement.classList.contains('floating-boundary') ||
+                currentElement.classList.contains('scroll-container')) {
+                boundaryElements.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return boundaryElements.length > 0 ? boundaryElements : undefined;
+    }
+    static calculateOptimalHeight(referenceRect, viewportHeight, placement) {
+        const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);
+        const spaceAbove = referenceRect.y;
+        if (placement.startsWith('top')) {
+            return Math.max(spaceAbove - 20, 100);
+        }
+        else if (placement.startsWith('bottom')) {
+            return Math.max(spaceBelow - 20, 100);
+        }
+        else if (placement.startsWith('left') || placement.startsWith('right')) {
+            return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+        }
+        return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+    }
+    static 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 '';
+    }
+    static generateStyleId() {
+        return `nile-dropdown-styles-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    static isPositioningOptimal(placement, referenceElement) {
+        const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);
+        const isAbove = placement.startsWith('top');
+        const isBelow = placement.startsWith('bottom');
+        const isLeft = placement.startsWith('left');
+        const isRight = placement.startsWith('right');
+        if (isAbove && spaceBelow > spaceAbove)
+            return false;
+        if (isBelow && spaceAbove > spaceBelow)
+            return false;
+        if (isLeft && spaceRight > spaceLeft)
+            return false;
+        if (isRight && spaceLeft > spaceRight)
+            return false;
+        return true;
+    }
+    static applyCollisionData(element, middlewareData, placement) {
+        if (middlewareData.flip) {
+            const { overflows } = middlewareData.flip;
+            element.setAttribute('data-placement', placement);
+            if (overflows && overflows.length > 0) {
+                const overflowPlacements = overflows.map(overflow => overflow.placement).join(',');
+                element.setAttribute('data-overflow', overflowPlacements);
+            }
+            else {
+                element.removeAttribute('data-overflow');
+            }
+        }
+        if (middlewareData.shift) {
+            const { x, y } = middlewareData.shift;
+            if (x !== undefined && y !== undefined && (x !== 0 || y !== 0)) {
+                element.setAttribute('data-shift', `${x},${y}`);
+            }
+            else {
+                element.removeAttribute('data-shift');
+            }
+        }
+        if (middlewareData.size) {
+            const { availableWidth, availableHeight } = middlewareData.size;
+            if (availableWidth !== undefined) {
+                element.setAttribute('data-available-width', availableWidth.toString());
+            }
+            if (availableHeight !== undefined) {
+                element.setAttribute('data-available-height', availableHeight.toString());
+            }
+        }
+    }
+}
+export class PortalContentUtils {
+    static createPortalPanel(component) {
+        // Find the panel slot content (typically a nile-menu)
+        const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel');
+        if (!panelSlot) {
+            // Fallback: try to find in light DOM
+            const slot = component.querySelector('[slot]');
+            if (!slot || slot.getAttribute('slot') === 'trigger') {
+                return document.createElement('div');
+            }
+        }
+        // Get assigned elements from the slot
+        let assignedElements = panelSlot?.assignedElements({ flatten: true }) || [];
+        // If no assigned elements, try direct children that aren't in trigger slot
+        if (assignedElements.length === 0) {
+            const children = Array.from(component.children);
+            assignedElements = children.filter(child => {
+                const slot = child.getAttribute('slot');
+                return !slot || slot !== 'trigger';
+            });
+        }
+        // Create a container for the cloned panel
+        const panelContainer = document.createElement('div');
+        panelContainer.className = 'dropdown__panel';
+        panelContainer.setAttribute('part', 'panel');
+        panelContainer.setAttribute('aria-hidden', 'false');
+        panelContainer.setAttribute('aria-labelledby', 'dropdown');
+        // Clone all assigned elements
+        assignedElements.forEach((element) => {
+            const clonedElement = element.cloneNode(true);
+            panelContainer.appendChild(clonedElement);
+        });
+        return panelContainer;
+    }
+    static updatePortalPanel(clonedPanel, component) {
+        if (!clonedPanel)
+            return;
+        // Clear existing content
+        clonedPanel.innerHTML = '';
+        // Re-clone the panel content
+        const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel');
+        let assignedElements = panelSlot?.assignedElements({ flatten: true }) || [];
+        if (assignedElements.length === 0) {
+            const children = Array.from(component.children);
+            assignedElements = children.filter(child => {
+                const slot = child.getAttribute('slot');
+                return !slot || slot !== 'trigger';
+            });
+        }
+        assignedElements.forEach((element) => {
+            const clonedElement = element.cloneNode(true);
+            clonedPanel.appendChild(clonedElement);
+        });
+    }
+}
+export class PortalEventUtils {
+    static setupPortalEventListeners(clonedPanel, component) {
+        if (!clonedPanel)
+            return;
+        this.setupMenuSelectListeners(clonedPanel, component);
+        this.setupKeyDownListeners(clonedPanel, component);
+    }
+    static setupMenuSelectListeners(clonedPanel, component) {
+        if (!clonedPanel)
+            return;
+        // Listen for nile-select events from menu items
+        clonedPanel.addEventListener('nile-select', (event) => {
+            const customEvent = event;
+            // Forward the event to the original component
+            if (component.handlePanelSelect) {
+                component.handlePanelSelect(customEvent);
+            }
+        });
+    }
+    static setupKeyDownListeners(clonedPanel, component) {
+        if (!clonedPanel)
+            return;
+        // Listen for keydown events (like Escape)
+        clonedPanel.addEventListener('keydown', (event) => {
+            if (component.handleKeyDown) {
+                component.handleKeyDown(event);
+            }
+        });
+    }
+}
+//# sourceMappingURL=portal-utils.js.map

package/dist/src/nile-dropdown/portal-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-utils.js","sourceRoot":"","sources":["../../../src/nile-dropdown/portal-utils.ts"],"names":[],"mappings":"AAKA,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,uBAAuB,CAAC,gBAA6B;QAQ1D,MAAM,IAAI,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC;QACtD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;QAC1C,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;QACxC,MAAM,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;QAChD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;QAC5B,MAAM,UAAU,GAAG,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;QAE5B,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;IAC1F,CAAC;IAED,MAAM,CAAC,mBAAmB,CAAC,gBAA6B;QACtD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;QAEzG,IAAI,UAAU,IAAI,GAAG,IAAI,UAAU,IAAI,UAAU,EAAE,CAAC;YAClD,OAAO,QAAQ,CAAC;QAClB,CAAC;aAAM,IAAI,UAAU,IAAI,GAAG,IAAI,UAAU,GAAG,UAAU,EAAE,CAAC;YACxD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,UAAU,IAAI,GAAG,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;YACjD,OAAO,OAAO,CAAC;QACjB,CAAC;aAAM,IAAI,SAAS,IAAI,GAAG,EAAE,CAAC;YAC5B,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,MAAM,CAAC,oBAAoB,CAAC,SAAsB;QAChD,MAAM,gBAAgB,GAAc,EAAE,CAAC;QAEvC,IAAI,cAAc,GAAG,SAAS,CAAC,aAAa,CAAC;QAE7C,OAAO,cAAc,IAAI,cAAc,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC1D,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;YAC9D,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;YACxC,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;YAC1C,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;YAE1C,IAAI,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,QAAQ;gBAC5C,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ;gBAC9C,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;gBACnD,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACxC,CAAC;YAED,IAAI,cAAc,CAAC,YAAY,CAAC,wBAAwB,CAAC;gBACrD,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;gBACtD,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBAC1D,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACxC,CAAC;YAED,cAAc,GAAG,cAAc,CAAC,aAAa,CAAC;QAChD,CAAC;QAED,OAAO,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,CAAC;IAED,MAAM,CAAC,sBAAsB,CAC3B,aAAsE,EACtE,cAAsB,EACtB,SAAoB;QAEpB,MAAM,UAAU,GAAG,cAAc,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7E,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC;QAEnC,IAAI,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YACzE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,CAAC,kBAAkB,CAAC,MAAW;QACnC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxE,CAAC;QAED,IAAI,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAC3D,OAAO,MAAM,CAAC,OAAO,CAAC;QACxB,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,CAAC,eAAe;QACpB,OAAO,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;IAC/E,CAAC;IAED,MAAM,CAAC,oBAAoB,CACzB,SAAoB,EACpB,gBAA6B;QAE7B,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;QAEzG,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAE9C,IAAI,OAAO,IAAI,UAAU,GAAG,UAAU;YAAE,OAAO,KAAK,CAAC;QACrD,IAAI,OAAO,IAAI,UAAU,GAAG,UAAU;YAAE,OAAO,KAAK,CAAC;QACrD,IAAI,MAAM,IAAI,UAAU,GAAG,SAAS;YAAE,OAAO,KAAK,CAAC;QACnD,IAAI,OAAO,IAAI,SAAS,GAAG,UAAU;YAAE,OAAO,KAAK,CAAC;QAEpD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,CAAC,kBAAkB,CACvB,OAAoB,EACpB,cAA8B,EAC9B,SAAoB;QAEpB,IAAI,cAAc,CAAC,IAAI,EAAE,CAAC;YACxB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC;YAE1C,OAAO,CAAC,YAAY,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;YAElD,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtC,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACnF,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;QAED,IAAI,cAAc,CAAC,KAAK,EAAE,CAAC;YACzB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC;YAEtC,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;gBAC/D,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;QAED,IAAI,cAAc,CAAC,IAAI,EAAE,CAAC;YACxB,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC;YAEhE,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBACjC,OAAO,CAAC,YAAY,CAAC,sBAAsB,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1E,CAAC;YACD,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;gBAClC,OAAO,CAAC,YAAY,CAAC,uBAAuB,EAAE,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC5E,CAAC;QACH,CAAC;IACH,CAAC;CACF;AAED,MAAM,OAAO,kBAAkB;IAC7B,MAAM,CAAC,iBAAiB,CAAC,SAAc;QACrC,sDAAsD;QACtD,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAoB,CAAC;QAC7F,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,qCAAqC;YACrC,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC/C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,EAAE,CAAC;gBACrD,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;QAED,sCAAsC;QACtC,IAAI,gBAAgB,GAAc,SAAS,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAc,IAAI,EAAE,CAAC;QAEpG,2EAA2E;QAC3E,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAc,CAAC;YAC7D,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;gBACzC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBACxC,OAAO,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,0CAA0C;QAC1C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,cAAc,CAAC,SAAS,GAAG,iBAAiB,CAAC;QAC7C,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC7C,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;QACpD,cAAc,CAAC,YAAY,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;QAE3D,8BAA8B;QAC9B,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;YAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC7D,cAAc,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM,CAAC,iBAAiB,CAAC,WAAwB,EAAE,SAAc;QAC/D,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,yBAAyB;QACzB,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;QAE3B,6BAA6B;QAC7B,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAoB,CAAC;QAC7F,IAAI,gBAAgB,GAAc,SAAS,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAc,IAAI,EAAE,CAAC;QAEpG,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAc,CAAC;YAC7D,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;gBACzC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBACxC,OAAO,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;YAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC7D,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,OAAO,gBAAgB;IAC3B,MAAM,CAAC,yBAAyB,CAAC,WAAwB,EAAE,SAAc;QACvE,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,IAAI,CAAC,wBAAwB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACtD,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,WAAwB,EAAE,SAAc;QACtE,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,gDAAgD;QAChD,WAAW,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,KAAY,EAAE,EAAE;YAC3D,MAAM,WAAW,GAAG,KAAoB,CAAC;YACzC,8CAA8C;YAC9C,IAAI,SAAS,CAAC,iBAAiB,EAAE,CAAC;gBAChC,SAAS,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,qBAAqB,CAAC,WAAwB,EAAE,SAAc;QACnE,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,0CAA0C;QAC1C,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE;YAC/D,IAAI,SAAS,CAAC,aAAa,EAAE,CAAC;gBAC5B,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { \n  type Placement,\n  type MiddlewareData\n} from '@floating-ui/dom';\n\nexport class PortalUtils {\n  static calculateAvailableSpace(referenceElement: HTMLElement): {\n    spaceAbove: number;\n    spaceBelow: number;\n    spaceLeft: number;\n    spaceRight: number;\n    viewportHeight: number;\n    viewportWidth: number;\n  } {\n    const rect = referenceElement.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportWidth = window.innerWidth;\n    const spaceBelow = viewportHeight - rect.bottom;\n    const spaceAbove = rect.top;\n    const spaceRight = viewportWidth - rect.right;\n    const spaceLeft = rect.left;\n    \n    return { spaceAbove, spaceBelow, spaceLeft, spaceRight, viewportHeight, viewportWidth };\n  }\n\n  static getOptimalPlacement(referenceElement: HTMLElement): Placement {\n    const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);\n    \n    if (spaceBelow >= 200 && spaceBelow >= spaceAbove) {\n      return 'bottom';\n    } else if (spaceAbove >= 200 && spaceAbove > spaceBelow) {\n      return 'top';\n    }\n    \n    if (spaceRight >= 200 && spaceRight >= spaceLeft) {\n      return 'right';\n    } else if (spaceLeft >= 200) {\n      return 'left';\n    }\n    \n    return 'bottom';\n  }\n\n  static findBoundaryElements(component: HTMLElement): Element[] | undefined {\n    const boundaryElements: Element[] = [];\n    \n    let currentElement = component.parentElement;\n    \n    while (currentElement && currentElement !== document.body) {\n      const computedStyle = window.getComputedStyle(currentElement);\n      const overflow = computedStyle.overflow;\n      const overflowY = computedStyle.overflowY;\n      const overflowX = computedStyle.overflowX;\n      \n      if (overflow === 'auto' || overflow === 'scroll' || \n          overflowY === 'auto' || overflowY === 'scroll' ||\n          overflowX === 'auto' || overflowX === 'scroll') {\n        boundaryElements.push(currentElement);\n      }\n      \n      if (currentElement.hasAttribute('data-floating-boundary') ||\n          currentElement.classList.contains('floating-boundary') ||\n          currentElement.classList.contains('scroll-container')) {\n        boundaryElements.push(currentElement);\n      }\n      \n      currentElement = currentElement.parentElement;\n    }\n    \n    return boundaryElements.length > 0 ? boundaryElements : undefined;\n  }\n\n  static calculateOptimalHeight(\n    referenceRect: { x: number; y: number; width: number; height: number },\n    viewportHeight: number,\n    placement: Placement\n  ): number {\n    const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);\n    const spaceAbove = referenceRect.y;\n    \n    if (placement.startsWith('top')) {\n      return Math.max(spaceAbove - 20, 100);\n    } else if (placement.startsWith('bottom')) {\n      return Math.max(spaceBelow - 20, 100);\n    } else if (placement.startsWith('left') || placement.startsWith('right')) {\n      return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);\n    }\n    \n    return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);\n  }\n\n  static extractStylesAsCSS(styles: any): string {\n    if (typeof styles === 'string') {\n      return styles;\n    }\n    \n    if (Array.isArray(styles)) {\n      return styles.map(style => this.extractStylesAsCSS(style)).join('\\n');\n    }\n    \n    if (styles && typeof styles === 'object' && styles.cssText) {\n      return styles.cssText;\n    }\n    \n    return '';\n  }\n\n  static generateStyleId(): string {\n    return `nile-dropdown-styles-${Math.random().toString(36).substring(2, 11)}`;\n  }\n\n  static isPositioningOptimal(\n    placement: Placement,\n    referenceElement: HTMLElement\n  ): boolean {\n    const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);\n    \n    const isAbove = placement.startsWith('top');\n    const isBelow = placement.startsWith('bottom');\n    const isLeft = placement.startsWith('left');\n    const isRight = placement.startsWith('right');\n    \n    if (isAbove && spaceBelow > spaceAbove) return false;\n    if (isBelow && spaceAbove > spaceBelow) return false;\n    if (isLeft && spaceRight > spaceLeft) return false;\n    if (isRight && spaceLeft > spaceRight) return false;\n    \n    return true;\n  }\n\n  static applyCollisionData(\n    element: HTMLElement,\n    middlewareData: MiddlewareData,\n    placement: Placement\n  ): void {\n    if (middlewareData.flip) {\n      const { overflows } = middlewareData.flip;\n      \n      element.setAttribute('data-placement', placement);\n      \n      if (overflows && overflows.length > 0) {\n        const overflowPlacements = overflows.map(overflow => overflow.placement).join(',');\n        element.setAttribute('data-overflow', overflowPlacements);\n      } else {\n        element.removeAttribute('data-overflow');\n      }\n    }\n\n    if (middlewareData.shift) {\n      const { x, y } = middlewareData.shift;\n      \n      if (x !== undefined && y !== undefined && (x !== 0 || y !== 0)) {\n        element.setAttribute('data-shift', `${x},${y}`);\n      } else {\n        element.removeAttribute('data-shift');\n      }\n    }\n\n    if (middlewareData.size) {\n      const { availableWidth, availableHeight } = middlewareData.size;\n      \n      if (availableWidth !== undefined) {\n        element.setAttribute('data-available-width', availableWidth.toString());\n      }\n      if (availableHeight !== undefined) {\n        element.setAttribute('data-available-height', availableHeight.toString());\n      }\n    }\n  }\n}\n\nexport class PortalContentUtils {\n  static createPortalPanel(component: any): HTMLElement {\n    // Find the panel slot content (typically a nile-menu)\n    const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel') as HTMLSlotElement;\n    if (!panelSlot) {\n      // Fallback: try to find in light DOM\n      const slot = component.querySelector('[slot]');\n      if (!slot || slot.getAttribute('slot') === 'trigger') {\n        return document.createElement('div');\n      }\n    }\n\n    // Get assigned elements from the slot\n    let assignedElements: Element[] = panelSlot?.assignedElements({ flatten: true }) as Element[] || [];\n    \n    // If no assigned elements, try direct children that aren't in trigger slot\n    if (assignedElements.length === 0) {\n      const children = Array.from(component.children) as Element[];\n      assignedElements = children.filter(child => {\n        const slot = child.getAttribute('slot');\n        return !slot || slot !== 'trigger';\n      });\n    }\n\n    // Create a container for the cloned panel\n    const panelContainer = document.createElement('div');\n    panelContainer.className = 'dropdown__panel';\n    panelContainer.setAttribute('part', 'panel');\n    panelContainer.setAttribute('aria-hidden', 'false');\n    panelContainer.setAttribute('aria-labelledby', 'dropdown');\n\n    // Clone all assigned elements\n    assignedElements.forEach((element: Element) => {\n      const clonedElement = element.cloneNode(true) as HTMLElement;\n      panelContainer.appendChild(clonedElement);\n    });\n\n    return panelContainer;\n  }\n\n  static updatePortalPanel(clonedPanel: HTMLElement, component: any): void {\n    if (!clonedPanel) return;\n\n    // Clear existing content\n    clonedPanel.innerHTML = '';\n\n    // Re-clone the panel content\n    const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel') as HTMLSlotElement;\n    let assignedElements: Element[] = panelSlot?.assignedElements({ flatten: true }) as Element[] || [];\n    \n    if (assignedElements.length === 0) {\n      const children = Array.from(component.children) as Element[];\n      assignedElements = children.filter(child => {\n        const slot = child.getAttribute('slot');\n        return !slot || slot !== 'trigger';\n      });\n    }\n\n    assignedElements.forEach((element: Element) => {\n      const clonedElement = element.cloneNode(true) as HTMLElement;\n      clonedPanel.appendChild(clonedElement);\n    });\n  }\n}\n\nexport class PortalEventUtils {\n  static setupPortalEventListeners(clonedPanel: HTMLElement, component: any): void {\n    if (!clonedPanel) return;\n\n    this.setupMenuSelectListeners(clonedPanel, component);\n    this.setupKeyDownListeners(clonedPanel, component);\n  }\n\n  static setupMenuSelectListeners(clonedPanel: HTMLElement, component: any): void {\n    if (!clonedPanel) return;\n\n    // Listen for nile-select events from menu items\n    clonedPanel.addEventListener('nile-select', (event: Event) => {\n      const customEvent = event as CustomEvent;\n      // Forward the event to the original component\n      if (component.handlePanelSelect) {\n        component.handlePanelSelect(customEvent);\n      }\n    });\n  }\n\n  static setupKeyDownListeners(clonedPanel: HTMLElement, component: any): void {\n    if (!clonedPanel) return;\n\n    // Listen for keydown events (like Escape)\n    clonedPanel.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (component.handleKeyDown) {\n        component.handleKeyDown(event);\n      }\n    });\n  }\n}\n\n"]}

package/dist/src/nile-empty-state/index.js

@@ -0,0 +1,2 @@
+export { NileEmptyState } from './nile-empty-state';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-empty-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileEmptyState } from './nile-empty-state';"]}

package/dist/src/nile-empty-state/nile-empty-state.css.js

@@ -0,0 +1,149 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* 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 { css } from 'lit';
+/**
+ * EmptyState CSS
+ */
+export const styles = css `
+  :host {
+    display:inline-flex;
+    width:100%;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .empty-state--sm {
+    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-subtext-line-height:20px;
+    
+    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
+    --nile-es-img-height:118px;
+    --nile-es-img-width:152px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
+  }
+
+  .empty-state--md {
+    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+
+    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
+    --nile-es-img-height:128px;
+    --nile-es-img-width:172px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+  }
+
+  .empty-state--lg {
+    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
+    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+
+    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
+    --nile-es-img-height:160px;
+    --nile-es-img-width:220px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+  }
+
+  .empty-state {
+    min-width:300px;
+    max-width:512px;
+    width:100%;
+    height:max-content;
+    display:flex;
+    flex-direction:column;
+    row-gap:var(--nile-es-gap);
+  }
+
+  .empty-state__body {
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:center;
+    row-gap:var(--nile-es-body-gap)
+  }
+
+  .empty-state__body--content {
+    position:relative;
+  }
+
+  .empty-state__img__icon {
+    display: var(--ng-display-flex);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .empty-state__body--tonal {
+    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
+    width: 104px;
+    height: 104px;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    display:flex;
+    justify-content:center;
+    align-items:center;
+  }
+
+  .nile-flat-type-icon {
+    height:var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: var(--nile-es-flat-option-border-radius);
+
+    background-color: white;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .empty__state__text-section {
+    display:flex;
+    flex-direction:column;
+    gap:var(--nile-es-text-gap);
+    max-width:80%;
+  }
+
+  .empty-state__text {
+    font-size: var(--nile-es-text-size);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    line-height: var(--nile-es-text-line-height);
+    text-align: center;
+    font-style: normal;
+  }
+
+  .empty-state__subtext {
+    font-size: var(--nile-es-subtext-size);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-es-subtext-line-height);
+    text-align: center;
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-style: normal;
+  }
+
+  .empty-state-actions {
+    display:flex;
+    justify-content:center;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-empty-state.css.js.map

package/dist/src/nile-empty-state/nile-empty-state.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\n/**\n * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    width:100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n  }\n\n  .empty-state--md {\n    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    display: var(--ng-display-flex);\n    justify-content: center;\n    align-items: center;\n  }\n\n  .empty-state__body--tonal {\n    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));\n    width: 104px;\n    height: 104px;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-empty-state.css';
+import NileElement from '../internal/nile-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/**
+ * Nile empty-state component.
+ *
+ * @tag nile-empty-state
+ *
+ */
+let NileEmptyState = class NileEmptyState extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.variant = 'tonal';
+        this.icon = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
+        this.grayscale = false;
+        this.text = 'Empty State';
+        this.subText = 'No Data';
+        this.svgIconSize = 40;
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-empty-state
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <div part="container" class="${classMap({
+            'empty-state': true,
+            'empty-state--sm': this.size == 'sm',
+            'empty-state--md': this.size == 'md',
+            'empty-state--lg': this.size == 'lg'
+        })}">
+        <div part="body" class="${classMap({ 'empty-state__body': true })}">
+
+          ${this.variant == 'content' ? html `
+            <div part="content-image"  class="empty-state__body--content">
+              ${!this.icon && !this.svgIconUrl ? nothing : html `
+                <div part="icon-wrapper" class="empty-state__img__icon">
+                  ${this.svgIconUrl ? html `
+                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
+                  ` : html `
+                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+                  `}
+                </div>`}
+            </div>` : nothing}
+
+          ${this.variant == 'tonal' ? html `
+            <div part="tonal-body" class="empty-state__body--tonal">
+              ${this.svgIconUrl ? html `
+                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+              ` : html `
+                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
+              `}
+            </div>` : nothing}
+
+          ${this.variant == 'flat' ? html `
+            <div part="flat-body" class="empty-state__body--flat">
+					<span class="nile-flat-type-icon">
+						${this.svgIconUrl ? html `
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+            ` : html `
+              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+            `}
+					</span>
+            </div>` : nothing}
+
+          <div part="text-section" class="empty__state__text-section">
+            <div part="text" class="empty-state__text">${this.text}</div>
+            <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
+          </div>
+        </div>
+
+        <div part="actions" class="empty-state-actions">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], NileEmptyState.prototype, "size", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "variant", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileEmptyState.prototype, "grayscale", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "text", void 0);
+__decorate([
+    property({ attribute: 'sub-text' })
+], NileEmptyState.prototype, "subText", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "svgIconUrl", void 0);
+__decorate([
+    property({ type: Number })
+], NileEmptyState.prototype, "svgIconSize", void 0);
+__decorate([
+    property({ type: String })
+], NileEmptyState.prototype, "svgIconColor", void 0);
+NileEmptyState = __decorate([
+    customElement('nile-empty-state')
+], NileEmptyState);
+export { NileEmptyState };
+export default NileEmptyState;
+//# sourceMappingURL=nile-empty-state.js.map

package/dist/src/nile-empty-state/nile-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\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(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg'  = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n  @property() svgIconUrl: string;\n  @property({type: Number}) svgIconSize: number = 40;\n  @property({type: String}) svgIconColor: string;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div part=\"container\" class=\"${classMap({\n        'empty-state': true,\n        'empty-state--sm': this.size == 'sm',\n        'empty-state--md': this.size == 'md',\n        'empty-state--lg': this.size == 'lg'\n      })}\">\n        <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n          ${this.variant == 'content' ? html`\n            <div part=\"content-image\"  class=\"empty-state__body--content\">\n              ${!this.icon && !this.svgIconUrl ? nothing : html`\n                <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n                  ${this.svgIconUrl ? html`\n                    <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\"  color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n                    <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n                  ` : html`\n                    <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n                  `}\n                </div>`\n              }\n            </div>`: nothing\n          }\n\n          ${this.variant == 'tonal' ? html`\n            <div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n              ${this.svgIconUrl ? html`\n                <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n              ` : html`\n                <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"40\"></nile-icon>\n              `}\n            </div>`: nothing\n          }\n\n          ${this.variant == 'flat' ? html`\n            <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n            ` : html`\n              <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n            `}\n\t\t\t\t\t</span>\n            </div>`: nothing\n          }\n\n          <div part=\"text-section\" class=\"empty__state__text-section\">\n            <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n            <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n          </div>\n        </div>\n\n        <div part=\"actions\" class=\"empty-state-actions\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}\n"]}

package/dist/src/nile-empty-state/nile-empty-state.test.js

@@ -0,0 +1,63 @@
+import { fixture, html, expect } from "@open-wc/testing";
+import './nile-empty-state';
+describe('NileEmptyState', () => {
+    it('renders correctly with default properties', async () => {
+        const el = await fixture(html `<nile-empty-state></nile-empty-state>`);
+        expect(el.size).to.equal('md');
+        expect(el.variant).to.equal('tonal');
+        expect(el.icon).to.equal('error');
+        expect(el.grayscale).to.be.false;
+        expect(el.text).to.equal('Empty State');
+        expect(el.subText).to.equal('No Data');
+    });
+    it('should reflect properties to attributes', async () => {
+        const iconName = "action";
+        const el = await fixture(html `
+          <nile-empty-state size="sm" variant="flat" icon=${iconName} grayscale text="Test state text" sub-text="Test sub text"></nile-empty-state>
+        `);
+        expect(el.getAttribute('size')).to.equal('sm');
+        expect(el.getAttribute('variant')).to.equal('flat');
+        expect(el.getAttribute('icon')).to.equal(iconName);
+        expect(el.hasAttribute('grayscale')).to.be.true;
+        expect(el.getAttribute('text')).to.equal('Test state text');
+        expect(el.getAttribute('sub-text')).to.equal('Test sub text');
+    });
+    it('should render different sizes correctly', async () => {
+        const sizes = ['sm', 'md', 'lg'];
+        for (const size of sizes) {
+            const el = await fixture(html `<nile-empty-state size="${size}"></nile-empty-state>`);
+            const container = el.shadowRoot.querySelector('.empty-state');
+            expect(container.classList.contains(`empty-state--${size}`)).to.be.true;
+        }
+    });
+    it('should render different variants correctly', async () => {
+        const variants = ['flat', 'content', 'tonal'];
+        for (const variant of variants) {
+            const el = await fixture(html `<nile-empty-state variant="${variant}"></nile-empty-state>`);
+            const container = el.shadowRoot.querySelector(`.empty-state__body--${variant}`);
+            expect(container).to.exist;
+        }
+    });
+    it('should render text properties correctly', async () => {
+        const sampleText = 'Custom Text';
+        const sampleSubText = "Custom SubText";
+        const el = await fixture(html `
+          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>
+        `);
+        const textEl = el.shadowRoot.querySelector('.empty-state__text');
+        const subTextEl = el.shadowRoot.querySelector('.empty-state__subtext');
+        expect(textEl.textContent).to.equal(sampleText);
+        expect(subTextEl.textContent).to.equal(sampleSubText);
+    });
+    it('should render slot content', async () => {
+        const el = await fixture(html `
+          <nile-empty-state>
+            <div class="slot-content">Slot Content</div>
+          </nile-empty-state>
+        `);
+        const slotContent = el.querySelector('.slot-content');
+        expect(slotContent).to.exist;
+        expect(slotContent.textContent).to.equal('Slot Content');
+    });
+});
+//# sourceMappingURL=nile-empty-state.test.js.map