npm - @aquera/nile-elements - Versions diffs - 1.7.2 → 1.7.4 - Mend

@aquera/nile-elements 1.7.2 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

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

@@ -9,6 +9,75 @@ 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 `
@@ -20,7 +89,7 @@ export class ComboboxRenderer {
           <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, measureElement, getItemDescription, getItemPrefix, getItemSuffix, enableDescription);
+            return ComboboxRenderer.renderMeasuredItem(item, vItem.index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription);
         })}
           </div>
         </div>
@@ -67,7 +136,7 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderMeasuredItem(item, index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, measureElement, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+    static renderMeasuredItem(item, index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
         if (!item)
             return html ``;
         const optionValue = getItemValue(item);

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

	@@ -1 +1 @@
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';\n\nexport class ComboboxRenderer {\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, measureElement, 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 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 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"]}
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/types.d.ts CHANGED Viewed

@@ -21,3 +21,33 @@ export interface ComboboxRenderItemConfig {
 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.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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/nile-detail/nile-detail.css.js CHANGED Viewed

@@ -147,6 +147,236 @@ export const styles = css `
     display: block;
     padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
+  /* ── Selection variant ──────────────────────────────────────────────────── */
+  .detail__selection-label {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    flex: 1;
+    min-width: 0;
+  }
+  .detail__select-all {
+    flex: 0 0 auto;
+  }
+  .detail__selection-title {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+    min-width: 0;
+  }
+  .detail__selection-count {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    margin-top: 2px;
+  }
+  .detail__selection-content {
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+  .detail__selection-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+  .detail__selection-search {
+    flex: 1;
+    min-width: 0;
+  }
+  .detail__selection-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    flex: 0 0 auto;
+  }
+  .detail__selection-grid {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 8px 24px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 8px;
+    scroll-snap-type: x proximity;
+  }
+  .detail__selection-grid--virtual {
+    display: block;
+    position: relative;
+    width: 100%;
+    contain: layout paint;
+  }
+  .detail__selection-grid--virtual.detail__selection-grid--vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-snap-type: y proximity;
+  }
+  .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {
+    width: 8px;
+    height: 0;
+  }
+  .detail__selection-grid--virtual.detail__selection-grid--both {
+    overflow: auto;
+    scroll-snap-type: none;
+  }
+  .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .detail__selection-grid--virtual .detail__selection-track {
+    position: relative;
+  }
+  .detail__selection-tooltip--virtual {
+    box-sizing: border-box;
+    padding-right: 24px;
+  }
+  .detail__selection-grid > nile-checkbox,
+  .detail__selection-grid > .detail__selection-tooltip {
+    scroll-snap-align: start;
+    min-width: 0;
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .detail__selection-checkbox {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+  .detail__selection-checkbox::part(base) {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+  }
+  .detail__selection-checkbox::part(label) {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .detail__selection-checkbox--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .detail__selection-text {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1 1 auto;
+    line-height: 1.25;
+  }
+  .detail__selection-item-label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .detail__selection-desc {
+    display: block;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .detail__selection-prefix,
+  .detail__selection-suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    margin: 0 6px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+  }
+  .detail__selection-prefix { margin-left: 0; }
+  .detail__selection-suffix { margin-right: 0; }
+  .detail__selection-placeholder {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 8px;
+    box-sizing: border-box;
+    opacity: 0.6;
+  }
+  .detail__selection-placeholder-bar {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background: linear-gradient(
+      90deg,
+      rgba(0,0,0,0.06) 0%,
+      rgba(0,0,0,0.12) 50%,
+      rgba(0,0,0,0.06) 100%
+    );
+    background-size: 200% 100%;
+    animation: nile-detail-shimmer 1.4s linear infinite;
+    flex: 0 0 auto;
+  }
+  .detail__selection-placeholder-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    background: linear-gradient(
+      90deg,
+      rgba(0,0,0,0.06) 0%,
+      rgba(0,0,0,0.12) 50%,
+      rgba(0,0,0,0.06) 100%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: nile-detail-shimmer 1.4s linear infinite;
+  }
+  @keyframes nile-detail-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .detail__selection-grid::-webkit-scrollbar {
+    height: 8px;
+  }
+  .detail__selection-grid::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-detail.css.js.map

package/dist/src/nile-detail/nile-detail.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\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;\n }\n\n :host {\n display: block;\n width: 100%;\n }\n\n .detail {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n overflow: hidden;\n width: 100%;\n line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .detail--disabled {\n opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n }\n\n .detail__header {\n display: flex;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n user-select: none;\n cursor: pointer;\n list-style: none;\n }\n\n .detail__header::-webkit-details-marker {\n display: none;\n }\n\n .detail__header::marker {\n content: '';\n }\n\n .detail__header--icon-left {\n flex-direction: row-reverse;\n }\n\n .detail__header:focus {\n outline: none;\n }\n\n .detail__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n outline-offset: calc(1px + 1px);\n }\n\n .detail--disabled .detail__header {\n cursor: not-allowed;\n }\n\n .detail--disabled .detail__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .detail__label {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .detail__header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__heading-text {\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n }\n\n .detail__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms transform ease;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n transform: rotate(90deg);\n }\n\n .detail--open .detail__summary-icon {\n transform: rotate(-90deg);\n }\n\n .detail__body {\n overflow: hidden;\n }\n\n .detail__body[hidden] {\n display: none;\n }\n\n .detail__content {\n display: block;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0XxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\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;\n }\n\n :host {\n display: block;\n width: 100%;\n }\n\n .detail {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n overflow: hidden;\n width: 100%;\n line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .detail--disabled {\n opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n }\n\n .detail__header {\n display: flex;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n user-select: none;\n cursor: pointer;\n list-style: none;\n }\n\n .detail__header::-webkit-details-marker {\n display: none;\n }\n\n .detail__header::marker {\n content: '';\n }\n\n .detail__header--icon-left {\n flex-direction: row-reverse;\n }\n\n .detail__header:focus {\n outline: none;\n }\n\n .detail__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n outline-offset: calc(1px + 1px);\n }\n\n .detail--disabled .detail__header {\n cursor: not-allowed;\n }\n\n .detail--disabled .detail__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .detail__label {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .detail__header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__heading-text {\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n }\n\n .detail__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms transform ease;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n transform: rotate(90deg);\n }\n\n .detail--open .detail__summary-icon {\n transform: rotate(-90deg);\n }\n\n .detail__body {\n overflow: hidden;\n }\n\n .detail__body[hidden] {\n display: none;\n }\n\n .detail__content {\n display: block;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n / ── Selection variant ──────────────────────────────────────────────────── */\n\n .detail__selection-label {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n flex: 1;\n min-width: 0;\n }\n\n .detail__select-all {\n flex: 0 0 auto;\n }\n\n .detail__selection-title {\n display: flex;\n flex-direction: column;\n line-height: 1.3;\n min-width: 0;\n }\n\n .detail__selection-count {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__selection-content {\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .detail__selection-toolbar {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .detail__selection-search {\n flex: 1;\n min-width: 0;\n }\n\n .detail__selection-actions {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex: 0 0 auto;\n }\n\n .detail__selection-grid {\n display: grid;\n grid-auto-flow: column;\n gap: 8px 24px;\n overflow-x: auto;\n overflow-y: hidden;\n padding-bottom: 8px;\n scroll-snap-type: x proximity;\n }\n\n .detail__selection-grid--virtual {\n display: block;\n position: relative;\n width: 100%;\n contain: layout paint;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical {\n overflow-x: hidden;\n overflow-y: auto;\n scroll-snap-type: y proximity;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {\n width: 8px;\n height: 0;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both {\n overflow: auto;\n scroll-snap-type: none;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n .detail__selection-grid--virtual .detail__selection-track {\n position: relative;\n }\n\n .detail__selection-tooltip--virtual {\n box-sizing: border-box;\n padding-right: 24px;\n }\n\n .detail__selection-grid > nile-checkbox,\n .detail__selection-grid > .detail__selection-tooltip {\n scroll-snap-align: start;\n min-width: 0;\n display: block;\n max-width: 100%;\n overflow: hidden;\n }\n\n .detail__selection-checkbox {\n display: block;\n width: 100%;\n min-width: 0;\n }\n\n .detail__selection-checkbox::part(base) {\n display: flex;\n width: 100%;\n min-width: 0;\n align-items: center;\n }\n\n .detail__selection-checkbox::part(label) {\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-checkbox--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .detail__selection-text {\n display: inline-flex;\n flex-direction: column;\n min-width: 0;\n flex: 1 1 auto;\n line-height: 1.25;\n }\n\n .detail__selection-item-label {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-desc {\n display: block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-prefix,\n .detail__selection-suffix {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n margin: 0 6px;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n }\n\n .detail__selection-prefix { margin-left: 0; }\n .detail__selection-suffix { margin-right: 0; }\n\n .detail__selection-placeholder {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 4px 8px;\n box-sizing: border-box;\n opacity: 0.6;\n }\n\n .detail__selection-placeholder-bar {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n animation: nile-detail-shimmer 1.4s linear infinite;\n flex: 0 0 auto;\n }\n\n .detail__selection-placeholder-label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n animation: nile-detail-shimmer 1.4s linear infinite;\n }\n\n @keyframes nile-detail-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n .detail__selection-grid::-webkit-scrollbar {\n height: 8px;\n }\n\n .detail__selection-grid::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n`;\n\nexport default [styles];\n"]}