@aquera/nile-elements 0.1.66-beta-1.1 → 0.1.66

package/src/nile-virtual-select/renderer.ts

@@ -0,0 +1,102 @@
+/**
+ * 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, type TemplateResult } from 'lit';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export class VirtualSelectRenderer {
+  static getVirtualizedContent(
+    data: any[], 
+    searchEnabled: boolean, 
+    renderItemFunction: (item: any) => string,
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string,
+    showNoResults?: boolean,
+    noResultsMessage?: string,
+    optionsLoading?: boolean
+  ): TemplateResult {
+    return html`
+      <div class="select__options ${
+        searchEnabled ? 'select__options__search-enabled' : ``
+      }">
+        ${showNoResults && !optionsLoading
+          ? html`
+              <div class="select__no-results">
+                ${noResultsMessage || 'No results found'}
+              </div>
+            `
+          : html`
+              <div
+                class="virtualized"
+              >
+                ${VirtualSelectRenderer.shouldUseVirtualizer(data)
+                  ? html`
+                      ${virtualize({
+                        items: data,
+                        renderItem: (item: any): TemplateResult =>
+                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue),
+                        scroller: true,
+                      })}
+                    `
+                  : html`
+                      ${data.map((item: any) => 
+                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue)
+                      )}
+                    `}
+              </div>
+            `}
+      </div>`;
+  }
+
+  static getItemRenderFunction(
+    item: any, 
+    renderItemFunction: (item: any) => string, 
+    value: string | string[], 
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string
+  ): TemplateResult {
+    const displayTextFn = getDisplayText || renderItemFunction;
+    const valueFn = getItemValue || ((item: any) => item?.value || item);
+    
+    const optionValue = valueFn(item);
+    const displayText = displayTextFn(item);
+    const isDisabled = item.disabled || false;
+    const className = item.className;
+    
+    let isSelected = false;
+    if (multiple) {
+      isSelected = Array.isArray(value) && value.includes(optionValue);
+    } else {
+      isSelected = (Array.isArray(value) ? value[0] : value) === optionValue;
+    }
+    
+    return html`
+      <nile-option 
+        value=${optionValue} 
+        .selected=${isSelected} 
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${ifDefined(className || undefined)}
+      >
+        ${unsafeHTML(displayText)}
+      </nile-option>
+    `;
+  }
+
+  /**
+   * Determines whether to use virtualizer based on dataset size
+   * For small datasets (less than 50 items), use regular rendering for better sizing
+   */
+  private static shouldUseVirtualizer(data: any[]): boolean {
+    return data.length >= 50;
+  }
+} 

package/src/nile-virtual-select/search-manager.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 VirtualSelectSearchManager {
+    static filterVirtualOptions(
+    searchValue: string,
+    originalOptionItems: any[],
+    data: any[], 
+    renderItemFunction: (item: any) => string,
+    getSearchText?: (item: any) => string
+  ): { filteredItems: any[], showNoResults: boolean } {
+    if (originalOptionItems.length === 0 && data.length > 0) {
+      return {
+        filteredItems: [...data],
+        showNoResults: false
+      };
+    }
+
+    if (!originalOptionItems || originalOptionItems.length === 0) {
+      return {
+        filteredItems: [],
+        showNoResults: true
+      };
+    }
+
+    if (!searchValue || searchValue.trim() === '') {
+      return {
+        filteredItems: [...originalOptionItems],
+        showNoResults: false
+      };
+    }
+
+    const lowerCaseSearchValue = searchValue.toLowerCase();
+    const searchTextFn = getSearchText || renderItemFunction;
+    const filteredItems = originalOptionItems.filter((item: any) => {
+      const itemValue = searchTextFn(item);
+      const lowerCaseItemValue = itemValue.toLowerCase();
+      return lowerCaseItemValue.includes(lowerCaseSearchValue);
+    });
+
+    return {
+      filteredItems,
+      showNoResults: filteredItems.length === 0
+    };
+  }
+} 

package/src/nile-virtual-select/selection-manager.ts

@@ -0,0 +1,75 @@
+/**
+ * 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 { VirtualOption } from './types.js';
+
+export class VirtualSelectSelectionManager {
+  static createVirtualOptionsFromValues(
+    value: string | string[], 
+    data: any[], 
+    getDisplayText: (item: any) => string,
+    getItemValue?: (item: any) => string
+  ): VirtualOption[] {
+    if (!value || (Array.isArray(value) && value.length === 0)) {
+      return [];
+    }
+
+    const values = Array.isArray(value) ? value : [value];
+    
+    return values.map(valueItem => {
+      // Use enhanced functions if available, otherwise fallback to basic logic
+      const displayTextFn = getDisplayText;
+      const valueFn = getItemValue || ((item: any) => item?.value || item);
+      
+      const item = data.find((item: any) => {
+        const itemValue = valueFn(item);
+        const itemDisplayText = displayTextFn(item);
+        return itemValue === valueItem || itemDisplayText === valueItem;
+      });
+      
+      const displayText = item ? displayTextFn(item) : valueItem;
+      
+      return {
+        value: valueItem,
+        selected: true,
+        getTextLabel: () => {
+          // If displayText contains HTML, strip tags
+          if (typeof displayText === 'string' && /<[^>]+>/.test(displayText)) {
+            const div = document.createElement('div');
+            div.innerHTML = displayText;
+            return div.textContent || div.innerText || '';
+          }
+          return displayText;
+        },
+        getOptionPrefix: () => '',
+      };
+    });
+  }
+
+  static updateDisplayLabel(selectedOptions: VirtualOption[], placeholder: string, multiple: boolean, value: string | string[]): string {
+    if (multiple) {
+      if (placeholder && selectedOptions.length === 0) {
+        return '';
+      } else {
+        return selectedOptions.length + ' selected';
+      }
+    } else {
+      const currentValue = Array.isArray(value) ? value[0] : value;
+      return selectedOptions[0]?.getTextLabel()
+        ? selectedOptions[0].getTextLabel()
+        : currentValue ?? '';
+    }
+  }
+
+  static updateValue(selectedOptions: VirtualOption[], multiple: boolean): string | string[] {
+    if (multiple) {
+      return selectedOptions.map(el => el.value);
+    } else {
+      return selectedOptions[0]?.value ?? '';
+    }
+  }
+} 

package/src/nile-virtual-select/types.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 VirtualOption {
+  value: string;
+  selected: boolean;
+  getTextLabel: () => string;
+  getOptionPrefix: () => string;
+}
+
+export interface RenderItemConfig {
+  getDisplayText: (item: any) => string;
+  getValue?: (item: any) => string;
+  getSearchText?: (item: any) => string;
+}
+
+export interface VirtualSelectProperties {
+  name: string;
+  data: any[];
+  value: string | string[];
+  size: 'small' | 'medium' | 'large';
+  placeholder: string;
+  searchEnabled: boolean;
+  internalSearchPlaceHolder: string;
+  disableLocalSearch: boolean;
+  optionsLoading: boolean;
+  multiple: boolean;
+  helpText: string;
+  errorMessage: string;
+  warning: boolean;
+  error: boolean;
+  success: boolean;
+  disabled: boolean;
+  clearable: boolean;
+  open: boolean;
+  hoist: boolean;
+  filled: boolean;
+  pill: boolean;
+  label: string;
+  placement: 'top' | 'bottom';
+  form: string;
+  required: boolean;
+  showNoResults: boolean;
+  noResultsMessage: string;
+  renderItemConfig?: RenderItemConfig;
+  blockValueChange: boolean;
+  noWidthSync: boolean;
+}