@aquera/nile-elements 1.3.9-beta-1.4 → 1.4.0-beta-1.0

package/dist/src/nile-select/body-append-manager.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 type NilePopup from '../nile-popup/nile-popup';
+import type NileSelect from './nile-select';
+/**
+ * Manager class for handling bodyAppend functionality in nile-select
+ * This class manages moving select options to document.body to avoid CSS clipping issues
+ */
+export declare class BodyAppendManager {
+    private bodyContainer?;
+    private originalOptions;
+    private boundHandlePopupReposition?;
+    private selectElement;
+    private popup?;
+    private listbox?;
+    private injectedStyleId?;
+    constructor(selectElement: NileSelect);
+    /**
+     * Sets the popup and listbox references
+     */
+    setReferences(popup: NilePopup, listbox: HTMLSlotElement): void;
+    /**
+     * Handles the bodyAppend change
+     */
+    handleBodyAppendChange(bodyAppend: boolean): void;
+    /**
+     * Handles popup reposition events to update body container position
+     */
+    private handlePopupReposition;
+    /**
+     * Extracts styles as CSS string from various style formats
+     */
+    private extractStylesAsCSS;
+    /**
+     * Injects component styles into document head
+     */
+    private injectStylesToDocument;
+    /**
+     * Adopts component styles to the body container (similar to portal-manager pattern)
+     */
+    private adoptStylesToBodyContainer;
+    /**
+     * Creates a body container for options when bodyAppend is true
+     */
+    private createBodyContainer;
+    /**
+     * Cleans up the body container
+     */
+    private cleanupBodyContainer;
+    /**
+     * Moves options to body container when bodyAppend is true
+     */
+    private moveOptionsToBody;
+    /**
+     * Restores options to their original position
+     */
+    private restoreOptionsFromBody;
+    /**
+     * Updates body container visibility and positioning
+     */
+    private updateBodyContainerVisibility;
+    /**
+     * Gets all options from both original location and body container
+     */
+    private getAllOptions;
+    /**
+     * Updates body container visibility when select opens/closes
+     */
+    updateVisibility(visible: boolean): void;
+    /**
+     * Checks if bodyAppend is active (has body container)
+     */
+    isActive(): boolean;
+    /**
+     * Gets the body container element
+     */
+    getBodyContainer(): HTMLElement | undefined;
+    /**
+     * Gets the listbox container element inside the body container
+     */
+    getListboxContainer(): HTMLElement | undefined;
+    /**
+     * Cleans up all resources
+     */
+    destroy(): void;
+}

package/dist/src/nile-select/body-append-manager.js

@@ -0,0 +1,298 @@
+/**
+ * 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.
+ */
+/**
+ * Manager class for handling bodyAppend functionality in nile-select
+ * This class manages moving select options to document.body to avoid CSS clipping issues
+ */
+export class BodyAppendManager {
+    constructor(selectElement) {
+        this.originalOptions = [];
+        this.selectElement = selectElement;
+    }
+    /**
+     * Sets the popup and listbox references
+     */
+    setReferences(popup, listbox) {
+        this.popup = popup;
+        this.listbox = listbox;
+    }
+    /**
+     * Handles the bodyAppend change
+     */
+    handleBodyAppendChange(bodyAppend) {
+        if (bodyAppend) {
+            // Initialize body container when bodyAppend becomes true
+            this.createBodyContainer();
+            // Move options to body immediately
+            this.moveOptionsToBody();
+            // If no options were found, retry after a short delay
+            if (this.getAllOptions().length === 0) {
+                setTimeout(() => {
+                    this.moveOptionsToBody();
+                }, 100);
+            }
+            // Listen for popup reposition events
+            this.boundHandlePopupReposition = this.handlePopupReposition.bind(this);
+            this.popup?.addEventListener('reposition', this.boundHandlePopupReposition);
+        }
+        else {
+            // Restore options from body when bodyAppend becomes false
+            this.restoreOptionsFromBody();
+            // Clean up body container when bodyAppend becomes false
+            this.cleanupBodyContainer();
+            // Remove popup reposition listener
+            if (this.boundHandlePopupReposition) {
+                this.popup?.removeEventListener('reposition', this.boundHandlePopupReposition);
+                this.boundHandlePopupReposition = undefined;
+            }
+        }
+    }
+    /**
+     * Handles popup reposition events to update body container position
+     */
+    handlePopupReposition() {
+        if (this.bodyContainer && this.selectElement.open) {
+            this.updateBodyContainerVisibility(true);
+        }
+    }
+    /**
+     * Extracts styles as CSS string from various style formats
+     */
+    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 '';
+    }
+    /**
+     * Injects component styles into document head
+     */
+    injectStylesToDocument() {
+        if (!this.bodyContainer)
+            return;
+        // Create a unique identifier for this component instance
+        this.injectedStyleId = `nile-select-body-append-styles-${Math.random().toString(36).substring(2, 11)}`;
+        // Check if styles are already injected
+        if (document.getElementById(this.injectedStyleId))
+            return;
+        // Get the component's styles
+        const componentStyles = this.selectElement.constructor.styles;
+        if (!componentStyles)
+            return;
+        // Create a style element
+        const styleElement = document.createElement('style');
+        styleElement.id = this.injectedStyleId;
+        styleElement.textContent = this.extractStylesAsCSS(componentStyles);
+        // Inject into document head
+        document.head.appendChild(styleElement);
+    }
+    /**
+     * Adopts component styles to the body container (similar to portal-manager pattern)
+     */
+    adoptStylesToBodyContainer(listboxContainer) {
+        if (!this.bodyContainer)
+            return;
+        // Inject styles to document head first
+        this.injectStylesToDocument();
+        // Apply basic styling to match the original listbox
+        if (this.listbox) {
+            const computedStyle = window.getComputedStyle(this.listbox);
+            listboxContainer.style.backgroundColor = computedStyle.backgroundColor;
+            listboxContainer.style.border = computedStyle.border;
+            listboxContainer.style.borderRadius = computedStyle.borderRadius;
+            listboxContainer.style.boxShadow = computedStyle.boxShadow;
+            listboxContainer.style.maxHeight = computedStyle.maxHeight;
+            listboxContainer.style.overflow = computedStyle.overflow;
+            listboxContainer.style.padding = computedStyle.padding;
+            listboxContainer.style.margin = computedStyle.margin;
+        }
+    }
+    /**
+     * Creates a body container for options when bodyAppend is true
+     */
+    createBodyContainer() {
+        if (this.bodyContainer) {
+            return this.bodyContainer;
+        }
+        this.bodyContainer = document.createElement('div');
+        this.bodyContainer.style.position = 'fixed';
+        this.bodyContainer.style.zIndex = '9999';
+        this.bodyContainer.style.pointerEvents = 'none';
+        this.bodyContainer.style.visibility = 'hidden';
+        this.bodyContainer.style.overflow = 'hidden';
+        // Create the listbox container inside the body container
+        const listboxContainer = document.createElement('div');
+        listboxContainer.id = 'listbox';
+        listboxContainer.setAttribute('role', 'listbox');
+        listboxContainer.className = 'select__listbox';
+        listboxContainer.setAttribute('aria-expanded', 'false');
+        listboxContainer.setAttribute('aria-multiselectable', 'false');
+        listboxContainer.setAttribute('aria-labelledby', 'label');
+        listboxContainer.setAttribute('tabindex', '-1');
+        // Adopt styles to the listbox container (similar to portal-manager pattern)
+        this.adoptStylesToBodyContainer(listboxContainer);
+        // Append the listbox container to the body container
+        this.bodyContainer.appendChild(listboxContainer);
+        // Inject component styles to document head
+        this.injectStylesToDocument();
+        document.body.appendChild(this.bodyContainer);
+        return this.bodyContainer;
+    }
+    /**
+     * Cleans up the body container
+     */
+    cleanupBodyContainer() {
+        if (this.bodyContainer && this.bodyContainer.parentNode) {
+            this.bodyContainer.parentNode.removeChild(this.bodyContainer);
+            this.bodyContainer = undefined;
+        }
+        // Clean up injected styles
+        if (this.injectedStyleId) {
+            const styleElement = document.getElementById(this.injectedStyleId);
+            if (styleElement) {
+                styleElement.remove();
+            }
+            this.injectedStyleId = undefined;
+        }
+    }
+    /**
+     * Moves options to body container when bodyAppend is true
+     */
+    moveOptionsToBody() {
+        const container = this.createBodyContainer();
+        const listboxContainer = container.querySelector('#listbox');
+        const allOptions = this.getAllOptions();
+        // Only proceed if we have options to move and listbox container exists
+        if (allOptions.length === 0 || !listboxContainer) {
+            return;
+        }
+        // Store original options for restoration
+        this.originalOptions = [...allOptions];
+        // Move options to listbox container inside body container
+        allOptions.forEach(option => {
+            if (option.parentNode) {
+                option.parentNode.removeChild(option);
+            }
+            listboxContainer.appendChild(option);
+        });
+    }
+    /**
+     * Restores options to their original position
+     */
+    restoreOptionsFromBody() {
+        if (!this.bodyContainer) {
+            return;
+        }
+        const allOptions = this.getAllOptions();
+        // Move options back to their original position
+        allOptions.forEach(option => {
+            if (option.parentNode) {
+                option.parentNode.removeChild(option);
+            }
+            // Insert back into the slot
+            this.selectElement.appendChild(option);
+        });
+    }
+    /**
+     * Updates body container visibility and positioning
+     */
+    updateBodyContainerVisibility(visible) {
+        if (!this.bodyContainer) {
+            return;
+        }
+        if (visible) {
+            this.bodyContainer.style.visibility = 'visible';
+            this.bodyContainer.style.pointerEvents = 'auto';
+            // Position the container relative to the popup
+            if (this.popup && this.popup.popup) {
+                const popupRect = this.popup.popup.getBoundingClientRect();
+                this.bodyContainer.style.left = `${popupRect.left}px`;
+                this.bodyContainer.style.top = `${popupRect.top}px`;
+                this.bodyContainer.style.width = `${popupRect.width}px`;
+                this.bodyContainer.style.height = `${popupRect.height}px`;
+                // Update styles to match the popup
+                const computedStyle = window.getComputedStyle(this.popup.popup);
+                this.bodyContainer.style.backgroundColor = computedStyle.backgroundColor;
+                this.bodyContainer.style.border = computedStyle.border;
+                this.bodyContainer.style.borderRadius = computedStyle.borderRadius;
+                this.bodyContainer.style.boxShadow = computedStyle.boxShadow;
+                this.bodyContainer.style.maxHeight = computedStyle.maxHeight;
+            }
+        }
+        else {
+            this.bodyContainer.style.visibility = 'hidden';
+            this.bodyContainer.style.pointerEvents = 'none';
+        }
+    }
+    /**
+     * Gets all options from both original location and body container
+     */
+    getAllOptions() {
+        let options;
+        // Always get options from the original location first
+        options = [...this.selectElement.querySelectorAll('nile-option')];
+        // If no options found in original location and bodyAppend is true, check listbox container
+        if (options.length === 0 && this.bodyContainer) {
+            const listboxContainer = this.bodyContainer.querySelector('#listbox');
+            if (listboxContainer) {
+                options = [...listboxContainer.querySelectorAll('nile-option')];
+            }
+        }
+        return options;
+    }
+    /**
+     * Updates body container visibility when select opens/closes
+     */
+    updateVisibility(visible) {
+        this.updateBodyContainerVisibility(visible);
+    }
+    /**
+     * Checks if bodyAppend is active (has body container)
+     */
+    isActive() {
+        return !!this.bodyContainer;
+    }
+    /**
+     * Gets the body container element
+     */
+    getBodyContainer() {
+        return this.bodyContainer;
+    }
+    /**
+     * Gets the listbox container element inside the body container
+     */
+    getListboxContainer() {
+        return this.bodyContainer?.querySelector('#listbox');
+    }
+    /**
+     * Cleans up all resources
+     */
+    destroy() {
+        // Clean up body container if it exists
+        this.cleanupBodyContainer();
+        // Clean up event listeners
+        if (this.boundHandlePopupReposition) {
+            this.popup?.removeEventListener('reposition', this.boundHandlePopupReposition);
+            this.boundHandlePopupReposition = undefined;
+        }
+        // Clean up injected styles
+        if (this.injectedStyleId) {
+            const styleElement = document.getElementById(this.injectedStyleId);
+            if (styleElement) {
+                styleElement.remove();
+            }
+            this.injectedStyleId = undefined;
+        }
+    }
+}
+//# sourceMappingURL=body-append-manager.js.map

package/dist/src/nile-select/body-append-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"body-append-manager.js","sourceRoot":"","sources":["../../../src/nile-select/body-append-manager.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 type NileOption from '../nile-option/nile-option';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport type NileSelect from './nile-select';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Manager class for handling bodyAppend functionality in nile-select\n * This class manages moving select options to document.body to avoid CSS clipping issues\n */\nexport class BodyAppendManager {\n  private bodyContainer?: HTMLElement;\n  private originalOptions: NileOption[] = [];\n  private boundHandlePopupReposition?: () => void;\n  private selectElement: NileSelect;\n  private popup?: NilePopup;\n  private listbox?: HTMLSlotElement;\n  private injectedStyleId?: string;\n\n  constructor(selectElement: NileSelect) {\n    this.selectElement = selectElement;\n  }\n\n  /**\n   * Sets the popup and listbox references\n   */\n  setReferences(popup: NilePopup, listbox: HTMLSlotElement): void {\n    this.popup = popup;\n    this.listbox = listbox;\n  }\n\n  /**\n   * Handles the bodyAppend change\n   */\n  handleBodyAppendChange(bodyAppend: boolean): void {\n    if (bodyAppend) {\n      // Initialize body container when bodyAppend becomes true\n      this.createBodyContainer();\n      // Move options to body immediately\n      this.moveOptionsToBody();\n      // If no options were found, retry after a short delay\n      if (this.getAllOptions().length === 0) {\n        setTimeout(() => {\n          this.moveOptionsToBody();\n        }, 100);\n      }\n      // Listen for popup reposition events\n      this.boundHandlePopupReposition = this.handlePopupReposition.bind(this);\n      this.popup?.addEventListener('reposition', this.boundHandlePopupReposition);\n    } else {\n      // Restore options from body when bodyAppend becomes false\n      this.restoreOptionsFromBody();\n      // Clean up body container when bodyAppend becomes false\n      this.cleanupBodyContainer();\n      // Remove popup reposition listener\n      if (this.boundHandlePopupReposition) {\n        this.popup?.removeEventListener('reposition', this.boundHandlePopupReposition);\n        this.boundHandlePopupReposition = undefined;\n      }\n    }\n  }\n\n  /**\n   * Handles popup reposition events to update body container position\n   */\n  private handlePopupReposition(): void {\n    if (this.bodyContainer && this.selectElement.open) {\n      this.updateBodyContainerVisibility(true);\n    }\n  }\n\n  /**\n   * Extracts styles as CSS string from various style formats\n   */\n  private 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  /**\n   * Injects component styles into document head\n   */\n  private injectStylesToDocument(): void {\n    if (!this.bodyContainer) return;\n\n    // Create a unique identifier for this component instance\n    this.injectedStyleId = `nile-select-body-append-styles-${Math.random().toString(36).substring(2, 11)}`;\n    \n    // Check if styles are already injected\n    if (document.getElementById(this.injectedStyleId)) return;\n\n    // Get the component's styles\n    const componentStyles = (this.selectElement.constructor as any).styles;\n    if (!componentStyles) return;\n\n    // Create a style element\n    const styleElement = document.createElement('style');\n    styleElement.id = this.injectedStyleId;\n    styleElement.textContent = this.extractStylesAsCSS(componentStyles);\n    \n    // Inject into document head\n    document.head.appendChild(styleElement);\n  }\n\n  /**\n   * Adopts component styles to the body container (similar to portal-manager pattern)\n   */\n  private adoptStylesToBodyContainer(listboxContainer: HTMLElement): void {\n    if (!this.bodyContainer) return;\n    \n    // Inject styles to document head first\n    this.injectStylesToDocument();\n    \n    // Apply basic styling to match the original listbox\n    if (this.listbox) {\n      const computedStyle = window.getComputedStyle(this.listbox);\n      listboxContainer.style.backgroundColor = computedStyle.backgroundColor;\n      listboxContainer.style.border = computedStyle.border;\n      listboxContainer.style.borderRadius = computedStyle.borderRadius;\n      listboxContainer.style.boxShadow = computedStyle.boxShadow;\n      listboxContainer.style.maxHeight = computedStyle.maxHeight;\n      listboxContainer.style.overflow = computedStyle.overflow;\n      listboxContainer.style.padding = computedStyle.padding;\n      listboxContainer.style.margin = computedStyle.margin;\n    }\n  }\n\n  /**\n   * Creates a body container for options when bodyAppend is true\n   */\n  private createBodyContainer(): HTMLElement {\n    if (this.bodyContainer) {\n      return this.bodyContainer;\n    }\n\n    this.bodyContainer = document.createElement('div');\n    this.bodyContainer.style.position = 'fixed';\n    this.bodyContainer.style.zIndex = '9999';\n    this.bodyContainer.style.pointerEvents = 'none';\n    this.bodyContainer.style.visibility = 'hidden';\n    this.bodyContainer.style.overflow = 'hidden';\n    \n    // Create the listbox container inside the body container\n    const listboxContainer = document.createElement('div');\n    listboxContainer.id = 'listbox';\n    listboxContainer.setAttribute('role', 'listbox');\n    listboxContainer.className = 'select__listbox';\n    listboxContainer.setAttribute('aria-expanded', 'false');\n    listboxContainer.setAttribute('aria-multiselectable', 'false');\n    listboxContainer.setAttribute('aria-labelledby', 'label');\n    listboxContainer.setAttribute('tabindex', '-1');\n    \n    // Adopt styles to the listbox container (similar to portal-manager pattern)\n    this.adoptStylesToBodyContainer(listboxContainer);\n    \n    // Append the listbox container to the body container\n    this.bodyContainer.appendChild(listboxContainer);\n    \n    // Inject component styles to document head\n    this.injectStylesToDocument();\n    \n    document.body.appendChild(this.bodyContainer);\n    \n    return this.bodyContainer;\n  }\n\n  /**\n   * Cleans up the body container\n   */\n  private cleanupBodyContainer(): void {\n    if (this.bodyContainer && this.bodyContainer.parentNode) {\n      this.bodyContainer.parentNode.removeChild(this.bodyContainer);\n      this.bodyContainer = undefined;\n    }\n    \n    // Clean up injected styles\n    if (this.injectedStyleId) {\n      const styleElement = document.getElementById(this.injectedStyleId);\n      if (styleElement) {\n        styleElement.remove();\n      }\n      this.injectedStyleId = undefined;\n    }\n  }\n\n  /**\n   * Moves options to body container when bodyAppend is true\n   */\n  private moveOptionsToBody(): void {\n    const container = this.createBodyContainer();\n    const listboxContainer = container.querySelector('#listbox') as HTMLElement;\n    const allOptions = this.getAllOptions();\n    \n    // Only proceed if we have options to move and listbox container exists\n    if (allOptions.length === 0 || !listboxContainer) {\n      return;\n    }\n    \n    // Store original options for restoration\n    this.originalOptions = [...allOptions];\n    \n    // Move options to listbox container inside body container\n    allOptions.forEach(option => {\n      if (option.parentNode) {\n        option.parentNode.removeChild(option);\n      }\n      listboxContainer.appendChild(option);\n    });\n  }\n\n  /**\n   * Restores options to their original position\n   */\n  private restoreOptionsFromBody(): void {\n    if (!this.bodyContainer) {\n      return;\n    }\n\n    const allOptions = this.getAllOptions();\n    \n    // Move options back to their original position\n    allOptions.forEach(option => {\n      if (option.parentNode) {\n        option.parentNode.removeChild(option);\n      }\n      // Insert back into the slot\n      this.selectElement.appendChild(option);\n    });\n  }\n\n  /**\n   * Updates body container visibility and positioning\n   */\n  private updateBodyContainerVisibility(visible: boolean): void {\n    if (!this.bodyContainer) {\n      return;\n    }\n\n    if (visible) {\n      this.bodyContainer.style.visibility = 'visible';\n      this.bodyContainer.style.pointerEvents = 'auto';\n      \n      // Position the container relative to the popup\n      if (this.popup && this.popup.popup) {\n        const popupRect = this.popup.popup.getBoundingClientRect();\n        this.bodyContainer.style.left = `${popupRect.left}px`;\n        this.bodyContainer.style.top = `${popupRect.top}px`;\n        this.bodyContainer.style.width = `${popupRect.width}px`;\n        this.bodyContainer.style.height = `${popupRect.height}px`;\n        \n        // Update styles to match the popup\n        const computedStyle = window.getComputedStyle(this.popup.popup);\n        this.bodyContainer.style.backgroundColor = computedStyle.backgroundColor;\n        this.bodyContainer.style.border = computedStyle.border;\n        this.bodyContainer.style.borderRadius = computedStyle.borderRadius;\n        this.bodyContainer.style.boxShadow = computedStyle.boxShadow;\n        this.bodyContainer.style.maxHeight = computedStyle.maxHeight;\n      }\n    } else {\n      this.bodyContainer.style.visibility = 'hidden';\n      this.bodyContainer.style.pointerEvents = 'none';\n    }\n  }\n\n  /**\n   * Gets all options from both original location and body container\n   */\n  private getAllOptions(): NileOption[] {\n    let options: NileOption[];\n    \n    // Always get options from the original location first\n    options = [...this.selectElement.querySelectorAll<NileOption>('nile-option')];\n    \n    // If no options found in original location and bodyAppend is true, check listbox container\n    if (options.length === 0 && this.bodyContainer) {\n      const listboxContainer = this.bodyContainer.querySelector('#listbox');\n      if (listboxContainer) {\n        options = [...listboxContainer.querySelectorAll<NileOption>('nile-option')];\n      }\n    }\n\n    return options;\n  }\n\n  /**\n   * Updates body container visibility when select opens/closes\n   */\n  updateVisibility(visible: boolean): void {\n    this.updateBodyContainerVisibility(visible);\n  }\n\n  /**\n   * Checks if bodyAppend is active (has body container)\n   */\n  isActive(): boolean {\n    return !!this.bodyContainer;\n  }\n\n  /**\n   * Gets the body container element\n   */\n  getBodyContainer(): HTMLElement | undefined {\n    return this.bodyContainer;\n  }\n\n  /**\n   * Gets the listbox container element inside the body container\n   */\n  getListboxContainer(): HTMLElement | undefined {\n    return this.bodyContainer?.querySelector('#listbox') as HTMLElement | undefined;\n  }\n\n  /**\n   * Cleans up all resources\n   */\n  destroy(): void {\n    // Clean up body container if it exists\n    this.cleanupBodyContainer();\n    // Clean up event listeners\n    if (this.boundHandlePopupReposition) {\n      this.popup?.removeEventListener('reposition', this.boundHandlePopupReposition);\n      this.boundHandlePopupReposition = undefined;\n    }\n    // Clean up injected styles\n    if (this.injectedStyleId) {\n      const styleElement = document.getElementById(this.injectedStyleId);\n      if (styleElement) {\n        styleElement.remove();\n      }\n      this.injectedStyleId = undefined;\n    }\n  }\n}\n"]}

package/dist/src/nile-select/nile-select.css.js

@@ -502,8 +502,10 @@ export const styles = css `
   box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;
 }
 
-
-
+:host([stickyHeader])  .select__footer{
+  z-index: 1;
+}
+ 
 `;
 export default [styles];
 //# sourceMappingURL=nile-select.css.js.map

package/dist/src/nile-select/nile-select.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgfxB,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 * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: var(--nile-font-family-inherit, var(--ng-font-weight-regular));\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n     max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border-top: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-none, var(--ng-height-24px));\n    max-width: var(--nile-width-none, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n   \n  .select.select--open .select__combobox {\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n    box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n  border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n  border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkfxB,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 * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: var(--nile-font-family-inherit, var(--ng-font-weight-regular));\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n     max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border-top: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-none, var(--ng-height-24px));\n    max-width: var(--nile-width-none, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n   \n  .select.select--open .select__combobox {\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n    box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n  border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n  border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n:host([stickyHeader])  .select__footer{\n  z-index: 1;\n}\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-select/nile-select.d.ts

@@ -184,6 +184,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     autoFocusSearch: boolean;
     /** loading indicator for virtual select */
     loading: boolean;
+    stickyHeader: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -200,6 +201,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     private handleFocus;
     private handleBlur;
     private handleDocumentFocusIn;
+    private updateGroupStickyOffsets;
     /**
      * Handles the click event on the footer.
      * @param event - The click event.
@@ -224,6 +226,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     private handleClearClick;
     private handleClearMouseDown;
     handleOptionClick(event: MouseEvent): void;
+    private applyStickyToGroups;
     private handleDefaultSlotChange;
     private handleTagRemove;
     private getAllOptions;

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

@@ -194,6 +194,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.autoFocusSearch = false;
         /** loading indicator for virtual select */
         this.loading = false;
+        this.stickyHeader = false;
         this.handleWindowResize = () => {
             this.portalManager.updatePortalAppendPosition();
         };
@@ -246,6 +247,9 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     updated(_changedProperties) {
+        if (_changedProperties.has('searchEnabled')) {
+            this.updateGroupStickyOffsets();
+        }
         if (_changedProperties.has('multiple')) {
             this.setCheckBoxInOption(this.multiple);
         }
@@ -256,6 +260,7 @@ let NileSelect = class NileSelect extends NileElement {
     firstUpdated(_changedProperties) {
         if (this.enableGroupHeader) {
             this.handleGroupSearchChange();
+            this.applyStickyToGroups();
         }
         this.setupResizeObserver();
         if (_changedProperties.has('multiple')) {
@@ -330,6 +335,17 @@ let NileSelect = class NileSelect extends NileElement {
             this.hide();
         }
     }
+    updateGroupStickyOffsets() {
+        const groups = this.querySelectorAll('nile-option-group');
+        groups.forEach(g => {
+            if (this.searchEnabled) {
+                g.setAttribute('search-enabled', '');
+            }
+            else {
+                g.removeAttribute('search-enabled');
+            }
+        });
+    }
     /**
      * Handles the click event on the footer.
      * @param event - The click event.
@@ -570,10 +586,23 @@ let NileSelect = class NileSelect extends NileElement {
             this.portalManager.updatePortalOptions();
         }
     }
+    applyStickyToGroups() {
+        const groups = this.querySelectorAll('nile-option-group');
+        groups.forEach(g => {
+            if (this.stickyHeader) {
+                g.setAttribute('sticky', '');
+            }
+            else {
+                g.removeAttribute('sticky');
+            }
+        });
+    }
     handleDefaultSlotChange() {
         const allOptions = this.getAllOptions();
         const value = Array.isArray(this.value) ? this.value : [this.value];
         const values = [];
+        this.updateGroupStickyOffsets();
+        this.applyStickyToGroups();
         // Check for duplicate values in menu items
         if (customElements.get('nile-option')) {
             allOptions.forEach(option => values.push(option.value));
@@ -1546,6 +1575,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSelect.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "stickyHeader", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);