wally-ui 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/src/app/app.routes.server.ts

@@ -41,6 +41,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/audio-waveform',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/combobox',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'documentation/chat-sdk',
     renderMode: RenderMode.Prerender,

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

@@ -0,0 +1,41 @@
+@if (comboboxService.isOpen()) {
+  <div
+    [class]="'absolute bg-white dark:bg-[#1b1b1b] dark:border-neutral-700 rounded-xl shadow-2xl border border-neutral-300 w-full z-50 transition-all duration-200 ease-out ' + positionClasses()"
+    id="combobox-listbox"
+    role="listbox"
+    [attr.aria-multiselectable]="comboboxService.multiSelect()"
+  >
+    <!-- Search (só no custom trigger mode) -->
+    @if (comboboxService.triggerMode() === 'custom') {
+      <wally-combobox-search></wally-combobox-search>
+    }
+
+    <div class="p-1">
+      @if (comboboxService.filteredData().length === 0) {
+        <wally-combobox-empty></wally-combobox-empty>
+      } @else if (comboboxService.groupedData(); as groups) {
+        <!-- Itens agrupados -->
+        @for (group of groups; track group.label; let groupIdx = $index) {
+          <wally-combobox-group [label]="group.label">
+            @for (item of group.items; track item.value; let itemIdx = $index) {
+              <wally-combobox-item
+                [item]="item"
+                [focused]="comboboxService.focusedIndex() === getGlobalIndex(groupIdx, itemIdx)"
+                [selected]="comboboxService.isSelected(item.value)"
+              ></wally-combobox-item>
+            }
+          </wally-combobox-group>
+        }
+      } @else {
+        <!-- Itens normais -->
+        @for (item of comboboxService.filteredData(); track item.value; let idx = $index) {
+          <wally-combobox-item
+            [item]="item"
+            [focused]="comboboxService.focusedIndex() === idx"
+            [selected]="comboboxService.isSelected(item.value)"
+          ></wally-combobox-item>
+        }
+      }
+    </div>
+  </div>
+}

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

@@ -0,0 +1,228 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
+
+import { ComboboxContent } from './combobox-content';
+import { ComboboxService } from '../lib/service/combobox.service';
+import { ComboboxPosition } from '../lib/types/combobox-position.type';
+
+describe('ComboboxContent', () => {
+  let component: ComboboxContent;
+  let fixture: ComponentFixture<ComboboxContent>;
+  let componentRef: ComponentRef<ComboboxContent>;
+  let service: ComboboxService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxContent],
+      providers: [ComboboxService]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxContent);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    service = TestBed.inject(ComboboxService);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should inject ComboboxService', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Input: position', () => {
+    it('should default to bottom position', () => {
+      expect(component.position()).toBe('bottom');
+    });
+
+    it('should accept top position', () => {
+      componentRef.setInput('position', 'top');
+      fixture.detectChanges();
+
+      expect(component.position()).toBe('top');
+    });
+
+    it('should accept all valid positions', () => {
+      const positions: ComboboxPosition[] = ['top', 'bottom', 'left', 'right'];
+
+      positions.forEach(pos => {
+        componentRef.setInput('position', pos);
+        fixture.detectChanges();
+        expect(component.position()).toBe(pos);
+      });
+    });
+  });
+
+  describe('Position Calculation', () => {
+    it('should initialize with bottom calculated position', () => {
+      expect(component.calculatedPosition()).toBe('bottom');
+    });
+
+    it('should generate correct position classes for bottom', () => {
+      component.calculatedPosition.set('bottom');
+      const classes = component.positionClasses();
+
+      expect(classes).toContain('top-full');
+      expect(classes).toContain('mt-2');
+      expect(classes).toContain('left-0');
+    });
+
+    it('should generate correct position classes for top', () => {
+      component.calculatedPosition.set('top');
+      const classes = component.positionClasses();
+
+      expect(classes).toContain('bottom-full');
+      expect(classes).toContain('mb-2');
+      expect(classes).toContain('left-0');
+    });
+
+    it('should generate correct position classes for right', () => {
+      component.calculatedPosition.set('right');
+      const classes = component.positionClasses();
+
+      expect(classes).toContain('left-full');
+      expect(classes).toContain('ml-2');
+      expect(classes).toContain('top-0');
+    });
+
+    it('should generate correct position classes for left', () => {
+      component.calculatedPosition.set('left');
+      const classes = component.positionClasses();
+
+      expect(classes).toContain('right-full');
+      expect(classes).toContain('mr-2');
+      expect(classes).toContain('top-0');
+    });
+
+    it('should include scroll classes', () => {
+      const classes = component.positionClasses();
+
+      expect(classes).toContain('max-h-96');
+      expect(classes).toContain('overflow-y-auto');
+    });
+  });
+
+  describe('Global Index Calculation', () => {
+    it('should return item index when no grouping', () => {
+      const index = component.getGlobalIndex(0, 5);
+      expect(index).toBe(5);
+    });
+
+    it('should calculate global index for grouped items', () => {
+      service.setData([
+        { value: 1, label: 'JS', group: 'Frontend' },
+        { value: 2, label: 'TS', group: 'Frontend' },
+        { value: 3, label: 'Python', group: 'Backend' },
+        { value: 4, label: 'Java', group: 'Backend' }
+      ]);
+      service.setGroupBy('group');
+
+      // First item in second group (Backend)
+      const index = component.getGlobalIndex(1, 0);
+      expect(index).toBe(2); // After 2 Frontend items
+    });
+
+    it('should handle multiple groups correctly', () => {
+      service.setData([
+        { value: 1, label: 'Item1', group: 'A' },
+        { value: 2, label: 'Item2', group: 'A' },
+        { value: 3, label: 'Item3', group: 'B' },
+        { value: 4, label: 'Item4', group: 'C' },
+        { value: 5, label: 'Item5', group: 'C' }
+      ]);
+      service.setGroupBy('group');
+
+      expect(component.getGlobalIndex(0, 0)).toBe(0); // First item in Group A
+      expect(component.getGlobalIndex(1, 0)).toBe(2); // First item in Group B
+      expect(component.getGlobalIndex(2, 1)).toBe(4); // Second item in Group C
+    });
+  });
+
+  describe('Window Resize', () => {
+    it('should recalculate position on resize when open', () => {
+      spyOn<any>(component, 'calculateBestPosition').and.returnValue('top');
+      service.open();
+
+      component.onResize();
+
+      expect(component['calculateBestPosition']).toHaveBeenCalled();
+      expect(component.calculatedPosition()).toBe('top');
+    });
+
+    it('should not recalculate position on resize when closed', () => {
+      spyOn<any>(component, 'calculateBestPosition');
+
+      component.onResize();
+
+      expect(component['calculateBestPosition']).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Escape Key', () => {
+    it('should close combobox on escape when open', () => {
+      service.open();
+      expect(service.isOpen()).toBe(true);
+
+      component.onEscape();
+
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should not error on escape when closed', () => {
+      expect(service.isOpen()).toBe(false);
+
+      expect(() => component.onEscape()).not.toThrow();
+    });
+  });
+
+  describe('Click Outside', () => {
+    it('should close when clicking outside', () => {
+      service.open();
+
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: document.body, enumerable: true });
+
+      component.onDocumentClick(event);
+
+      expect(service.isOpen()).toBe(false);
+    });
+
+    it('should not close when clicking inside content', () => {
+      service.open();
+
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: fixture.nativeElement, enumerable: true });
+
+      component.onDocumentClick(event);
+
+      expect(service.isOpen()).toBe(true);
+    });
+
+    it('should not process click when combobox is closed', () => {
+      const closeSpy = spyOn(service, 'close');
+
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: document.body, enumerable: true });
+
+      component.onDocumentClick(event);
+
+      expect(closeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Position Recalculation on Open', () => {
+    it('should recalculate position when opening', (done) => {
+      spyOn<any>(component, 'calculateBestPosition').and.returnValue('top');
+
+      service.open();
+
+      setTimeout(() => {
+        expect(component['calculateBestPosition']).toHaveBeenCalled();
+        done();
+      }, 10);
+    });
+  });
+});

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

@@ -0,0 +1,217 @@
+import { Component, computed, effect, ElementRef, HostListener, inject, input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ComboboxService } from '../lib/service/combobox.service';
+import { ComboboxPosition } from '../lib/types/combobox-position.type';
+import { ComboboxItem } from '../combobox-item/combobox-item';
+import { ComboboxEmpty } from '../combobox-empty/combobox-empty';
+import { ComboboxGroup } from '../combobox-group/combobox-group';
+import { ComboboxSearch } from '../combobox-search/combobox-search';
+
+@Component({
+  selector: 'wally-combobox-content',
+  imports: [
+    CommonModule,
+    ComboboxItem,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxSearch
+  ],
+  templateUrl: './combobox-content.html',
+  styleUrl: './combobox-content.css'
+})
+export class ComboboxContent {
+  comboboxService = inject(ComboboxService);
+  private elementRef = inject(ElementRef);
+
+  position = input<ComboboxPosition>('bottom');
+
+  calculatedPosition = signal<ComboboxPosition>('bottom');
+
+  positionClasses = computed(() => {
+    const position = this.calculatedPosition();
+    const scrollClasses = 'max-h-96 overflow-y-auto';
+
+    const positionMap = {
+      bottom: 'top-full mt-2 left-0',
+      top: 'bottom-full mb-2 left-0',
+      right: 'left-full ml-2 top-0',
+      left: 'right-full mr-2 top-0'
+    };
+
+    return `${scrollClasses} ${positionMap[position]}`;
+  });
+
+  constructor() {
+    // Recalcular ao abrir
+    effect(() => {
+      if (this.comboboxService.isOpen()) {
+        setTimeout(() => {
+          const bestPosition = this.calculateBestPosition();
+          this.calculatedPosition.set(bestPosition);
+        }, 0);
+      }
+    });
+  }
+
+  /**
+   * Recalculates position on window resize to maintain optimal placement
+   */
+  @HostListener('window:resize')
+  onResize(): void {
+    if (this.comboboxService.isOpen()) {
+      const bestPosition = this.calculateBestPosition();
+      this.calculatedPosition.set(bestPosition);
+    }
+  }
+
+  /**
+   * Close on Escape key
+   */
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    if (this.comboboxService.isOpen()) {
+      this.comboboxService.close();
+    }
+  }
+
+  /**
+   * Close when clicking outside
+   */
+  @HostListener('document:mousedown', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.comboboxService.isOpen()) return;
+
+    const contentElement = this.elementRef.nativeElement;
+    const triggerElement = contentElement.parentElement;
+
+    const clickedInside = contentElement.contains(event.target as Node);
+    const clickedTrigger = triggerElement?.contains(event.target as Node);
+
+    if (!clickedInside && !clickedTrigger) {
+      this.comboboxService.close();
+    }
+  }
+
+  /**
+   * Measures available space around the trigger element in all directions.
+   * Pattern from dropdown-menu-content.ts
+   */
+  private measureAvailableSpace(): {
+    triggerRect: DOMRect;
+    spaceAbove: number;
+    spaceBelow: number;
+    spaceLeft: number;
+    spaceRight: number;
+  } | null {
+    const triggerElement = this.elementRef.nativeElement.parentElement;
+
+    if (!triggerElement) return null;
+
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    return {
+      triggerRect,
+      spaceAbove: triggerRect.top,
+      spaceBelow: viewportHeight - triggerRect.bottom,
+      spaceLeft: triggerRect.left,
+      spaceRight: viewportWidth - triggerRect.right
+    };
+  }
+
+  /**
+   * Calculates the best position for the combobox based on available viewport space.
+   * Falls back to alternative positions if preferred position doesn't fit.
+   * If no position has enough space, chooses the direction with the most available space.
+   */
+  private calculateBestPosition(): ComboboxPosition {
+    const space = this.measureAvailableSpace();
+
+    if (!space) return this.position();
+
+    const menuDimensions = this.getMenuDimensions();
+    const MENU_MIN_HEIGHT = menuDimensions.height + 20;
+    const MENU_MIN_WIDTH = menuDimensions.width + 20;
+
+    const preferred = this.position();
+
+    // Try preferred position first, then fallbacks
+    switch (preferred) {
+      case 'bottom':
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        break;
+
+      case 'top':
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        break;
+
+      case 'right':
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        break;
+
+      case 'left':
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        break;
+    }
+
+    // If no position has enough space, choose the one with the most space
+    const maxVerticalSpace = Math.max(space.spaceAbove, space.spaceBelow);
+    const maxHorizontalSpace = Math.max(space.spaceLeft, space.spaceRight);
+
+    // Prefer vertical positions (bottom/top) over horizontal
+    if (maxVerticalSpace >= maxHorizontalSpace) {
+      return space.spaceBelow >= space.spaceAbove ? 'bottom' : 'top';
+    } else {
+      return space.spaceRight >= space.spaceLeft ? 'right' : 'left';
+    }
+  }
+
+  /**
+   * Gets actual rendered dimensions of the dropdown menu
+   */
+  private getMenuDimensions(): { height: number; width: number } {
+    const menuElement = this.elementRef.nativeElement.querySelector('[role="listbox"]');
+
+    if (!menuElement) {
+      return {
+        height: 384, // max-h-96 = 384px
+        width: 288   // min-w-72 = 288px
+      };
+    }
+
+    const rect = menuElement.getBoundingClientRect();
+
+    return {
+      height: rect.height || 384,
+      width: rect.width || 288
+    };
+  }
+
+  /**
+   * Calculates global index for grouped items
+   */
+  getGlobalIndex(groupIndex: number, itemIndex: number): number {
+    const groups = this.comboboxService.groupedData();
+    if (!groups) return itemIndex;
+
+    let globalIndex = 0;
+    for (let i = 0; i < groupIndex; i++) {
+      globalIndex += groups[i].items.length;
+    }
+    return globalIndex + itemIndex;
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="py-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
+  {{ message() }}
+</div>

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

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
+
+import { ComboboxEmpty } from './combobox-empty';
+
+describe('ComboboxEmpty', () => {
+  let component: ComboboxEmpty;
+  let fixture: ComponentFixture<ComboboxEmpty>;
+  let componentRef: ComponentRef<ComboboxEmpty>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxEmpty]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxEmpty);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Input: message', () => {
+    it('should have default message', () => {
+      expect(component.message()).toBe('No results found');
+    });
+
+    it('should accept custom message', () => {
+      componentRef.setInput('message', 'No items to display');
+      fixture.detectChanges();
+
+      expect(component.message()).toBe('No items to display');
+    });
+
+    it('should update when changed', () => {
+      componentRef.setInput('message', 'Empty list');
+      fixture.detectChanges();
+      expect(component.message()).toBe('Empty list');
+
+      componentRef.setInput('message', 'Nothing here');
+      fixture.detectChanges();
+      expect(component.message()).toBe('Nothing here');
+    });
+
+    it('should accept empty string', () => {
+      componentRef.setInput('message', '');
+      fixture.detectChanges();
+
+      expect(component.message()).toBe('');
+    });
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'wally-combobox-empty',
+  imports: [],
+  templateUrl: './combobox-empty.html',
+  styleUrl: './combobox-empty.css'
+})
+export class ComboboxEmpty {
+  message = input<string>('No results found');
+}

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

@@ -0,0 +1,11 @@
+<div class="pt-2 first:pt-0">
+  <!-- Group header -->
+  <div class="px-3 py-2 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+    {{ label() }}
+  </div>
+
+  <!-- Group items -->
+  <div class="space-y-0.5">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
+
+import { ComboboxGroup } from './combobox-group';
+
+describe('ComboboxGroup', () => {
+  let component: ComboboxGroup;
+  let fixture: ComponentFixture<ComboboxGroup>;
+  let componentRef: ComponentRef<ComboboxGroup>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComboboxGroup]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComboboxGroup);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+  });
+
+  it('should create', () => {
+    componentRef.setInput('label', 'Test Group');
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+  });
+
+  describe('Input: label', () => {
+    it('should be required', () => {
+      componentRef.setInput('label', 'Frontend');
+      fixture.detectChanges();
+
+      expect(component.label()).toBe('Frontend');
+    });
+
+    it('should update when changed', () => {
+      componentRef.setInput('label', 'Backend');
+      fixture.detectChanges();
+      expect(component.label()).toBe('Backend');
+
+      componentRef.setInput('label', 'DevOps');
+      fixture.detectChanges();
+      expect(component.label()).toBe('DevOps');
+    });
+
+    it('should accept any string value', () => {
+      const testLabels = ['Group 1', 'Category A', 'Section X', ''];
+
+      testLabels.forEach(label => {
+        componentRef.setInput('label', label);
+        fixture.detectChanges();
+        expect(component.label()).toBe(label);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'wally-combobox-group',
+  imports: [],
+  templateUrl: './combobox-group.html',
+  styleUrl: './combobox-group.css'
+})
+export class ComboboxGroup {
+  label = input.required<string>();
+}