wally-ui 1.14.1 → 1.16.0

package/playground/showcase/src/app/components/combobox/combobox-item/combobox-item.spec.ts

@@ -0,0 +1,173 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
+
+import { ComboboxItem } from './combobox-item';
+import { ComboboxService } from '../lib/service/combobox.service';
+import { ComboboxInterface } from '../lib/models/combobox.model';
+
+describe('ComboboxItem', () => {
+  let component: ComboboxItem;
+  let fixture: ComponentFixture<ComboboxItem>;
+  let componentRef: ComponentRef<ComboboxItem>;
+  let service: ComboboxService;
+
+  const mockItem: ComboboxInterface = { value: 1, label: 'Apple', description: 'A red fruit' };
+  const mockData: ComboboxInterface[] = [
+    mockItem,
+    { value: 2, label: 'Banana' },
+    { value: 3, label: 'Orange' }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxItem],
+      providers: [ComboboxService]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxItem);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    service = TestBed.inject(ComboboxService);
+
+    componentRef.setInput('item', mockItem);
+    service.setData(mockData);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should inject ComboboxService', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Input: item', () => {
+    it('should be required', () => {
+      expect(component.item()).toEqual(mockItem);
+    });
+
+    it('should update when changed', () => {
+      const newItem: ComboboxInterface = { value: 4, label: 'Mango' };
+      componentRef.setInput('item', newItem);
+      fixture.detectChanges();
+
+      expect(component.item()).toEqual(newItem);
+    });
+  });
+
+  describe('Input: focused', () => {
+    it('should default to false', () => {
+      expect(component.focused()).toBe(false);
+    });
+
+    it('should accept true', () => {
+      componentRef.setInput('focused', true);
+      fixture.detectChanges();
+
+      expect(component.focused()).toBe(true);
+    });
+  });
+
+  describe('Input: selected', () => {
+    it('should default to false', () => {
+      expect(component.selected()).toBe(false);
+    });
+
+    it('should accept true', () => {
+      componentRef.setInput('selected', true);
+      fixture.detectChanges();
+
+      expect(component.selected()).toBe(true);
+    });
+  });
+
+  describe('Click Handling', () => {
+    it('should select item on click', () => {
+      const event = new MouseEvent('click');
+      spyOn(event, 'stopPropagation');
+
+      component.handleClick(event);
+
+      expect(service.selectedValues()).toContain(1);
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should not select disabled item', () => {
+      const disabledItem: ComboboxInterface = { value: 5, label: 'Disabled', disabled: true };
+      componentRef.setInput('item', disabledItem);
+      fixture.detectChanges();
+
+      const event = new MouseEvent('click');
+      component.handleClick(event);
+
+      expect(service.selectedValues()).not.toContain(5);
+    });
+
+    it('should stop event propagation', () => {
+      const event = new MouseEvent('click');
+      spyOn(event, 'stopPropagation');
+
+      component.handleClick(event);
+
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+  });
+
+  describe('Mouse Enter Handling', () => {
+    it('should focus item on mouse enter', () => {
+      component.onMouseEnter();
+
+      expect(service.focusedIndex()).toBe(0);
+    });
+
+    it('should not focus disabled item', () => {
+      const disabledItem: ComboboxInterface = { value: 5, label: 'Disabled', disabled: true };
+      componentRef.setInput('item', disabledItem);
+      fixture.detectChanges();
+
+      component.onMouseEnter();
+
+      expect(service.focusedIndex()).toBe(-1);
+    });
+
+    it('should find correct index in filtered data', () => {
+      service.setData([
+        { value: 1, label: 'Apple' },
+        { value: 2, label: 'Banana' },
+        { value: 3, label: 'Apricot' }
+      ]);
+
+      service.setSearchQuery('ban');
+      fixture.detectChanges();
+
+      const bananaItem: ComboboxInterface = { value: 2, label: 'Banana' };
+      componentRef.setInput('item', bananaItem);
+      fixture.detectChanges();
+
+      component.onMouseEnter();
+
+      expect(service.focusedIndex()).toBe(0); // First in filtered results
+    });
+
+    it('should not focus if item not found in filtered data', () => {
+      service.setSearchQuery('xyz'); // No matches
+
+      component.onMouseEnter();
+
+      expect(service.focusedIndex()).toBe(-1);
+    });
+  });
+
+  describe('HostListener', () => {
+    it('should handle mouseenter event via HostListener', () => {
+      spyOn(component, 'onMouseEnter');
+
+      const event = new MouseEvent('mouseenter');
+      fixture.nativeElement.dispatchEvent(event);
+
+      expect(component.onMouseEnter).toHaveBeenCalled();
+    });
+  });
+});

package/playground/showcase/src/app/components/combobox/combobox-item/combobox-item.ts

@@ -0,0 +1,37 @@
+import { Component, HostListener, inject, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ComboboxService } from '../lib/service/combobox.service';
+import { ComboboxInterface } from '../lib/models/combobox.model';
+
+@Component({
+  selector: 'wally-combobox-item',
+  imports: [CommonModule],
+  templateUrl: './combobox-item.html',
+  styleUrl: './combobox-item.css'
+})
+export class ComboboxItem {
+  comboboxService = inject(ComboboxService);
+
+  item = input.required<ComboboxInterface>();
+  focused = input<boolean>(false);
+  selected = input<boolean>(false);
+
+  handleClick(event: MouseEvent): void {
+    if (this.item().disabled) return;
+
+    event.stopPropagation();
+    this.comboboxService.selectItem(this.item().value);
+  }
+
+  @HostListener('mouseenter')
+  onMouseEnter(): void {
+    if (this.item().disabled) return;
+
+    const items = this.comboboxService.filteredData();
+    const index = items.findIndex(i => i.value === this.item().value);
+    if (index >= 0) {
+      this.comboboxService.focusedIndex.set(index);
+    }
+  }
+}

package/playground/showcase/src/app/components/combobox/combobox-search/combobox-search.html

@@ -0,0 +1,11 @@
+<div class="p-2 border-b border-neutral-200 dark:border-neutral-700">
+  <input
+    type="text"
+    class="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-[#0a0a0a] dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 transition-all duration-200"
+    [placeholder]="comboboxService.placeholder()"
+    [value]="comboboxService.searchQuery()"
+    (input)="onInput($event)"
+    (keydown)="onKeyDown($event)"
+    #searchInput
+  />
+</div>

package/playground/showcase/src/app/components/combobox/combobox-search/combobox-search.spec.ts

@@ -0,0 +1,166 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComboboxSearch } from './combobox-search';
+import { ComboboxService } from '../lib/service/combobox.service';
+
+describe('ComboboxSearch', () => {
+  let component: ComboboxSearch;
+  let fixture: ComponentFixture<ComboboxSearch>;
+  let service: ComboboxService;
+
+  const mockData = [
+    { value: 1, label: 'Apple' },
+    { value: 2, label: 'Banana' },
+    { value: 3, label: 'Orange' }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxSearch],
+      providers: [ComboboxService]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxSearch);
+    component = fixture.componentInstance;
+    service = TestBed.inject(ComboboxService);
+    service.setData(mockData);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should inject ComboboxService', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Input Handling', () => {
+    it('should update search query on input', () => {
+      const event = { target: { value: 'apple' } } as any;
+
+      component.onInput(event);
+
+      expect(service.searchQuery()).toBe('apple');
+    });
+
+    it('should handle empty input', () => {
+      service.setSearchQuery('test');
+
+      const event = { target: { value: '' } } as any;
+      component.onInput(event);
+
+      expect(service.searchQuery()).toBe('');
+    });
+
+    it('should update search query multiple times', () => {
+      const event1 = { target: { value: 'a' } } as any;
+      component.onInput(event1);
+      expect(service.searchQuery()).toBe('a');
+
+      const event2 = { target: { value: 'ap' } } as any;
+      component.onInput(event2);
+      expect(service.searchQuery()).toBe('ap');
+
+      const event3 = { target: { value: 'app' } } as any;
+      component.onInput(event3);
+      expect(service.searchQuery()).toBe('app');
+    });
+  });
+
+  describe('Keyboard Handling', () => {
+    describe('Arrow Down', () => {
+      it('should focus next item', () => {
+        service.focusFirst();
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+        spyOn(event, 'preventDefault');
+        component.onKeyDown(event);
+
+        expect(service.focusedIndex()).toBe(1);
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should prevent default behavior', () => {
+        const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+        spyOn(event, 'preventDefault');
+
+        component.onKeyDown(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+    });
+
+    describe('Arrow Up', () => {
+      it('should focus previous item', () => {
+        service.focusLast();
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+        spyOn(event, 'preventDefault');
+        component.onKeyDown(event);
+
+        expect(service.focusedIndex()).toBe(1);
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should prevent default behavior', () => {
+        const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+        spyOn(event, 'preventDefault');
+
+        component.onKeyDown(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+    });
+
+    describe('Enter', () => {
+      it('should select focused item', () => {
+        service.focusFirst();
+
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        spyOn(event, 'preventDefault');
+        component.onKeyDown(event);
+
+        expect(service.selectedValues()).toContain(1);
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should prevent default behavior', () => {
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        spyOn(event, 'preventDefault');
+
+        component.onKeyDown(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should not select if no item is focused', () => {
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        component.onKeyDown(event);
+
+        expect(service.selectedValues()).toEqual([]);
+      });
+    });
+
+    describe('Other Keys', () => {
+      it('should not prevent default for other keys', () => {
+        const event = new KeyboardEvent('keydown', { key: 'a' });
+        const preventDefaultSpy = spyOn(event, 'preventDefault');
+
+        component.onKeyDown(event);
+
+        expect(preventDefaultSpy).not.toHaveBeenCalled();
+      });
+
+      it('should not affect service for other keys', () => {
+        const initialIndex = service.focusedIndex();
+
+        const event = new KeyboardEvent('keydown', { key: 'Backspace' });
+        component.onKeyDown(event);
+
+        expect(service.focusedIndex()).toBe(initialIndex);
+      });
+    });
+  });
+});

package/playground/showcase/src/app/components/combobox/combobox-search/combobox-search.ts

@@ -0,0 +1,36 @@
+import { Component, inject } from '@angular/core';
+
+import { ComboboxService } from '../lib/service/combobox.service';
+
+@Component({
+  selector: 'wally-combobox-search',
+  imports: [],
+  templateUrl: './combobox-search.html',
+  styleUrl: './combobox-search.css'
+})
+export class ComboboxSearch {
+  comboboxService = inject(ComboboxService);
+
+  onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.comboboxService.setSearchQuery(input.value);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    // Prevent input from losing focus on arrow keys
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      event.preventDefault();
+
+      if (event.key === 'ArrowDown') {
+        this.comboboxService.focusNext();
+      } else {
+        this.comboboxService.focusPrevious();
+      }
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.comboboxService.selectFocusedItem();
+    }
+  }
+}

package/playground/showcase/src/app/components/combobox/combobox-trigger/combobox-trigger.html

@@ -0,0 +1,8 @@
+<div
+  class="w-full"
+  [attr.tabindex]="comboboxService.triggerMode() === 'custom' ? 0 : undefined"
+  [attr.role]="comboboxService.triggerMode() === 'custom' ? 'button' : undefined"
+  [attr.aria-expanded]="comboboxService.triggerMode() === 'custom' ? comboboxService.isOpen() : undefined"
+>
+  <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/combobox/combobox-trigger/combobox-trigger.spec.ts

@@ -0,0 +1,137 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComboboxTrigger } from './combobox-trigger';
+import { ComboboxService } from '../lib/service/combobox.service';
+
+describe('ComboboxTrigger', () => {
+  let component: ComboboxTrigger;
+  let fixture: ComponentFixture<ComboboxTrigger>;
+  let service: ComboboxService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxTrigger],
+      providers: [ComboboxService]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxTrigger);
+    component = fixture.componentInstance;
+    service = TestBed.inject(ComboboxService);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should inject ComboboxService', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Click Handling', () => {
+    it('should toggle combobox on click in custom mode', () => {
+      service.setTriggerMode('custom');
+      expect(service.isOpen()).toBe(false);
+
+      component.onClick();
+
+      expect(service.isOpen()).toBe(true);
+    });
+
+    it('should toggle from open to closed on click', () => {
+      service.setTriggerMode('custom');
+      service.open();
+
+      component.onClick();
+
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should not toggle in input mode', () => {
+      service.setTriggerMode('input');
+      expect(service.isOpen()).toBe(false);
+
+      component.onClick();
+
+      expect(service.isOpen()).toBe(false);
+    });
+  });
+
+  describe('Keyboard Handling', () => {
+    it('should toggle on Enter key in custom mode', () => {
+      service.setTriggerMode('custom');
+      expect(service.isOpen()).toBe(false);
+
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      spyOn(event, 'preventDefault');
+      component.onKeyDown(event);
+
+      expect(service.isOpen()).toBe(true);
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should toggle on Space key in custom mode', () => {
+      service.setTriggerMode('custom');
+      expect(service.isOpen()).toBe(false);
+
+      const event = new KeyboardEvent('keydown', { key: ' ' });
+      spyOn(event, 'preventDefault');
+      component.onKeyDown(event);
+
+      expect(service.isOpen()).toBe(true);
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not toggle on other keys in custom mode', () => {
+      service.setTriggerMode('custom');
+
+      const event = new KeyboardEvent('keydown', { key: 'a' });
+      component.onKeyDown(event);
+
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should not toggle on Enter in input mode', () => {
+      service.setTriggerMode('input');
+
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      const preventDefaultSpy = spyOn(event, 'preventDefault');
+      component.onKeyDown(event);
+
+      expect(service.isOpen()).toBe(false);
+      expect(preventDefaultSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not toggle on Space in input mode', () => {
+      service.setTriggerMode('input');
+
+      const event = new KeyboardEvent('keydown', { key: ' ' });
+      const preventDefaultSpy = spyOn(event, 'preventDefault');
+      component.onKeyDown(event);
+
+      expect(service.isOpen()).toBe(false);
+      expect(preventDefaultSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('HostListener', () => {
+    it('should handle click event via HostListener', () => {
+      spyOn(component, 'onClick');
+      service.setTriggerMode('custom');
+
+      fixture.nativeElement.click();
+
+      expect(component.onClick).toHaveBeenCalled();
+    });
+
+    it('should handle keydown event via HostListener', () => {
+      spyOn(component, 'onKeyDown');
+
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      fixture.nativeElement.dispatchEvent(event);
+
+      expect(component.onKeyDown).toHaveBeenCalledWith(event);
+    });
+  });
+});

package/playground/showcase/src/app/components/combobox/combobox-trigger/combobox-trigger.ts

@@ -0,0 +1,30 @@
+import { Component, HostListener, inject } from '@angular/core';
+
+import { ComboboxService } from '../lib/service/combobox.service';
+
+@Component({
+  selector: 'wally-combobox-trigger',
+  imports: [],
+  templateUrl: './combobox-trigger.html',
+  styleUrl: './combobox-trigger.css'
+})
+export class ComboboxTrigger {
+  comboboxService = inject(ComboboxService);
+
+  @HostListener('click')
+  onClick(): void {
+    if (this.comboboxService.triggerMode() === 'custom') {
+      this.comboboxService.toggle();
+    }
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.comboboxService.triggerMode() === 'custom') {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.comboboxService.toggle();
+      }
+    }
+  }
+}

package/playground/showcase/src/app/components/combobox/combobox.html

@@ -0,0 +1,3 @@
+<div class="relative">
+  <ng-content></ng-content>
+</div>