@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.3

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, type TemplateResult } from 'lit';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+
+export class VirtualSelectRenderer {
+  static getVirtualizedContent(
+    allOptionItems: any[], 
+    searchEnabled: boolean, 
+    renderItemFunction: (item: any) => string,
+    value: string | string[],
+    multiple: boolean
+  ): TemplateResult {
+    return html`
+      <div class="select__options ${
+        searchEnabled ? 'select__options__search-enabled' : ``
+      }">
+        <div
+          class="virtualized"
+        >
+          ${virtualize({
+            items: allOptionItems,
+            renderItem: (item: any): TemplateResult =>
+              VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple),
+            scroller: true,
+          })}
+        </div>
+      </div>`;
+  }
+
+  static getItemRenderFunction(
+    item: any, 
+    renderItemFunction: (item: any) => string, 
+    value: string | string[], 
+    multiple: boolean
+  ): TemplateResult {
+    const optionValue = item.value;
+    const displayText = renderItemFunction(item);
+    
+    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} 
+        .multiple=${multiple}
+      >
+        ${displayText}
+      </nile-option>
+    `;
+  }
+} 

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

@@ -0,0 +1,48 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export class VirtualSelectSearchManager {
+  static filterVirtualOptions(
+    searchValue: string, 
+    originalOptionItems: any[], 
+    allOptionItems: any[], 
+    renderItemFunction: (item: any) => string
+  ): { filteredItems: any[], showNoResults: boolean } {
+    if (originalOptionItems.length === 0 && allOptionItems.length > 0) {
+      return {
+        filteredItems: [...allOptionItems],
+        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 filteredItems = originalOptionItems.filter((item: any) => {
+      const itemValue = renderItemFunction(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,56 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type { VirtualOption } from './types.js';
+
+export class VirtualSelectSelectionManager {
+  static createVirtualOptionsFromValues(value: string | string[], allOptionItems: any[], renderItemFunction: (item: any) => string): VirtualOption[] {
+    if (!value || (Array.isArray(value) && value.length === 0)) {
+      return [];
+    }
+
+    const values = Array.isArray(value) ? value : [value];
+    
+    return values.map(valueItem => {
+      const item = allOptionItems.find((item: any) => 
+        item.value === valueItem || renderItemFunction(item) === valueItem
+      );
+      
+      const displayText = item ? renderItemFunction(item) : valueItem;
+      
+      return {
+        value: valueItem,
+        selected: true,
+        getTextLabel: () => 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,48 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+
+export interface VirtualOption {
+  value: string;
+  selected: boolean;
+  getTextLabel: () => string;
+  getOptionPrefix: () => string;
+}
+
+export interface VirtualSelectProperties {
+  name: string;
+  allOptionItems: 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;
+  renderItemFunction: (item: any) => string;
+  blockValueChange: boolean;
+  noWidthSync: boolean;
+}