@aquera/nile-elements 1.7.1 → 1.7.3

package/dist/src/nile-combobox/renderer.js

@@ -0,0 +1,279 @@
+/**
+ * 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 { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+export class ComboboxRenderer {
+    static renderGroupHeader(row) {
+        return html `
+      <div
+        part="group-header"
+        class="combobox__group-header"
+        role="presentation"
+        data-group-id=${row.id}
+        style=${`--group-depth:${row.depth}`}
+      >
+        ${row.prefix
+            ? html `<nile-icon
+              class="combobox__group-prefix"
+              name=${row.prefix}
+              size="14"
+              method="fill"
+            ></nile-icon>`
+            : ''}
+        <span class="combobox__group-label">${row.label}</span>
+      </div>
+    `;
+    }
+    static renderRowsPlain(rows, value, multiple, getDisplayText, getItemValue, showNoResults, noResultsMessage, isLoading, onScroll, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription, noResultsSubtitle) {
+        if (showNoResults && !isLoading && rows.length === 0) {
+            return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);
+        }
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div class="combobox__options-plain" @scroll=${onScroll}>
+          ${rows.map((row) => row.kind === 'header'
+            ? ComboboxRenderer.renderGroupHeader(row)
+            : ComboboxRenderer.renderItem(row.item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription))}
+        </div>
+      </div>
+    `;
+    }
+    static renderRowsVirtualized(virtualItems, totalSize, rows, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;height:${totalSize}px;width:100%;">
+          ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
+            const row = rows[vItem.index];
+            if (!row)
+                return html ``;
+            const posStyle = `position:absolute;top:0;left:0;right:0;` +
+                `transform:translateY(${vItem.start}px);` +
+                `height:${vItem.size}px;`;
+            if (row.kind === 'header') {
+                return html `
+                  <div style=${posStyle} class="combobox__group-header-slot">
+                    ${ComboboxRenderer.renderGroupHeader(row)}
+                  </div>
+                `;
+            }
+            return html `
+                <div style=${posStyle}>
+                  ${ComboboxRenderer.renderItem(row.item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription)}
+                </div>
+              `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+    static renderVirtualizedOptions(virtualItems, totalSize, data, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, measureElement, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+        const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;height:${totalSize}px;width:100%;">
+          <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);">
+            ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
+            const item = data[vItem.index];
+            return ComboboxRenderer.renderMeasuredItem(item, vItem.index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription);
+        })}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static renderPlainOptions(data, value, multiple, getDisplayText, getItemValue, showNoResults, noResultsMessage, isLoading, onScroll, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription, noResultsSubtitle) {
+        if (showNoResults && !isLoading && data.length === 0) {
+            return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);
+        }
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div class="combobox__options-plain" @scroll=${onScroll}>
+          ${data.map((item) => ComboboxRenderer.renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription))}
+        </div>
+      </div>
+    `;
+    }
+    static renderNoResults(noResultsMessage, noResultsSubtitle) {
+        return html `
+      <div part="select-options" class="combobox__options">
+        <div part="no-results" class="combobox__no-results">
+          <div part="no-results-title" class="combobox__no-results-title">
+            ${noResultsMessage || 'No result found'}
+          </div>
+          ${noResultsSubtitle
+            ? html `<div part="no-results-subtitle" class="combobox__no-results-subtitle">${noResultsSubtitle}</div>`
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+    static renderNoData(noDataMessage) {
+        return html `
+      <div part="select-options" class="combobox__options">
+        <div part="no-data" class="combobox__no-results">
+          <div part="no-data-title" class="combobox__no-results-title">
+            ${noDataMessage || 'No data available'}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static renderMeasuredItem(item, index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+        if (!item)
+            return html ``;
+        const optionValue = getItemValue(item);
+        const displayText = getDisplayText(item);
+        const isDisabled = item?.disabled || false;
+        const className = item?.className;
+        const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
+        const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
+        const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
+        let isSelected = false;
+        if (multiple) {
+            isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
+        }
+        else {
+            isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
+        }
+        return html `
+      <nile-option
+        data-index=${index}
+        value=${optionValue}
+        .selected=${isSelected}
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${classMap({
+            option: enableDescription ?? false,
+            [className ?? '']: !!className,
+        })}
+        .description=${description}
+        .isDescriptionEnabled=${enableDescription}
+      >
+        ${unsafeHTML(prefix)}
+        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
+        ${unsafeHTML(suffix)}
+      </nile-option>
+    `;
+    }
+    static renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+        if (!item)
+            return html ``;
+        const optionValue = getItemValue(item);
+        const displayText = getDisplayText(item);
+        const isDisabled = item?.disabled || false;
+        const className = item?.className;
+        const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
+        const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
+        const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
+        let isSelected = false;
+        if (multiple) {
+            isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
+        }
+        else {
+            isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
+        }
+        return html `
+      <nile-option
+        value=${optionValue}
+        .selected=${isSelected}
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${classMap({
+            option: enableDescription ?? false,
+            [className ?? '']: !!className,
+        })}
+        .description=${description}
+        .isDescriptionEnabled=${enableDescription}
+      >
+        ${unsafeHTML(prefix)}
+        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
+        ${unsafeHTML(suffix)}
+      </nile-option>
+    `;
+    }
+    static renderVirtualizedGrid(virtualItems, totalSize, data, value, multiple, gridColumns, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, gridColumnWidth) {
+        const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+        const colTemplate = gridColumnWidth
+            ? `repeat(${gridColumns}, ${gridColumnWidth}px)`
+            : `repeat(${gridColumns}, 1fr)`;
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;">
+          <div style="position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);">
+            ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
+            const rowStart = vItem.index * gridColumns;
+            const rowItems = data.slice(rowStart, rowStart + gridColumns);
+            return html `
+                  <div class="combobox__grid-row" style="display:grid;grid-template-columns:${colTemplate};gap:4px;">
+                    ${rowItems.map((item) => ComboboxRenderer.renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix))}
+                  </div>
+                `;
+        })}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static renderHorizontalGrid(virtualItems, totalSize, data, value, multiple, gridRows, gridColumnWidth, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix) {
+        const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;
+        const rowHeight = 38;
+        return html `
+      <div
+        part="select-options"
+        class="combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;">
+          <div style="position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);">
+            ${repeat(virtualItems, (vCol) => vCol.key, (vCol) => {
+            const colStart = vCol.index * gridRows;
+            const colItems = data.slice(colStart, colStart + gridRows);
+            return html `
+                  <div class="combobox__grid-col" style="width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;">
+                    ${colItems.map((item) => ComboboxRenderer.renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix))}
+                  </div>
+                `;
+        })}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static renderAddCustomOption(searchValue, multiple) {
+        return html `
+      <nile-option
+        value=${searchValue}
+        class="combobox__add-option"
+        .showCheckbox=${multiple}
+      >
+        + Add "${searchValue}"
+      </nile-option>
+    `;
+    }
+    static shouldUseVirtualizer(data, gridColumns = 1) {
+        if (gridColumns > 1)
+            return true;
+        return data.length >= 5;
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/src/nile-combobox/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-combobox/renderer.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 { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n  static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n    return html`\n      <div\n        part=\"group-header\"\n        class=\"combobox__group-header\"\n        role=\"presentation\"\n        data-group-id=${row.id}\n        style=${`--group-depth:${row.depth}`}\n      >\n        ${row.prefix\n          ? html`<nile-icon\n              class=\"combobox__group-prefix\"\n              name=${row.prefix}\n              size=\"14\"\n              method=\"fill\"\n            ></nile-icon>`\n          : ''}\n        <span class=\"combobox__group-label\">${row.label}</span>\n      </div>\n    `;\n  }\n\n  static renderRowsPlain(\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && rows.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${rows.map((row) =>\n            row.kind === 'header'\n              ? ComboboxRenderer.renderGroupHeader(row)\n              : ComboboxRenderer.renderItem(\n                  row.item, value, multiple, getDisplayText, getItemValue,\n                  allowHtmlLabel, getItemDescription, getItemPrefix,\n                  getItemSuffix, enableDescription,\n                ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderRowsVirtualized(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          ${repeat(\n            virtualItems,\n            (vItem) => vItem.key,\n            (vItem) => {\n              const row = rows[vItem.index];\n              if (!row) return html``;\n              const posStyle =\n                `position:absolute;top:0;left:0;right:0;` +\n                `transform:translateY(${vItem.start}px);` +\n                `height:${vItem.size}px;`;\n              if (row.kind === 'header') {\n                return html`\n                  <div style=${posStyle} class=\"combobox__group-header-slot\">\n                    ${ComboboxRenderer.renderGroupHeader(row)}\n                  </div>\n                `;\n              }\n              return html`\n                <div style=${posStyle}>\n                  ${ComboboxRenderer.renderItem(\n                    row.item, value, multiple, getDisplayText, getItemValue,\n                    allowHtmlLabel, getItemDescription, getItemPrefix,\n                    getItemSuffix, enableDescription,\n                  )}\n                </div>\n              `;\n            },\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderVirtualizedOptions(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    measureElement: (el: Element | null) => void,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          <div style=\"position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);\">\n            ${repeat(\n              virtualItems,\n              (vItem) => vItem.key,\n              (vItem) => {\n                const item = data[vItem.index];\n                return ComboboxRenderer.renderMeasuredItem(\n                  item, vItem.index, value, multiple, getDisplayText, getItemValue,\n                  allowHtmlLabel, getItemDescription, getItemPrefix,\n                  getItemSuffix, enableDescription,\n                );\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderPlainOptions(\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && data.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${data.map((item: any) =>\n            ComboboxRenderer.renderItem(\n              item, value, multiple, getDisplayText, getItemValue,\n              allowHtmlLabel, getItemDescription, getItemPrefix,\n              getItemSuffix, enableDescription,\n            ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-results\" class=\"combobox__no-results\">\n          <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n            ${noResultsMessage || 'No result found'}\n          </div>\n          ${noResultsSubtitle\n            ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoData(noDataMessage: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-data\" class=\"combobox__no-results\">\n          <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n            ${noDataMessage || 'No data available'}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private static renderMeasuredItem(\n    item: any,\n    index: number,\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    if (!item) return html``;\n\n    const optionValue = getItemValue(item);\n    const displayText = getDisplayText(item);\n    const isDisabled = item?.disabled || false;\n    const className = item?.className;\n    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n    let isSelected = false;\n    if (multiple) {\n      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n    } else {\n      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n    }\n\n    return html`\n      <nile-option\n        data-index=${index}\n        value=${optionValue}\n        .selected=${isSelected}\n        .disabled=${isDisabled}\n        .showCheckbox=${multiple}\n        class=${classMap({\n          option: enableDescription ?? false,\n          [className ?? '']: !!className,\n        })}\n        .description=${description}\n        .isDescriptionEnabled=${enableDescription}\n      >\n        ${unsafeHTML(prefix)}\n        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n        ${unsafeHTML(suffix)}\n      </nile-option>\n    `;\n  }\n\n  static renderItem(\n    item: any,\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    if (!item) return html``;\n\n    const optionValue = getItemValue(item);\n    const displayText = getDisplayText(item);\n    const isDisabled = item?.disabled || false;\n    const className = item?.className;\n    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n    let isSelected = false;\n    if (multiple) {\n      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n    } else {\n      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n    }\n\n    return html`\n      <nile-option\n        value=${optionValue}\n        .selected=${isSelected}\n        .disabled=${isDisabled}\n        .showCheckbox=${multiple}\n        class=${classMap({\n          option: enableDescription ?? false,\n          [className ?? '']: !!className,\n        })}\n        .description=${description}\n        .isDescriptionEnabled=${enableDescription}\n      >\n        ${unsafeHTML(prefix)}\n        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n        ${unsafeHTML(suffix)}\n      </nile-option>\n    `;\n  }\n\n  static renderVirtualizedGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridColumns: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    gridColumnWidth?: number,\n  ): TemplateResult {\n    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const colTemplate = gridColumnWidth\n      ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n      : `repeat(${gridColumns}, 1fr)`;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n          <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n            ${repeat(\n              virtualItems,\n              (vItem) => vItem.key,\n              (vItem) => {\n                const rowStart = vItem.index * gridColumns;\n                const rowItems = data.slice(rowStart, rowStart + gridColumns);\n                return html`\n                  <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n                    ${rowItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderHorizontalGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridRows: number,\n    gridColumnWidth: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n  ): TemplateResult {\n    const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const rowHeight = 38;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n          <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n            ${repeat(\n              virtualItems,\n              (vCol) => vCol.key,\n              (vCol) => {\n                const colStart = vCol.index * gridRows;\n                const colItems = data.slice(colStart, colStart + gridRows);\n                return html`\n                  <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n                    ${colItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderAddCustomOption(\n    searchValue: string,\n    multiple: boolean,\n  ): TemplateResult {\n    return html`\n      <nile-option\n        value=${searchValue}\n        class=\"combobox__add-option\"\n        .showCheckbox=${multiple}\n      >\n        + Add \"${searchValue}\"\n      </nile-option>\n    `;\n  }\n\n  static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n    if (gridColumns > 1) return true;\n    return data.length >= 5;\n  }\n}\n"]}

package/dist/src/nile-combobox/search-manager.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 ComboboxSearchManager {
+    private debounceTimer;
+    filter(searchValue: string, originalItems: any[], getSearchText: (item: any) => string): {
+        filteredItems: any[];
+        showNoResults: boolean;
+    };
+    debounceSearch(callback: (query: string) => void, query: string, debounceMs: number): void;
+    cancelDebounce(): void;
+}

package/dist/src/nile-combobox/search-manager.js

@@ -0,0 +1,41 @@
+/**
+ * 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 ComboboxSearchManager {
+    constructor() {
+        this.debounceTimer = null;
+    }
+    filter(searchValue, originalItems, getSearchText) {
+        if (!originalItems || originalItems.length === 0) {
+            return { filteredItems: [], showNoResults: true };
+        }
+        if (!searchValue || searchValue.trim() === '') {
+            return { filteredItems: [...originalItems], showNoResults: false };
+        }
+        const needle = searchValue.toLowerCase();
+        const filteredItems = originalItems.filter((item) => {
+            const text = getSearchText(item);
+            return text.toLowerCase().includes(needle);
+        });
+        return { filteredItems, showNoResults: filteredItems.length === 0 };
+    }
+    debounceSearch(callback, query, debounceMs) {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            callback(query);
+            this.debounceTimer = null;
+        }, debounceMs);
+    }
+    cancelDebounce() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+    }
+}
+//# sourceMappingURL=search-manager.js.map

package/dist/src/nile-combobox/search-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/search-manager.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,OAAO,qBAAqB;IAAlC;QACU,kBAAa,GAAyC,IAAI,CAAC;IA4CrE,CAAC;IA1CC,MAAM,CACJ,WAAmB,EACnB,aAAoB,EACpB,aAAoC;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjD,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC9C,OAAO,EAAE,aAAa,EAAE,CAAC,GAAG,aAAa,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;QACrE,CAAC;QAED,MAAM,MAAM,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC;QACzC,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAS,EAAE,EAAE;YACvD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;YACjC,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,cAAc,CACZ,QAAiC,EACjC,KAAa,EACb,UAAkB;QAElB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,EAAE,UAAU,CAAC,CAAC;IACjB,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;CACF","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport class ComboboxSearchManager {\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n  filter(\n    searchValue: string,\n    originalItems: any[],\n    getSearchText: (item: any) => string,\n  ): { filteredItems: any[]; showNoResults: boolean } {\n    if (!originalItems || originalItems.length === 0) {\n      return { filteredItems: [], showNoResults: true };\n    }\n\n    if (!searchValue || searchValue.trim() === '') {\n      return { filteredItems: [...originalItems], showNoResults: false };\n    }\n\n    const needle = searchValue.toLowerCase();\n    const filteredItems = originalItems.filter((item: any) => {\n      const text = getSearchText(item);\n      return text.toLowerCase().includes(needle);\n    });\n\n    return { filteredItems, showNoResults: filteredItems.length === 0 };\n  }\n\n  debounceSearch(\n    callback: (query: string) => void,\n    query: string,\n    debounceMs: number,\n  ): void {\n    if (this.debounceTimer) {\n      clearTimeout(this.debounceTimer);\n    }\n    this.debounceTimer = setTimeout(() => {\n      callback(query);\n      this.debounceTimer = null;\n    }, debounceMs);\n  }\n\n  cancelDebounce(): void {\n    if (this.debounceTimer) {\n      clearTimeout(this.debounceTimer);\n      this.debounceTimer = null;\n    }\n  }\n}\n"]}

package/dist/src/nile-combobox/selection-manager.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { ComboboxOption } from './types.js';
+export declare class ComboboxSelectionManager {
+    static createOptionsFromValues(value: string | string[], data: any[], getDisplayText: (item: any) => string, getItemValue?: (item: any) => string): ComboboxOption[];
+    static toggleMultiValue(currentValues: string[], optionValue: string): string[];
+    static removeValue(currentValues: string[], removeValue: string): string[];
+}

package/dist/src/nile-combobox/selection-manager.js

@@ -0,0 +1,44 @@
+/**
+ * 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 ComboboxSelectionManager {
+    static createOptionsFromValues(value, data, getDisplayText, getItemValue) {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            return [];
+        }
+        const values = Array.isArray(value) ? value : [value];
+        const valueFn = getItemValue || ((item) => item?.value ?? item);
+        return values.map(valueItem => {
+            const item = data.find((d) => {
+                const iv = valueFn(d);
+                return String(iv) === String(valueItem);
+            });
+            const displayText = item ? getDisplayText(item) : valueItem;
+            return {
+                value: valueItem,
+                selected: true,
+                getTextLabel: () => {
+                    if (typeof displayText === 'string' && /<[^>]+>/.test(displayText)) {
+                        const div = document.createElement('div');
+                        div.innerHTML = displayText;
+                        return div.textContent || div.innerText || '';
+                    }
+                    return displayText;
+                },
+            };
+        });
+    }
+    static toggleMultiValue(currentValues, optionValue) {
+        if (currentValues.includes(optionValue)) {
+            return currentValues.filter(v => v !== optionValue);
+        }
+        return [...currentValues, optionValue];
+    }
+    static removeValue(currentValues, removeValue) {
+        return currentValues.filter(v => v !== removeValue);
+    }
+}
+//# sourceMappingURL=selection-manager.js.map

package/dist/src/nile-combobox/selection-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/selection-manager.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,OAAO,wBAAwB;IACnC,MAAM,CAAC,uBAAuB,CAC5B,KAAwB,EACxB,IAAW,EACX,cAAqC,EACrC,YAAoC;QAEpC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YAC3D,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACtD,MAAM,OAAO,GAAG,YAAY,IAAI,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC;QAErE,OAAO,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE;gBAChC,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;gBACtB,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;YAEH,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAE5D,OAAO;gBACL,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;wBACnE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC1C,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;wBAC5B,OAAO,GAAG,CAAC,WAAW,IAAI,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC;oBAChD,CAAC;oBACD,OAAO,WAAW,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,aAAuB,EAAE,WAAmB;QAClE,IAAI,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;YACxC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,CAAC,GAAG,aAAa,EAAE,WAAW,CAAC,CAAC;IACzC,CAAC;IAED,MAAM,CAAC,WAAW,CAAC,aAAuB,EAAE,WAAmB;QAC7D,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC;IACtD,CAAC;CACF","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport type { ComboboxOption } from './types.js';\n\nexport class ComboboxSelectionManager {\n  static createOptionsFromValues(\n    value: string | string[],\n    data: any[],\n    getDisplayText: (item: any) => string,\n    getItemValue?: (item: any) => string\n  ): ComboboxOption[] {\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      return [];\n    }\n\n    const values = Array.isArray(value) ? value : [value];\n    const valueFn = getItemValue || ((item: any) => item?.value ?? item);\n\n    return values.map(valueItem => {\n      const item = data.find((d: any) => {\n        const iv = valueFn(d);\n        return String(iv) === String(valueItem);\n      });\n\n      const displayText = item ? getDisplayText(item) : valueItem;\n\n      return {\n        value: valueItem,\n        selected: true,\n        getTextLabel: () => {\n          if (typeof displayText === 'string' && /<[^>]+>/.test(displayText)) {\n            const div = document.createElement('div');\n            div.innerHTML = displayText;\n            return div.textContent || div.innerText || '';\n          }\n          return displayText;\n        },\n      };\n    });\n  }\n\n  static toggleMultiValue(currentValues: string[], optionValue: string): string[] {\n    if (currentValues.includes(optionValue)) {\n      return currentValues.filter(v => v !== optionValue);\n    }\n    return [...currentValues, optionValue];\n  }\n\n  static removeValue(currentValues: string[], removeValue: string): string[] {\n    return currentValues.filter(v => v !== removeValue);\n  }\n}\n"]}

package/dist/src/nile-combobox/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+export interface ComboboxOption {
+    value: string;
+    selected: boolean;
+    getTextLabel: () => string;
+}
+export interface ComboboxRenderItemConfig {
+    getDisplayText: (item: any) => string;
+    getValue?: (item: any) => string;
+    getSearchText?: (item: any) => string;
+    getDescription?: (item: any) => string;
+    getPrefix?: (item: any) => string;
+    getSuffix?: (item: any) => string;
+}
+export type ComboboxTagLayout = 'single-line' | 'wrap' | 'fixed-height';
+export type ComboboxSize = 'small' | 'medium' | 'large';
+export type ComboboxPlacement = 'top' | 'bottom';
+export interface ComboboxGroupItem {
+    type: 'group';
+    id: string;
+    label: string;
+    prefix?: string;
+    options: ComboboxDataItem[];
+    collapsible?: boolean;
+}
+export interface ComboboxOptionItem {
+    type?: 'option';
+    value: string;
+    label?: string;
+    [key: string]: any;
+}
+export type ComboboxDataItem = ComboboxGroupItem | ComboboxOptionItem;
+export interface ComboboxHeaderRow {
+    kind: 'header';
+    id: string;
+    label: string;
+    prefix?: string;
+    depth: number;
+    optionCount: number;
+}
+export interface ComboboxOptionRow {
+    kind: 'option';
+    item: ComboboxOptionItem;
+    depth: number;
+    parentIds: string[];
+}
+export type ComboboxRow = ComboboxHeaderRow | ComboboxOptionRow;

package/dist/src/nile-combobox/types.js

@@ -0,0 +1,8 @@
+/**
+ * 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 {};
+//# sourceMappingURL=types.js.map

package/dist/src/nile-combobox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/nile-combobox/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG","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 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;\n\nexport interface ComboboxOption {\n  value: string;\n  selected: boolean;\n  getTextLabel: () => string;\n}\n\nexport interface ComboboxRenderItemConfig {\n  getDisplayText: (item: any) => string;\n  getValue?: (item: any) => string;\n  getSearchText?: (item: any) => string;\n  getDescription?: (item: any) => string;\n  getPrefix?: (item: any) => string;\n  getSuffix?: (item: any) => string;\n}\n\nexport type ComboboxTagLayout = 'single-line' | 'wrap' | 'fixed-height';\nexport type ComboboxSize = 'small' | 'medium' | 'large';\nexport type ComboboxPlacement = 'top' | 'bottom';\n\nexport interface ComboboxGroupItem {\n  type: 'group';\n  id: string;\n  label: string;\n  prefix?: string;\n  options: ComboboxDataItem[];\n  collapsible?: boolean;\n}\n\nexport interface ComboboxOptionItem {\n  type?: 'option';\n  value: string;\n  label?: string;\n  [key: string]: any;\n}\n\nexport type ComboboxDataItem = ComboboxGroupItem | ComboboxOptionItem;\n\nexport interface ComboboxHeaderRow {\n  kind: 'header';\n  id: string;\n  label: string;\n  prefix?: string;\n  depth: number;\n  optionCount: number;\n}\n\nexport interface ComboboxOptionRow {\n  kind: 'option';\n  item: ComboboxOptionItem;\n  depth: number;\n  parentIds: string[];\n}\n\nexport type ComboboxRow = ComboboxHeaderRow | ComboboxOptionRow;\n"]}

package/dist/src/version.js

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.7.1';
+export const NILE_ELEMENTS_VERSION = '1.7.3';
 export const NILE_VERSION = '1.2.4';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.1';\nexport const NILE_VERSION = '1.2.4';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.3';\nexport const NILE_VERSION = '1.2.4';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}