@aquera/nile-elements 1.2.4-beta-1.1 → 1.2.5-beta-1.0

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

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

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

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

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

@@ -255,7 +255,6 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleOpenChange(): Promise<void>;
     private handleOpen;
     private handleClose;
-    private initializeOriginalItems;
     show(): Promise<unknown>;
     hide(): Promise<unknown>;
     checkValidity(): boolean;

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

@@ -399,6 +399,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
         this.showSelected = !this.showSelected;
         if (this.showSelected) {
+            this.searchValue = "";
             const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
             this.data = this.originalOptionItems.filter((item) => {
                 const itemValue = this.getItemValue(item);
@@ -558,7 +559,9 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.updateValidity();
         if (this.selectedOptions.length === 0) {
             this.showSelected = false;
-            this.filterVirtualOptions('');
+            if (this.originalOptionItems?.length > 0 && !this.searchValue) {
+                this.data = [...this.originalOptionItems];
+            }
             this.repaintOptionsContainer();
         }
         this.calculateTotalWidthOfTags();
@@ -659,9 +662,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
             this.originalOptionItems = [...this.data];
         }
-        if (this.data.length > 0 && this.open && this.searchValue) {
-            this.originalOptionItems = [...this.originalOptionItems, ...this.data];
-        }
         this.selectionChanged();
         // Show no results message when data is empty and not loading
         if (!this.optionsLoading && !this.loading && this.data.length === 0) {
@@ -736,8 +736,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.data = [...this.originalOptionItems];
             this.wasShowSelectedCheckedOnClose = false;
         }
-        this.initializeOriginalItems();
-        this.filterVirtualOptions(this.searchValue);
+        this.filterVirtualOptions("");
         this.resetScrollPosition();
         this.emit('nile-after-show', { value: this.value, name: this.name });
     }
@@ -756,11 +755,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.portalManager.resetMeasuredHeight();
         this.emit('nile-after-hide', { value: this.value, name: this.name });
     }
-    initializeOriginalItems() {
-        if (this.data.length > 0) {
-            this.originalOptionItems = [...this.data];
-        }
-    }
     async show() {
         if (this.open || this.disabled) {
             this.open = false;