wally-ui 1.14.1 → 1.16.0

package/playground/showcase/src/app/components/combobox/lib/service/combobox.service.spec.ts

@@ -0,0 +1,530 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ComboboxService } from './combobox.service';
+import { ComboboxInterface } from '../models/combobox.model';
+
+describe('ComboboxService', () => {
+  let service: ComboboxService;
+
+  const mockData: ComboboxInterface[] = [
+    { value: 1, label: 'Apple', description: 'A red fruit' },
+    { value: 2, label: 'Banana', description: 'A yellow fruit' },
+    { value: 3, label: 'Orange', description: 'A citrus fruit' },
+    { value: 4, label: 'Grape', description: 'Purple berries' }
+  ];
+
+  const mockGroupedData: ComboboxInterface[] = [
+    { value: 1, label: 'JavaScript', group: 'Frontend' },
+    { value: 2, label: 'TypeScript', group: 'Frontend' },
+    { value: 3, label: 'Python', group: 'Backend' },
+    { value: 4, label: 'Java', group: 'Backend' }
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ComboboxService]
+    });
+    service = TestBed.inject(ComboboxService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Data Management', () => {
+    it('should initialize with empty data', () => {
+      expect(service.data()).toEqual([]);
+    });
+
+    it('should set data', () => {
+      service.setData(mockData);
+      expect(service.data()).toEqual(mockData);
+    });
+
+    it('should update data when setData is called multiple times', () => {
+      service.setData(mockData);
+      expect(service.data().length).toBe(4);
+
+      const newData = [{ value: 5, label: 'Mango' }];
+      service.setData(newData);
+      expect(service.data()).toEqual(newData);
+      expect(service.data().length).toBe(1);
+    });
+  });
+
+  describe('UI State', () => {
+    it('should initialize with closed state', () => {
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should open combobox', () => {
+      service.open();
+      expect(service.isOpen()).toBe(true);
+    });
+
+    it('should close combobox', () => {
+      service.open();
+      service.close();
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should toggle combobox state', () => {
+      expect(service.isOpen()).toBe(false);
+      service.toggle();
+      expect(service.isOpen()).toBe(true);
+      service.toggle();
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should reset focusedIndex when opening', () => {
+      service.setData(mockData);
+      service.focusFirst();
+      expect(service.focusedIndex()).toBe(0);
+
+      service.open();
+      expect(service.focusedIndex()).toBe(-1);
+    });
+
+    it('should clear search query when closing', () => {
+      service.setSearchQuery('apple');
+      expect(service.searchQuery()).toBe('apple');
+
+      service.close();
+      expect(service.searchQuery()).toBe('');
+    });
+
+    it('should have default placeholder', () => {
+      expect(service.placeholder()).toBe('Search...');
+    });
+
+    it('should update placeholder', () => {
+      service.placeholder.set('Select an item...');
+      expect(service.placeholder()).toBe('Select an item...');
+    });
+
+    it('should initialize as not disabled', () => {
+      expect(service.disabled()).toBe(false);
+    });
+
+    it('should update disabled state', () => {
+      service.disabled.set(true);
+      expect(service.disabled()).toBe(true);
+    });
+
+    it('should have closeOnSelect enabled by default', () => {
+      expect(service.closeOnSelect()).toBe(true);
+    });
+  });
+
+  describe('Trigger Mode', () => {
+    it('should initialize with input trigger mode', () => {
+      expect(service.triggerMode()).toBe('input');
+    });
+
+    it('should set trigger mode to custom', () => {
+      service.setTriggerMode('custom');
+      expect(service.triggerMode()).toBe('custom');
+    });
+
+    it('should set trigger mode to input', () => {
+      service.setTriggerMode('custom');
+      service.setTriggerMode('input');
+      expect(service.triggerMode()).toBe('input');
+    });
+  });
+
+  describe('Search & Filter', () => {
+    beforeEach(() => {
+      service.setData(mockData);
+    });
+
+    it('should return all data when search query is empty', () => {
+      expect(service.filteredData()).toEqual(mockData);
+    });
+
+    it('should filter by label', () => {
+      service.setSearchQuery('apple');
+      const filtered = service.filteredData();
+      expect(filtered.length).toBe(1);
+      expect(filtered[0].label).toBe('Apple');
+    });
+
+    it('should filter case-insensitively', () => {
+      service.setSearchQuery('BANANA');
+      const filtered = service.filteredData();
+      expect(filtered.length).toBe(1);
+      expect(filtered[0].label).toBe('Banana');
+    });
+
+    it('should filter by description', () => {
+      service.setSearchQuery('citrus');
+      const filtered = service.filteredData();
+      expect(filtered.length).toBe(1);
+      expect(filtered[0].label).toBe('Orange');
+    });
+
+    it('should filter by value', () => {
+      service.setSearchQuery('2');
+      const filtered = service.filteredData();
+      expect(filtered.length).toBe(1);
+      expect(filtered[0].value).toBe(2);
+    });
+
+    it('should return empty array when no matches', () => {
+      service.setSearchQuery('xyz');
+      expect(service.filteredData()).toEqual([]);
+    });
+
+    it('should trim search query', () => {
+      service.setSearchQuery('  apple  ');
+      expect(service.filteredData().length).toBe(1);
+    });
+
+    it('should reset focusedIndex when search query changes', () => {
+      service.focusFirst();
+      expect(service.focusedIndex()).toBe(0);
+
+      service.setSearchQuery('test');
+      expect(service.focusedIndex()).toBe(-1);
+    });
+  });
+
+  describe('Multi-Select', () => {
+    beforeEach(() => {
+      service.setData(mockData);
+    });
+
+    it('should initialize as single-select', () => {
+      expect(service.multiSelect()).toBe(false);
+    });
+
+    it('should enable multi-select', () => {
+      service.setMultiSelect(true);
+      expect(service.multiSelect()).toBe(true);
+    });
+
+    it('should select multiple items in multi-select mode', () => {
+      service.setMultiSelect(true);
+      service.selectItem(1);
+      service.selectItem(2);
+
+      expect(service.selectedValues()).toEqual([1, 2]);
+      expect(service.selectedItems().length).toBe(2);
+    });
+
+    it('should toggle selection in multi-select mode', () => {
+      service.setMultiSelect(true);
+      service.selectItem(1);
+      expect(service.selectedValues()).toContain(1);
+
+      service.selectItem(1); // Deselect
+      expect(service.selectedValues()).not.toContain(1);
+    });
+
+    it('should keep only first item when switching from multi to single select', () => {
+      service.setMultiSelect(true);
+      service.selectItem(1);
+      service.selectItem(2);
+      service.selectItem(3);
+
+      service.setMultiSelect(false);
+      expect(service.selectedValues()).toEqual([1]);
+    });
+
+    it('should replace selection in single-select mode', () => {
+      service.selectItem(1);
+      expect(service.selectedValues()).toEqual([1]);
+
+      service.selectItem(2);
+      expect(service.selectedValues()).toEqual([2]);
+    });
+
+    it('should close after selection in single-select mode when closeOnSelect is true', () => {
+      service.open();
+      service.closeOnSelect.set(true);
+      service.selectItem(1);
+
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should not close after selection when closeOnSelect is false', () => {
+      service.open();
+      service.closeOnSelect.set(false);
+      service.selectItem(1);
+
+      expect(service.isOpen()).toBe(true);
+    });
+
+    it('should not close in multi-select mode', () => {
+      service.setMultiSelect(true);
+      service.open();
+      service.selectItem(1);
+
+      expect(service.isOpen()).toBe(true);
+    });
+
+    it('should deselect item', () => {
+      service.selectItem(1);
+      service.deselectItem(1);
+
+      expect(service.selectedValues()).toEqual([]);
+    });
+
+    it('should clear all selections', () => {
+      service.setMultiSelect(true);
+      service.selectItem(1);
+      service.selectItem(2);
+
+      service.clearSelection();
+      expect(service.selectedValues()).toEqual([]);
+    });
+
+    it('should check if item is selected', () => {
+      service.selectItem(1);
+
+      expect(service.isSelected(1)).toBe(true);
+      expect(service.isSelected(2)).toBe(false);
+    });
+
+    it('should return selected items as full objects', () => {
+      service.selectItem(1);
+      service.selectItem(3);
+
+      const selected = service.selectedItems();
+      expect(selected.length).toBe(1); // Single select mode
+      expect(selected[0]).toEqual(mockData[0]);
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    beforeEach(() => {
+      service.setData(mockData);
+    });
+
+    it('should initialize with no focused index', () => {
+      expect(service.focusedIndex()).toBe(-1);
+      expect(service.focusedItem()).toBe(null);
+    });
+
+    it('should focus first item', () => {
+      service.focusFirst();
+      expect(service.focusedIndex()).toBe(0);
+      expect(service.focusedItem()).toEqual(mockData[0]);
+    });
+
+    it('should focus last item', () => {
+      service.focusLast();
+      expect(service.focusedIndex()).toBe(3);
+      expect(service.focusedItem()).toEqual(mockData[3]);
+    });
+
+    it('should focus next item', () => {
+      service.focusFirst();
+      service.focusNext();
+      expect(service.focusedIndex()).toBe(1);
+      expect(service.focusedItem()).toEqual(mockData[1]);
+    });
+
+    it('should not go beyond last item when focusing next', () => {
+      service.focusLast();
+      service.focusNext();
+      expect(service.focusedIndex()).toBe(3); // Stays at last
+    });
+
+    it('should focus previous item', () => {
+      service.focusLast();
+      service.focusPrevious();
+      expect(service.focusedIndex()).toBe(2);
+    });
+
+    it('should not go below first item when focusing previous', () => {
+      service.focusFirst();
+      service.focusPrevious();
+      expect(service.focusedIndex()).toBe(0); // Stays at first
+    });
+
+    it('should handle empty filtered data', () => {
+      service.setSearchQuery('nonexistent');
+      service.focusFirst();
+      expect(service.focusedIndex()).toBe(-1);
+    });
+
+    it('should select focused item', () => {
+      service.focusFirst();
+      service.selectFocusedItem();
+
+      expect(service.selectedValues()).toContain(1);
+    });
+
+    it('should not select when no item is focused', () => {
+      service.selectFocusedItem();
+      expect(service.selectedValues()).toEqual([]);
+    });
+
+    it('should update focusedItem when filtered data changes', () => {
+      service.focusFirst();
+      expect(service.focusedItem()?.label).toBe('Apple');
+
+      service.setSearchQuery('banana');
+      service.focusFirst();
+      expect(service.focusedItem()?.label).toBe('Banana');
+    });
+  });
+
+  describe('Virtual Scrolling', () => {
+    it('should initialize with virtual scroll disabled', () => {
+      expect(service.virtualScrollEnabled()).toBe(false);
+    });
+
+    it('should have default item height', () => {
+      expect(service.itemHeight()).toBe(48);
+    });
+
+    it('should have default visible items count', () => {
+      expect(service.visibleItemsCount()).toBe(8);
+    });
+
+    it('should enable virtual scroll', () => {
+      service.setVirtualScroll(true);
+      expect(service.virtualScrollEnabled()).toBe(true);
+    });
+
+    it('should set custom item height', () => {
+      service.setVirtualScroll(true, 60);
+      expect(service.itemHeight()).toBe(60);
+    });
+
+    it('should enable virtual scroll without changing item height', () => {
+      service.setVirtualScroll(true);
+      expect(service.itemHeight()).toBe(48); // Default
+    });
+  });
+
+  describe('Grouping', () => {
+    beforeEach(() => {
+      service.setData(mockGroupedData);
+    });
+
+    it('should initialize without grouping', () => {
+      expect(service.groupBy()).toBe(null);
+      expect(service.groupedData()).toBe(null);
+    });
+
+    it('should group data by property', () => {
+      service.setGroupBy('group');
+      const grouped = service.groupedData();
+
+      expect(grouped).not.toBe(null);
+      expect(grouped?.length).toBe(2);
+    });
+
+    it('should create correct groups', () => {
+      service.setGroupBy('group');
+      const grouped = service.groupedData();
+
+      const frontendGroup = grouped?.find(g => g.label === 'Frontend');
+      const backendGroup = grouped?.find(g => g.label === 'Backend');
+
+      expect(frontendGroup?.items.length).toBe(2);
+      expect(backendGroup?.items.length).toBe(2);
+    });
+
+    it('should place items without group property in Other', () => {
+      const mixedData = [
+        ...mockGroupedData,
+        { value: 5, label: 'NoGroup' }
+      ];
+      service.setData(mixedData);
+      service.setGroupBy('group');
+
+      const grouped = service.groupedData();
+      const otherGroup = grouped?.find(g => g.label === 'Other');
+
+      expect(otherGroup).toBeDefined();
+      expect(otherGroup?.items.length).toBe(1);
+    });
+
+    it('should update grouped data when filtered', () => {
+      service.setGroupBy('group');
+      service.setSearchQuery('java'); // Matches JavaScript and Java
+
+      const grouped = service.groupedData();
+      const frontendGroup = grouped?.find(g => g.label === 'Frontend');
+      const backendGroup = grouped?.find(g => g.label === 'Backend');
+
+      expect(frontendGroup?.items.length).toBe(1); // JavaScript
+      expect(backendGroup?.items.length).toBe(1); // Java
+    });
+
+    it('should return null when groupBy is cleared', () => {
+      service.setGroupBy('group');
+      expect(service.groupedData()).not.toBe(null);
+
+      service.setGroupBy(null);
+      expect(service.groupedData()).toBe(null);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    beforeEach(() => {
+      service.setData(mockData);
+    });
+
+    it('should handle complete selection workflow', () => {
+      // Open combobox
+      service.open();
+      expect(service.isOpen()).toBe(true);
+
+      // Search for item
+      service.setSearchQuery('banana');
+      expect(service.filteredData().length).toBe(1);
+
+      // Navigate and select
+      service.focusFirst();
+      service.selectFocusedItem();
+
+      expect(service.selectedValues()).toContain(2);
+      expect(service.isOpen()).toBe(false); // Auto-closed
+    });
+
+    it('should handle multi-select workflow', () => {
+      service.setMultiSelect(true);
+      service.open();
+
+      service.selectItem(1);
+      service.selectItem(2);
+      service.selectItem(3);
+
+      expect(service.selectedValues().length).toBe(3);
+      expect(service.isOpen()).toBe(true); // Stays open
+    });
+
+    it('should maintain selection when filtering', () => {
+      service.selectItem(1);
+      service.setSearchQuery('banana');
+
+      expect(service.selectedValues()).toContain(1);
+      expect(service.selectedItems()[0].label).toBe('Apple');
+    });
+
+    it('should handle deselection workflow', () => {
+      service.selectItem(1);
+      expect(service.isSelected(1)).toBe(true);
+
+      service.deselectItem(1);
+      expect(service.isSelected(1)).toBe(false);
+    });
+
+    it('should clear all state when closing', () => {
+      service.setSearchQuery('test');
+      service.focusFirst();
+      service.open();
+
+      service.close();
+
+      expect(service.isOpen()).toBe(false);
+      expect(service.searchQuery()).toBe('');
+      expect(service.focusedIndex()).toBe(-1);
+    });
+  });
+});

package/playground/showcase/src/app/components/combobox/lib/service/combobox.service.ts

@@ -0,0 +1,191 @@
+import { Injectable, signal, computed } from '@angular/core';
+
+import { ComboboxInterface } from '../models/combobox.model';
+
+@Injectable()
+export class ComboboxService {
+  // ========== DATA ==========
+  private _data = signal<ComboboxInterface[]>([]);
+  data = this._data.asReadonly();
+
+  // ========== UI STATE ==========
+  isOpen = signal<boolean>(false);
+  position = signal<string | null>(null);
+  placeholder = signal<string>('Search...');
+  disabled = signal<boolean>(false);
+  closeOnSelect = signal<boolean>(true);
+
+  // ========== TRIGGER MODE ==========
+  triggerMode = signal<'input' | 'custom'>('input');
+
+  // ========== SEARCH & FILTER ==========
+  searchQuery = signal<string>('');
+  filteredData = computed(() => {
+    const query = this.searchQuery().toLowerCase().trim();
+    if (!query) return this._data();
+
+    return this._data().filter(item =>
+      item.label.toLowerCase().includes(query) ||
+      (item.description && item.description.toLowerCase().includes(query)) ||
+      item.value.toString().toLowerCase().includes(query)
+    );
+  });
+
+  // ========== MULTI-SELECT ==========
+  multiSelect = signal<boolean>(false);
+  selectedValues = signal<(string | number)[]>([]);
+  selectedItems = computed(() =>
+    this._data().filter(item => this.selectedValues().includes(item.value))
+  );
+
+  // ========== KEYBOARD NAVIGATION ==========
+  focusedIndex = signal<number>(-1);
+  focusedItem = computed(() => {
+    const filtered = this.filteredData();
+    const idx = this.focusedIndex();
+    return idx >= 0 && idx < filtered.length ? filtered[idx] : null;
+  });
+
+  // ========== VIRTUAL SCROLLING ==========
+  virtualScrollEnabled = signal<boolean>(false);
+  itemHeight = signal<number>(48);
+  visibleItemsCount = signal<number>(8);
+
+  // ========== GROUPING ==========
+  groupBy = signal<string | null>(null);
+  groupedData = computed(() => {
+    const key = this.groupBy();
+    if (!key) return null;
+
+    const groups = new Map<string, ComboboxInterface[]>();
+    this.filteredData().forEach(item => {
+      const groupKey = (item as any)[key] || 'Other';
+      if (!groups.has(groupKey)) {
+        groups.set(groupKey, []);
+      }
+      groups.get(groupKey)!.push(item);
+    });
+
+    return Array.from(groups.entries()).map(([label, items]) => ({
+      label,
+      items
+    }));
+  });
+
+  // ========== DATA METHODS ==========
+  setData(data: ComboboxInterface[]): void {
+    this._data.set(data);
+  }
+
+  // ========== OPEN/CLOSE METHODS ==========
+  open(): void {
+    this.isOpen.set(true);
+    this.focusedIndex.set(-1);
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    this.searchQuery.set('');
+    this.focusedIndex.set(-1);
+  }
+
+  toggle(): void {
+    this.isOpen() ? this.close() : this.open();
+  }
+
+  // ========== SEARCH METHODS ==========
+  setSearchQuery(query: string): void {
+    this.searchQuery.set(query);
+    this.focusedIndex.set(-1);
+  }
+
+  // ========== SELECTION METHODS ==========
+  selectItem(value: string | number): void {
+    if (this.multiSelect()) {
+      const current = this.selectedValues();
+      if (current.includes(value)) {
+        this.selectedValues.set(current.filter(v => v !== value));
+      } else {
+        this.selectedValues.set([...current, value]);
+      }
+    } else {
+      this.selectedValues.set([value]);
+      if (this.closeOnSelect()) {
+        this.close();
+      }
+    }
+  }
+
+  deselectItem(value: string | number): void {
+    this.selectedValues.update(current =>
+      current.filter(v => v !== value)
+    );
+  }
+
+  clearSelection(): void {
+    this.selectedValues.set([]);
+  }
+
+  isSelected(value: string | number): boolean {
+    return this.selectedValues().includes(value);
+  }
+
+  // ========== KEYBOARD NAVIGATION METHODS ==========
+  focusNext(): void {
+    const maxIndex = this.filteredData().length - 1;
+    if (maxIndex < 0) return;
+
+    this.focusedIndex.update(index =>
+      index < maxIndex ? index + 1 : index
+    );
+  }
+
+  focusPrevious(): void {
+    this.focusedIndex.update(index =>
+      index > 0 ? index - 1 : index
+    );
+  }
+
+  focusFirst(): void {
+    if (this.filteredData().length > 0) {
+      this.focusedIndex.set(0);
+    }
+  }
+
+  focusLast(): void {
+    const maxIndex = this.filteredData().length - 1;
+    if (maxIndex >= 0) {
+      this.focusedIndex.set(maxIndex);
+    }
+  }
+
+  selectFocusedItem(): void {
+    const focused = this.focusedItem();
+    if (focused) {
+      this.selectItem(focused.value);
+    }
+  }
+
+  // ========== CONFIGURATION METHODS ==========
+  setTriggerMode(mode: 'input' | 'custom'): void {
+    this.triggerMode.set(mode);
+  }
+
+  setMultiSelect(enabled: boolean): void {
+    this.multiSelect.set(enabled);
+    if (!enabled && this.selectedValues().length > 1) {
+      this.selectedValues.set([this.selectedValues()[0]]);
+    }
+  }
+
+  setVirtualScroll(enabled: boolean, itemHeight?: number): void {
+    this.virtualScrollEnabled.set(enabled);
+    if (itemHeight) {
+      this.itemHeight.set(itemHeight);
+    }
+  }
+
+  setGroupBy(property: string | null): void {
+    this.groupBy.set(property);
+  }
+}