@aquera/nile-elements 1.3.9-beta-1.0 → 1.3.9-beta-1.2

package/dist/src/nile-skeleton-loader/index.d.ts

@@ -0,0 +1 @@
+export { NileSkeletonLoader } from './nile-skeleton-loader';

package/dist/src/nile-skeleton-loader/index.js

@@ -0,0 +1,2 @@
+export { NileSkeletonLoader } from './nile-skeleton-loader';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-skeleton-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { NileSkeletonLoader } from './nile-skeleton-loader';\n\n"]}

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.css.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.css.js

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    -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));
+    display: inline-block;
+  }
+
+  .skeleton-loader {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .skeleton {
+    display: block;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));
+    animation: blink 1.2s ease-in-out infinite;
+    box-sizing: border-box;
+  }
+
+  .skeleton--rectangular {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+  }
+
+  .skeleton--circular {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+  }
+
+  .skeleton--text {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));
+    height: 1em;
+  }
+
+  .skeleton--rounded {
+    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));
+  }
+
+  @keyframes blink {
+    0%, 100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-skeleton-loader.css.js.map

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-skeleton-loader.css.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\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    display: inline-block;\n  }\n\n  .skeleton-loader {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .skeleton {\n    display: block;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));\n    animation: blink 1.2s ease-in-out infinite;\n    box-sizing: border-box;\n  }\n\n  .skeleton--rectangular {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .skeleton--circular {\n    border-radius: 50%;\n    aspect-ratio: 1 / 1;\n  }\n\n  .skeleton--text {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));\n    height: 1em;\n  }\n\n  .skeleton--rounded {\n    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));\n  }\n\n  @keyframes blink {\n    0%, 100% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n`;\n\nexport default [styles];\n\n"]}

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+export declare class NileSkeletonLoader extends NileElement {
+    static get styles(): CSSResultArray;
+    variant: 'text' | 'circular' | 'rectangular' | 'rounded';
+    width: string | number;
+    height: string | number;
+    borderRadius: string;
+    private formatDimension;
+    private getComputedWidth;
+    private getComputedHeight;
+    private getComputedBorderRadius;
+    render(): TemplateResult;
+}
+export default NileSkeletonLoader;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-skeleton-loader': NileSkeletonLoader;
+    }
+}

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.js

@@ -0,0 +1,107 @@
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-skeleton-loader.css';
+import NileElement from '../internal/nile-element';
+let NileSkeletonLoader = class NileSkeletonLoader extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'text';
+        this.width = '';
+        this.height = '';
+        this.borderRadius = '';
+    }
+    static get styles() {
+        return [styles];
+    }
+    formatDimension(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        // If it's a string, check if it's a plain number (no units)
+        const trimmed = String(value).trim();
+        // Check if it's a numeric value without units (matches numbers, optionally with decimals)
+        if (/^\d+(\.\d+)?$/.test(trimmed)) {
+            return `${trimmed}px`;
+        }
+        // If it already has units (px, %, em, rem, etc.), return as-is
+        return trimmed;
+    }
+    getComputedWidth() {
+        const formattedWidth = this.formatDimension(this.width);
+        if (formattedWidth) {
+            return formattedWidth;
+        }
+        return this.variant === 'circular' ? '40px' : '100%';
+    }
+    getComputedHeight() {
+        const formattedHeight = this.formatDimension(this.height);
+        if (formattedHeight) {
+            return formattedHeight;
+        }
+        if (this.variant === 'circular') {
+            return '40px';
+        }
+        return this.variant === 'text' ? '1em' : '20px';
+    }
+    getComputedBorderRadius() {
+        if (this.borderRadius) {
+            return this.borderRadius;
+        }
+        if (this.variant === 'circular') {
+            return '50%';
+        }
+        if (this.variant === 'rounded') {
+            return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';
+        }
+        if (this.variant === 'text') {
+            return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';
+        }
+        return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class="skeleton-loader"
+      >
+        <div
+          part="skeleton"
+          class=${classMap({
+            skeleton: true,
+            'skeleton--text': this.variant === 'text',
+            'skeleton--circular': this.variant === 'circular',
+            'skeleton--rectangular': this.variant === 'rectangular',
+            'skeleton--rounded': this.variant === 'rounded',
+        })}
+          style="
+            width: ${this.getComputedWidth()};
+            height: ${this.getComputedHeight()};
+            border-radius: ${this.getComputedBorderRadius()};
+          "
+        ></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], NileSkeletonLoader.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NileSkeletonLoader.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], NileSkeletonLoader.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'border-radius' })
+], NileSkeletonLoader.prototype, "borderRadius", void 0);
+NileSkeletonLoader = __decorate([
+    customElement('nile-skeleton-loader')
+], NileSkeletonLoader);
+export { NileSkeletonLoader };
+export default NileSkeletonLoader;
+//# sourceMappingURL=nile-skeleton-loader.js.map

package/dist/src/nile-skeleton-loader/nile-skeleton-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-skeleton-loader.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-skeleton-loader.css';\nimport NileElement from '../internal/nile-element';\n\n@customElement('nile-skeleton-loader')\nexport class NileSkeletonLoader extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' | 'rounded' = 'text';\n\n  @property({ type: String }) width: string | number = '';\n\n  @property({ type: String }) height: string | number = '';\n\n  @property({ type: String, attribute: 'border-radius' }) borderRadius = '';\n\n  private formatDimension(value: string | number): string {\n    if (!value) return '';\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n    // If it's a string, check if it's a plain number (no units)\n    const trimmed = String(value).trim();\n    // Check if it's a numeric value without units (matches numbers, optionally with decimals)\n    if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\n      return `${trimmed}px`;\n    }\n    // If it already has units (px, %, em, rem, etc.), return as-is\n    return trimmed;\n  }\n\n  private getComputedWidth(): string {\n    const formattedWidth = this.formatDimension(this.width);\n    if (formattedWidth) {\n      return formattedWidth;\n    }\n    return this.variant === 'circular' ? '40px' : '100%';\n  }\n\n  private getComputedHeight(): string {\n    const formattedHeight = this.formatDimension(this.height);\n    if (formattedHeight) {\n      return formattedHeight;\n    }\n    if (this.variant === 'circular') {\n      return '40px';\n    }\n    return this.variant === 'text' ? '1em' : '20px';\n  }\n\n  private getComputedBorderRadius(): string {\n    if (this.borderRadius) {\n      return this.borderRadius;\n    }\n    if (this.variant === 'circular') {\n      return '50%';\n    }\n    if (this.variant === 'rounded') {\n      return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';\n    }\n    if (this.variant === 'text') {\n      return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';\n    }\n    return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        part=\"base\"\n        class=\"skeleton-loader\"\n      >\n        <div\n          part=\"skeleton\"\n          class=${classMap({\n            skeleton: true,\n            'skeleton--text': this.variant === 'text',\n            'skeleton--circular': this.variant === 'circular',\n            'skeleton--rectangular': this.variant === 'rectangular',\n            'skeleton--rounded': this.variant === 'rounded',\n          })}\n          style=\"\n            width: ${this.getComputedWidth()};\n            height: ${this.getComputedHeight()};\n            border-radius: ${this.getComputedBorderRadius()};\n          \"\n        ></div>\n      </div>\n    `;\n  }\n}\n\nexport default NileSkeletonLoader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-skeleton-loader': NileSkeletonLoader;\n  }\n}\n\n"]}

package/dist/src/nile-slide-toggle/nile-slide-toggle.js

@@ -40,7 +40,6 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
             'nile-slide--disabled': this.disabled,
             'nile-slide-toggle--reverse': this.textPosition == 'left'
         })}
-        part="base"
       >
         <label 
         class="${classMap({
@@ -48,17 +47,17 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
             'nile-slide-toggle__switch--left': this.textPosition == 'right',
             'nile-slide-toggle__switch--right': this.textPosition == 'left',
         })}"
-        class="nile-slide-toggle__switch" part="slide-toggle-switch">
+        class="nile-slide-toggle__switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}
             @change=${this.toggleValue}
           />
-          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
+          <span class="nile-slide-toggle__slider"></span>
         </label>
-        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
-          <span part="slide-toggle-label">${this.label}</span>
-          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
+        <span class="nile-slide-toggle__label">
+          <span>${this.label}</span>
+          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
         </span>
       </div>
       ${hasHelpText

package/dist/src/nile-slide-toggle/nile-slide-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup,PropertyValues } from 'lit';\nimport { LitElement, html} from 'lit';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n  public static styles: CSSResultGroup = styles;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) sublabel = '';\n\n  @property({ type: String, }) textPosition:'left' | 'right' = 'right';\n\n  @property({ type: Boolean, reflect: true }) isChecked = false;\n\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  toggleValue() {\n    this.isChecked = !this.isChecked;\n    this.emit('change',{ checked: this.isChecked, value: this.isChecked });\n    this.emit('nile-change',{ checked: this.isChecked, value: this.isChecked  });\n  }\n\n  public render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        class=${classMap({\n          'nile-slide-toggle': true,\n          'nile-slide--disabled': this.disabled,\n          'nile-slide-toggle--reverse':this.textPosition=='left'\n        })}\n        part=\"base\"\n      >\n        <label \n        class=\"${classMap({\n          'nile-slide-toggle__switch':true,\n          'nile-slide-toggle__switch--left':this.textPosition=='right',\n          'nile-slide-toggle__switch--right':this.textPosition=='left',\n        })}\"\n        class=\"nile-slide-toggle__switch\" part=\"slide-toggle-switch\">\n          <input\n            type=\"checkbox\"\n            .checked=${this.isChecked}\n            @change=${this.toggleValue}\n          />\n          <span class=\"nile-slide-toggle__slider\" part=\"slide-toggle-slider\"></span>\n        </label>\n        <span class=\"nile-slide-toggle__label\" part=\"slide-toggle-label-container\">\n          <span part=\"slide-toggle-label\">${this.label}</span>\n          <span class=\"nile-slide-toggle__sublabel\" part=\"slide-toggle-sublabel\">${this.sublabel}</span>\n        </span>\n      </div>\n      ${hasHelpText\n        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n        : ``}\n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup,PropertyValues } from 'lit';\nimport { LitElement, html} from 'lit';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n  public static styles: CSSResultGroup = styles;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) sublabel = '';\n\n  @property({ type: String, }) textPosition:'left' | 'right' = 'right';\n\n  @property({ type: Boolean, reflect: true }) isChecked = false;\n\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  toggleValue() {\n    this.isChecked = !this.isChecked;\n    this.emit('change',{ checked: this.isChecked, value: this.isChecked });\n    this.emit('nile-change',{ checked: this.isChecked, value: this.isChecked  });\n  }\n\n  public render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        class=${classMap({\n          'nile-slide-toggle': true,\n          'nile-slide--disabled': this.disabled,\n          'nile-slide-toggle--reverse':this.textPosition=='left'\n        })}\n      >\n        <label \n        class=\"${classMap({\n          'nile-slide-toggle__switch':true,\n          'nile-slide-toggle__switch--left':this.textPosition=='right',\n          'nile-slide-toggle__switch--right':this.textPosition=='left',\n        })}\"\n        class=\"nile-slide-toggle__switch\">\n          <input\n            type=\"checkbox\"\n            .checked=${this.isChecked}\n            @change=${this.toggleValue}\n          />\n          <span class=\"nile-slide-toggle__slider\"></span>\n        </label>\n        <span class=\"nile-slide-toggle__label\">\n          <span>${this.label}</span>\n          <span class=\"nile-slide-toggle__sublabel\">${this.sublabel}</span>\n        </span>\n      </div>\n      ${hasHelpText\n        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n        : ``}\n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n"]}

package/dist/src/nile-table-body/virtual-scroll-helper.d.ts

@@ -0,0 +1,9 @@
+import type NileElement from '../internal/nile-element';
+/**
+ * Helper class to manage virtual scroll functionality for nile-table-body component
+ */
+export declare class VirtualTableBodyHelper {
+    private component;
+    constructor(component: NileElement);
+    renderVirtualizedContent(): any;
+}

package/dist/src/nile-table-body/virtual-scroll-helper.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+/**
+ * Helper class to manage virtual scroll functionality for nile-table-body component
+ */
+export class VirtualTableBodyHelper {
+    constructor(component) {
+        this.component = component;
+    }
+    renderVirtualizedContent() {
+        const component = this.component;
+        return html `
+      <div class="virtual-table-body">
+        <nile-virtual-table-body
+          .type=${component.type}
+          .data=${component.data || []}
+          .hasResizableColumns=${component.hasResizableColumns}
+        >
+          <slot name="table__header" slot="table__header"></slot>
+        </nile-virtual-table-body>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=virtual-scroll-helper.js.map

package/dist/src/nile-table-body/virtual-scroll-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll-helper.js","sourceRoot":"","sources":["../../../src/nile-table-body/virtual-scroll-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,SAAsB;QAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAgB,CAAC;QAExC,OAAO,IAAI,CAAA;;;kBAGG,SAAS,CAAC,IAAI;kBACd,SAAS,CAAC,IAAI,IAAI,EAAE;iCACL,SAAS,CAAC,mBAAmB;;;;;KAKzD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html } from 'lit';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-table-body component\n */\nexport class VirtualTableBodyHelper {\n  private component: NileElement;\n\n  constructor(component: NileElement) {\n    this.component = component;\n  }\n\n  renderVirtualizedContent(): any {\n    const component = this.component as any;\n\n    return html`\n      <div class=\"virtual-table-body\">\n        <nile-virtual-table-body\n          .type=${component.type}\n          .data=${component.data || []}\n          .hasResizableColumns=${component.hasResizableColumns}\n        >\n          <slot name=\"table__header\" slot=\"table__header\"></slot>\n        </nile-virtual-table-body>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare class BodyAppendHelper {
+    private bodyAppendContainer;
+    private originalListboxParent;
+    createBodyAppendContainer(): HTMLElement;
+    setupBodyAppend(listbox: HTMLElement, componentConstructor: any, positionBodyAppend: () => void): void;
+    cleanupBodyAppend(bodyAppend: boolean): void;
+    updateBodyAppendPosition(positionBodyAppend: () => void): void;
+    private injectStylesToDocument;
+    private extractStylesAsCSS;
+}

package/dist/src/nile-virtual-select/body-append-helper.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class BodyAppendHelper {
+    constructor() {
+        this.bodyAppendContainer = null;
+        this.originalListboxParent = null;
+    }
+    createBodyAppendContainer() {
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.zIndex = '9999';
+        container.style.pointerEvents = 'none';
+        container.className = 'nile-virtual-select-body-append';
+        // Apply additional styling to match the original popup
+        container.style.background = 'white';
+        container.style.border = '1px solid #e0e0e0';
+        container.style.borderRadius = '4px';
+        container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+        container.style.maxHeight = '300px';
+        container.style.overflow = 'hidden';
+        return container;
+    }
+    setupBodyAppend(listbox, componentConstructor, positionBodyAppend) {
+        this.originalListboxParent = listbox.parentElement;
+        this.bodyAppendContainer = this.createBodyAppendContainer();
+        this.bodyAppendContainer.appendChild(listbox);
+        document.body.appendChild(this.bodyAppendContainer);
+        this.injectStylesToDocument(componentConstructor);
+        listbox.style.display = '';
+        positionBodyAppend();
+    }
+    cleanupBodyAppend(bodyAppend) {
+        if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {
+            const listbox = this.bodyAppendContainer.querySelector('#listbox');
+            if (listbox && this.originalListboxParent) {
+                this.originalListboxParent.appendChild(listbox);
+                listbox.style.display = bodyAppend ? 'none' : '';
+            }
+            // Clean up injected styles if they exist
+            const injectedStyleId = this.bodyAppendContainer.__injectedStyleId;
+            if (injectedStyleId) {
+                const styleElement = document.getElementById(injectedStyleId);
+                if (styleElement) {
+                    styleElement.remove();
+                }
+            }
+            this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);
+        }
+        this.bodyAppendContainer = null;
+        this.originalListboxParent = null;
+    }
+    updateBodyAppendPosition(positionBodyAppend) {
+        if (this.bodyAppendContainer) {
+            positionBodyAppend();
+        }
+    }
+    injectStylesToDocument(componentConstructor) {
+        if (!this.bodyAppendContainer)
+            return;
+        // Create a unique identifier for this component instance
+        const styleId = `nile-virtual-select-styles-${Math.random().toString(36).substring(2, 11)}`;
+        // Check if styles are already injected
+        if (document.getElementById(styleId))
+            return;
+        // Get the component's styles
+        const componentStyles = componentConstructor.styles;
+        if (!componentStyles)
+            return;
+        // Create a style element
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.textContent = this.extractStylesAsCSS(componentStyles);
+        // Inject into document head
+        document.head.appendChild(styleElement);
+        // Store reference for cleanup
+        this.bodyAppendContainer.__injectedStyleId = styleId;
+    }
+    extractStylesAsCSS(styles) {
+        if (typeof styles === 'string') {
+            return styles;
+        }
+        if (Array.isArray(styles)) {
+            return styles.map(style => this.extractStylesAsCSS(style)).join('\n');
+        }
+        if (styles && typeof styles === 'object' && styles.cssText) {
+            return styles.cssText;
+        }
+        return '';
+    }
+}
+//# sourceMappingURL=body-append-helper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"body-append-helper.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/body-append-helper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport class BodyAppendHelper {\n  private bodyAppendContainer: HTMLElement | null = null;\n  private originalListboxParent: HTMLElement | null = null;\n\n  createBodyAppendContainer(): HTMLElement {\n    const container = document.createElement('div');\n    container.style.position = 'absolute';\n    container.style.zIndex = '9999';\n    container.style.pointerEvents = 'none';\n    container.className = 'nile-virtual-select-body-append';\n    \n    // Apply additional styling to match the original popup\n    container.style.background = 'white';\n    container.style.border = '1px solid #e0e0e0';\n    container.style.borderRadius = '4px';\n    container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';\n    container.style.maxHeight = '300px';\n    container.style.overflow = 'hidden';\n    \n    return container;\n  }\n\n  setupBodyAppend(\n    listbox: HTMLElement,\n    componentConstructor: any,\n    positionBodyAppend: () => void\n  ): void {\n    this.originalListboxParent = listbox.parentElement as HTMLElement;\n    \n    this.bodyAppendContainer = this.createBodyAppendContainer();\n    this.bodyAppendContainer.appendChild(listbox);\n    document.body.appendChild(this.bodyAppendContainer);\n    \n    this.injectStylesToDocument(componentConstructor);\n    \n    listbox.style.display = '';\n    positionBodyAppend();\n  }\n\n  cleanupBodyAppend(bodyAppend: boolean): void {\n    if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {\n      const listbox = this.bodyAppendContainer.querySelector('#listbox') as HTMLElement;\n      \n      if (listbox && this.originalListboxParent) {\n        this.originalListboxParent.appendChild(listbox);\n        listbox.style.display = bodyAppend ? 'none' : '';\n      }\n      \n      // Clean up injected styles if they exist\n      const injectedStyleId = (this.bodyAppendContainer as any).__injectedStyleId;\n      if (injectedStyleId) {\n        const styleElement = document.getElementById(injectedStyleId);\n        if (styleElement) {\n          styleElement.remove();\n        }\n      }\n      \n      this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);\n    }\n    this.bodyAppendContainer = null;\n    this.originalListboxParent = null;\n  }\n\n  updateBodyAppendPosition(positionBodyAppend: () => void): void {\n    if (this.bodyAppendContainer) {\n      positionBodyAppend();\n    }\n  }\n\n  private injectStylesToDocument(componentConstructor: any): void {\n    if (!this.bodyAppendContainer) return;\n\n    // Create a unique identifier for this component instance\n    const styleId = `nile-virtual-select-styles-${Math.random().toString(36).substring(2, 11)}`;\n    \n    // Check if styles are already injected\n    if (document.getElementById(styleId)) return;\n\n    // Get the component's styles\n    const componentStyles = componentConstructor.styles;\n    if (!componentStyles) return;\n\n    // Create a style element\n    const styleElement = document.createElement('style');\n    styleElement.id = styleId;\n    styleElement.textContent = this.extractStylesAsCSS(componentStyles);\n    \n    // Inject into document head\n    document.head.appendChild(styleElement);\n    \n    // Store reference for cleanup\n    (this.bodyAppendContainer as any).__injectedStyleId = styleId;\n  }\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"]}

package/dist/src/nile-virtual-select/group-manager.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { GroupedDataItem } from './types.js';
+/**
+ * Interface for group attributes
+ */
+export interface GroupAttributes {
+    name: string;
+    data?: string | null;
+    element: HTMLElement;
+}
+export declare class VirtualSelectGroupManager {
+    private component;
+    private enableGroupHeader;
+    constructor(component: any);
+    initialize(enableGroupHeader: boolean): void;
+    convertToGroupedData(data: any[], getGroupKey: (item: any) => string): GroupedDataItem[];
+    extractFlatItemsFromGroupedData(data: any[]): any[];
+    getAllGroupAttributes(): GroupAttributes[];
+    getUniqueGroupNames(arr: any[]): string[];
+    handleGroupSearchChange(searchValue: string, data: any[], getSearchText: (item: any) => string): void;
+    handleGroupShowSelected(showSelected: boolean, data: any[]): void;
+    clearGroupHiddenClasses(): void;
+    isGroupItem(item: any): boolean;
+    getActualItem(item: any): any;
+    getGroupName(item: any): string | undefined;
+    renderGroupHeader(item: any, getGroupDisplayText?: (groupKey: string) => string): any;
+}

package/dist/src/nile-virtual-select/group-manager.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class VirtualSelectGroupManager {
+    constructor(component) {
+        this.enableGroupHeader = false;
+        this.component = component;
+    }
+    initialize(enableGroupHeader) {
+        this.enableGroupHeader = enableGroupHeader;
+    }
+    convertToGroupedData(data, getGroupKey) {
+        if (!this.enableGroupHeader || !getGroupKey) {
+            return data;
+        }
+        const groups = new Map();
+        data.forEach(item => {
+            const groupKey = getGroupKey(item);
+            if (!groups.has(groupKey)) {
+                groups.set(groupKey, []);
+            }
+            groups.get(groupKey).push(item);
+        });
+        const groupedData = [];
+        groups.forEach((options, groupKey) => {
+            groupedData.push({
+                type: 'group',
+                groupName: groupKey,
+                groupData: undefined
+            });
+            options.forEach(option => {
+                groupedData.push({
+                    type: 'option',
+                    groupName: groupKey,
+                    optionData: option
+                });
+            });
+        });
+        return groupedData;
+    }
+    extractFlatItemsFromGroupedData(data) {
+        if (!this.enableGroupHeader) {
+            return data;
+        }
+        return data
+            .filter((item) => item.type === 'option')
+            .map((item) => item.optionData);
+    }
+    getAllGroupAttributes() {
+        if (!this.enableGroupHeader)
+            return [];
+        return Array.from(this.component.querySelectorAll('nile-option-group[name]')).map((el) => ({
+            name: el?.getAttribute('name') || '',
+            data: el?.getAttribute('data'),
+            element: el
+        }));
+    }
+    getUniqueGroupNames(arr) {
+        if (!this.enableGroupHeader)
+            return [];
+        return Array.from(new Set(arr.map(obj => obj?.groupName)));
+    }
+    handleGroupSearchChange(searchValue, data, getSearchText) {
+        if (!this.enableGroupHeader)
+            return;
+        const visibleGroups = new Set();
+        for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+            if (item.type === 'option') {
+                const searchText = getSearchText(item.optionData);
+                if (searchText && typeof searchText === 'string' &&
+                    searchText.toLowerCase().includes(searchValue.toLowerCase())) {
+                    visibleGroups.add(item.groupName);
+                }
+            }
+        }
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', !visibleGroups.has(name));
+        });
+    }
+    handleGroupShowSelected(showSelected, data) {
+        if (!this.enableGroupHeader)
+            return;
+        const visibleGroups = new Set();
+        if (showSelected) {
+            data.forEach((item) => {
+                if (!item.hidden && item.groupName) {
+                    visibleGroups.add(item.groupName);
+                }
+            });
+        }
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', showSelected && !visibleGroups.has(name));
+        });
+    }
+    clearGroupHiddenClasses() {
+        if (!this.enableGroupHeader)
+            return;
+        this.getAllGroupAttributes().forEach(({ element }) => {
+            element.classList.remove('nile-group-hidden');
+        });
+    }
+    isGroupItem(item) {
+        return this.enableGroupHeader && item?.type === 'group';
+    }
+    getActualItem(item) {
+        if (this.enableGroupHeader && item?.type === 'option') {
+            return item.optionData;
+        }
+        return item;
+    }
+    getGroupName(item) {
+        if (this.enableGroupHeader && item?.type === 'option') {
+            return item.groupName;
+        }
+        return item?.groupName;
+    }
+    renderGroupHeader(item, getGroupDisplayText) {
+        if (!this.isGroupItem(item)) {
+            return null;
+        }
+        const groupName = item.groupName;
+        const displayText = getGroupDisplayText ? getGroupDisplayText(groupName) : groupName;
+        return {
+            type: 'group',
+            name: groupName,
+            displayText: displayText
+        };
+    }
+}
+//# sourceMappingURL=group-manager.js.map

package/dist/src/nile-virtual-select/group-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-manager.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/group-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport type { GroupedDataItem } from './types.js';\nimport type NileOptionGroup from '../nile-option-group/nile-option-group';\n\n/**\n * Interface for group attributes\n */\nexport interface GroupAttributes {\n  name: string;\n  data?: string | null;\n  element: HTMLElement;\n}\n\nexport class VirtualSelectGroupManager {\n  private component: any;\n  private enableGroupHeader: boolean = false;\n\n  constructor(component: any) {\n    this.component = component;\n  }\n\n  initialize(enableGroupHeader: boolean): void {\n    this.enableGroupHeader = enableGroupHeader;\n  }\n\n  convertToGroupedData(data: any[], getGroupKey: (item: any) => string): GroupedDataItem[] {\n    if (!this.enableGroupHeader || !getGroupKey) {\n      return data;\n    }\n\n    const groups = new Map<string, any[]>();\n    \n    data.forEach(item => {\n      const groupKey = getGroupKey(item);\n      if (!groups.has(groupKey)) {\n        groups.set(groupKey, []);\n      }\n      groups.get(groupKey)!.push(item);\n    });\n    \n    const groupedData: GroupedDataItem[] = [];\n    groups.forEach((options, groupKey) => {\n      groupedData.push({\n        type: 'group',\n        groupName: groupKey,\n        groupData: undefined\n      });\n      options.forEach(option => {\n        groupedData.push({\n          type: 'option',\n          groupName: groupKey,\n          optionData: option\n        });\n      });\n    });\n    \n    return groupedData;\n  }\n\n  extractFlatItemsFromGroupedData(data: any[]): any[] {\n    if (!this.enableGroupHeader) {\n      return data;\n    }\n\n    return data\n      .filter((item: any) => item.type === 'option')\n      .map((item: any) => item.optionData);\n  }\n\n  getAllGroupAttributes(): GroupAttributes[] {\n    if (!this.enableGroupHeader) return [];\n    \n    return Array.from(\n      this.component.querySelectorAll('nile-option-group[name]')\n    ).map((el: HTMLElement) => ({\n      name: el?.getAttribute('name') || '',\n      data: el?.getAttribute('data'),\n      element: el\n    }));\n  }\n\n  getUniqueGroupNames(arr: any[]): string[] {\n    if (!this.enableGroupHeader) return [];\n    return Array.from(new Set(arr.map(obj => obj?.groupName)));\n  }\n\n  handleGroupSearchChange(searchValue: string, data: any[], getSearchText: (item: any) => string): void {\n    if (!this.enableGroupHeader) return;\n    \n    const visibleGroups = new Set<string>();\n    \n    for (let i = 0; i < data.length; i++) {\n      const item = data[i];\n      \n      if (item.type === 'option') {\n        const searchText = getSearchText(item.optionData);\n        if (searchText && typeof searchText === 'string' && \n            searchText.toLowerCase().includes(searchValue.toLowerCase())) {\n          visibleGroups.add(item.groupName);\n        }\n      }\n    }\n    \n    this.getAllGroupAttributes().forEach(({ name, element }) => {\n      element?.classList.toggle('nile-group-hidden', !visibleGroups.has(name));\n    });\n  }\n\n  handleGroupShowSelected(showSelected: boolean, data: any[]): void {\n    if (!this.enableGroupHeader) return;\n    \n    const visibleGroups = new Set<string>();\n  \n    if (showSelected) {\n      data.forEach((item: any) => {\n        if (!item.hidden && item.groupName) {\n          visibleGroups.add(item.groupName);\n        }\n      });\n    }\n  \n    this.getAllGroupAttributes().forEach(({ name, element }) => {\n      element?.classList.toggle(\n        'nile-group-hidden',\n        showSelected && !visibleGroups.has(name)\n      );\n    });\n  }\n\n  clearGroupHiddenClasses(): void {\n    if (!this.enableGroupHeader) return;\n    \n    this.getAllGroupAttributes().forEach(({ element }) => {\n      element.classList.remove('nile-group-hidden');\n    });\n  }\n\n  isGroupItem(item: any): boolean {\n    return this.enableGroupHeader && item?.type === 'group';\n  }\n\n  getActualItem(item: any): any {\n    if (this.enableGroupHeader && item?.type === 'option') {\n      return item.optionData;\n    }\n    return item;\n  }\n\n  getGroupName(item: any): string | undefined {\n    if (this.enableGroupHeader && item?.type === 'option') {\n      return item.groupName;\n    }\n    return item?.groupName;\n  }\n\n  renderGroupHeader(item: any, getGroupDisplayText?: (groupKey: string) => string): any {\n    if (!this.isGroupItem(item)) {\n      return null;\n    }\n\n    const groupName = item.groupName;\n    const displayText = getGroupDisplayText ? getGroupDisplayText(groupName!) : groupName;\n    \n    return {\n      type: 'group',\n      name: groupName,\n      displayText: displayText\n    };\n  }\n}\n"]}