wally-ui 1.14.1 → 1.16.0

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>();
+}

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

@@ -0,0 +1,71 @@
+<div
+  class="flex items-center gap-2 w-full px-3 py-2 bg-white dark:bg-[#1b1b1b] border border-neutral-300 dark:border-neutral-700 rounded-lg focus-within:ring-2 focus-within:ring-blue-500 transition-all duration-200 min-h-[42px]"
+  [class.opacity-50]="comboboxService.disabled()"
+>
+  <!-- Left side: chips + input (can wrap) -->
+  <div class="flex flex-wrap gap-1.5 items-center flex-1 min-w-0">
+    <!-- Selected chips (multi-select mode) -->
+    @if (comboboxService.multiSelect()) {
+      @for (item of comboboxService.selectedItems(); track item.value) {
+        <div class="flex items-center gap-1 px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-md text-sm">
+          <span class="text-[#0a0a0a] dark:text-white">{{ item.label }}</span>
+          <button
+            type="button"
+            class="hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-full p-0.5 transition-colors"
+            (click)="removeChip(item.value, $event)"
+            [attr.aria-label]="'Remove ' + item.label"
+          >
+            <svg class="w-3 h-3 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      }
+    }
+
+    <!-- Input field -->
+    <input
+      #inputElement
+      type="text"
+      class="flex-1 min-w-[120px] outline-none bg-transparent text-[#0a0a0a] dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 text-sm"
+      [placeholder]="comboboxService.selectedItems().length === 0 ? comboboxService.placeholder() : ''"
+      [value]="comboboxService.searchQuery()"
+      [disabled]="comboboxService.disabled()"
+      (focus)="onInputFocus()"
+      (click)="onInputClick()"
+      (input)="onInput($event)"
+      role="combobox"
+      [attr.aria-expanded]="comboboxService.isOpen()"
+      [attr.aria-controls]="'combobox-listbox'"
+      autocomplete="off"
+    />
+  </div>
+
+  <!-- Right side: icons (always fixed at the end) -->
+  <div class="flex items-center gap-1 flex-shrink-0">
+    <!-- Clear button -->
+    @if (comboboxService.selectedItems().length > 0) {
+      <button
+        type="button"
+        class="p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-full transition-colors"
+        (click)="clearAll(inputElement)"
+        aria-label="Clear all"
+      >
+        <svg class="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    }
+
+    <!-- Dropdown indicator -->
+    <svg
+      class="w-4 h-4 text-neutral-500 transition-transform duration-200"
+      [class.rotate-180]="comboboxService.isOpen()"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+    </svg>
+  </div>
+</div>