wally-ui 1.12.1 → 1.13.1

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.ts

@@ -0,0 +1,10 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'wally-dropdown-menu-group',
+  templateUrl: './dropdown-menu-group.html',
+  styleUrl: './dropdown-menu-group.css'
+})
+export class DropdownMenuGroup {
+  ariaLabel = input<string>('');
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.html

@@ -0,0 +1,6 @@
+<div (click)="handleClick($event)" class="p-1" role="menuitem" tabindex="0">
+    <div class="text-base text-[#0a0a0a] hover:bg-neutral-100 dark:hover:bg-neutral-700/50 dark:text-white py-2 px-4 rounded-lg"
+    [ngClass]="{'text-neutral-400 dark:!text-white/50 pointer-events-none': disabled(), 'cursor-pointer': !disabled()}">
+        <ng-content></ng-content>
+    </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuItem } from './dropdown-menu-item';
+
+describe('DropdownMenuItem', () => {
+  let component: DropdownMenuItem;
+  let fixture: ComponentFixture<DropdownMenuItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuItem]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuItem);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.ts

@@ -0,0 +1,37 @@
+import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
+
+import { DropdownMenuService } from '../dropdown-menu.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'wally-dropdown-menu-item',
+  imports: [
+    CommonModule
+  ],
+  templateUrl: './dropdown-menu-item.html',
+  styleUrl: './dropdown-menu-item.css'
+})
+export class DropdownMenuItem {
+  disabled: InputSignal<boolean> = input<boolean>(false);
+
+  click: OutputEmitterRef<void> = output<void>();
+
+  constructor(
+    private dropdownMenuService: DropdownMenuService
+  ) {}
+
+  /**
+   * Handles click event on menu item.
+   * Stops event propagation to prevent double-firing, emits click event, and closes dropdown.
+   * Does nothing if item is disabled.
+   */
+  handleClick(event: MouseEvent): void {
+    if (this.disabled()) {
+      return;
+    }
+
+    event?.stopPropagation();
+    this.click.emit();
+    this.dropdownMenuService.close();
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-label/dropdown-menu-label.html

@@ -0,0 +1,3 @@
+<div class="px-5 py-4 text-base font-medium text-[#0a0a0a] dark:text-white">
+    <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-label/dropdown-menu-label.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuLabel } from './dropdown-menu-label';
+
+describe('DropdownMenuLabel', () => {
+  let component: DropdownMenuLabel;
+  let fixture: ComponentFixture<DropdownMenuLabel>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuLabel]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuLabel);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-label/dropdown-menu-label.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dropdown-menu-label',
+  imports: [],
+  templateUrl: './dropdown-menu-label.html',
+  styleUrl: './dropdown-menu-label.css'
+})
+export class DropdownMenuLabel {
+
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-portal/dropdown-menu-portal.html

@@ -0,0 +1 @@
+<p>dropdown-menu-portal works!</p>

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-portal/dropdown-menu-portal.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuPortal } from './dropdown-menu-portal';
+
+describe('DropdownMenuPortal', () => {
+  let component: DropdownMenuPortal;
+  let fixture: ComponentFixture<DropdownMenuPortal>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuPortal]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuPortal);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-portal/dropdown-menu-portal.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dropdown-menu-portal',
+  imports: [],
+  templateUrl: './dropdown-menu-portal.html',
+  styleUrl: './dropdown-menu-portal.css'
+})
+export class DropdownMenuPortal {
+
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-separator/dropdown-menu-separator.html

@@ -0,0 +1 @@
+<div class="h-px bg-neutral-300 dark:bg-neutral-700"></div>

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-separator/dropdown-menu-separator.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuSeparator } from './dropdown-menu-separator';
+
+describe('DropdownMenuSeparator', () => {
+  let component: DropdownMenuSeparator;
+  let fixture: ComponentFixture<DropdownMenuSeparator>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuSeparator]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuSeparator);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-separator/dropdown-menu-separator.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dropdown-menu-separator',
+  imports: [],
+  templateUrl: './dropdown-menu-separator.html',
+  styleUrl: './dropdown-menu-separator.css'
+})
+export class DropdownMenuSeparator {
+
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub/dropdown-menu-sub.html

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

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub/dropdown-menu-sub.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuSub } from './dropdown-menu-sub';
+
+describe('DropdownMenuSub', () => {
+  let component: DropdownMenuSub;
+  let fixture: ComponentFixture<DropdownMenuSub>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuSub]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuSub);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub/dropdown-menu-sub.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+import { DropdownMenuSubService } from '../dropdown-menu-sub.service';
+
+@Component({
+  selector: 'wally-dropdown-menu-sub',
+  imports: [],
+  providers: [
+    DropdownMenuSubService
+  ],
+  templateUrl: './dropdown-menu-sub.html',
+  styleUrl: './dropdown-menu-sub.css'
+})
+export class DropdownMenuSub {
+
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content.html

@@ -0,0 +1,9 @@
+@if (subService.isOpen() && isPositioned()) {
+<div
+  (mouseenter)="onMouseEnter()"
+  (mouseleave)="onMouseLeave()"
+  [class]="'absolute bg-white dark:bg-[#1b1b1b] rounded-xl shadow-2xl border border-neutral-300 dark:border-neutral-700 min-w-56 z-50 transition-all duration-200 ease-out ' + positionClasses()"
+  role="menu">
+  <ng-content></ng-content>
+</div>
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuSubContent } from './dropdown-menu-sub-content';
+
+describe('DropdownMenuSubContent', () => {
+  let component: DropdownMenuSubContent;
+  let fixture: ComponentFixture<DropdownMenuSubContent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuSubContent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuSubContent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content.ts

@@ -0,0 +1,140 @@
+import { Component, computed, effect, ElementRef, signal } from '@angular/core';
+import { DropdownMenuSubService } from '../dropdown-menu-sub.service';
+
+export type SubmenuPosition = 'right' | 'left' | 'bottom' | 'top';
+
+@Component({
+  selector: 'wally-dropdown-menu-sub-content',
+  imports: [],
+  templateUrl: './dropdown-menu-sub-content.html',
+  styleUrl: './dropdown-menu-sub-content.css'
+})
+export class DropdownMenuSubContent {
+  calculatedPosition = signal<SubmenuPosition>('right');
+  isPositioned = signal<boolean>(false);
+
+  positionClasses = computed(() => {
+    const position = this.calculatedPosition();
+
+    const positionMap = {
+      right: 'top-0 left-full ml-1',
+      left: 'top-0 right-full mr-1',
+      bottom: 'left-0 top-full mt-1',
+      top: 'left-0 bottom-full mb-1'
+    };
+
+    return positionMap[position];
+  });
+
+  constructor(
+    public subService: DropdownMenuSubService,
+    private elementRef: ElementRef
+  ) {
+    effect(() => {
+      if (this.subService.isOpen()) {
+        this.isPositioned.set(false);
+        setTimeout(() => {
+          const bestPosition = this.calculateBestPosition();
+          this.calculatedPosition.set(bestPosition);
+          this.isPositioned.set(true);
+        }, 0);
+      } else {
+        this.isPositioned.set(false);
+      }
+    });
+  }
+
+  /**
+   * Measures available space around the trigger element in all directions.
+   * @returns Object containing trigger dimensions and available space, or null if trigger not found
+   */
+  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 submenu based on available viewport space.
+   * Prioritizes right/left (horizontal) over top/bottom (vertical) for submenus.
+   * Always uses the same priority order: right → left → bottom → top
+   * @returns The optimal submenu position
+   */
+  private calculateBestPosition(): SubmenuPosition {
+    const space = this.measureAvailableSpace();
+
+    if (!space) {
+      return 'right';
+    }
+
+    const menuDimensions = this.getMenuDimensions();
+    const MENU_MIN_HEIGHT = menuDimensions.height + 20;
+    const MENU_MIN_WIDTH = menuDimensions.width + 20;
+
+    // Always use same priority for submenus: right → left → bottom → top
+    if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+    if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+    if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+    return 'top';
+  }
+
+  /**
+   * Gets the submenu dimensions from the DOM.
+   * @returns Height and width of the submenu
+   */
+  private getMenuDimensions(): {
+    height: number;
+    width: number;
+  } {
+    const menuElement = this.elementRef.nativeElement.querySelector('[role="menu"]');
+
+    if (!menuElement) {
+      return {
+        height: 200,
+        width: 224
+      };
+    }
+
+    const rect = menuElement.getBoundingClientRect();
+
+    return {
+      height: rect.height || 200,
+      width: rect.width || 224
+    };
+  }
+
+  onMouseEnter(): void {
+    this.subService.setHoveringContent(true);
+    this.subService.open();
+  }
+
+  onMouseLeave(): void {
+    this.subService.setHoveringContent(false);
+
+    setTimeout(() => {
+      if (!this.subService.isHoveringContent()) {
+        this.subService.close();
+      }
+    }, 100);
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger.html

@@ -0,0 +1,13 @@
+<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" class="p-1" role="menuitem" [attr.aria-haspopup]="true"
+  [attr.aria-expanded]="subService.isOpen()">
+
+  <div
+    class="flex justify-center items-center text-base text-[#0a0a0a] hover:bg-neutral-100 dark:hover:bg-neutral-700/50 dark:text-white py-2 px-4 rounded-lg cursor-pointer">
+    <ng-content></ng-content>
+
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+      class="size-4 ml-auto text-neutral-500 dark:text-neutral-400">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+    </svg>
+  </div>
+</div>

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuSubTrigger } from './dropdown-menu-sub-trigger';
+
+describe('DropdownMenuSubTrigger', () => {
+  let component: DropdownMenuSubTrigger;
+  let fixture: ComponentFixture<DropdownMenuSubTrigger>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuSubTrigger]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuSubTrigger);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { DropdownMenuSubService } from '../dropdown-menu-sub.service';
+
+@Component({
+  selector: 'wally-dropdown-menu-sub-trigger',
+  imports: [],
+  templateUrl: './dropdown-menu-sub-trigger.html',
+  styleUrl: './dropdown-menu-sub-trigger.css'
+})
+export class DropdownMenuSubTrigger {
+  private hoverTimeout: any = null;
+
+  constructor(public subService: DropdownMenuSubService) {}
+
+  /**
+   * Opens submenu after 150ms delay to prevent accidental triggers.
+   */
+  onMouseEnter(): void {
+    this.hoverTimeout = setTimeout(() => {
+      this.subService.open();
+    }, 150);
+  }
+
+  /**
+   * Closes submenu with 300ms delay, allowing user to move mouse to submenu content.
+   * Cancels pending open timeout if mouse leaves quickly.
+   */
+  onMouseLeave(): void {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+
+    setTimeout(() => {
+      if (!this.subService.isHoveringContent()) {
+        this.subService.close();
+      }
+    }, 300);
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DropdownMenuSubService } from './dropdown-menu-sub.service';
+
+describe('DropdownMenuSubService', () => {
+  let service: DropdownMenuSubService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DropdownMenuSubService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-sub.service.ts

@@ -0,0 +1,23 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable()
+export class DropdownMenuSubService {
+  isOpen = signal(false);
+  private hoveringContent = signal(false);
+
+  open(): void {
+    this.isOpen.set(true);
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+  }
+
+  setHoveringContent(value: boolean): void {
+    this.hoveringContent.set(value);
+  }
+
+  isHoveringContent(): boolean {
+    return this.hoveringContent();
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-trigger/dropdown-menu-trigger.html

@@ -0,0 +1,8 @@
+<div
+    (click)="toggle()"
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+    class="cursor-pointer"
+    role="button">
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuTrigger } from './dropdown-menu-trigger';
+
+describe('DropdownMenuTrigger', () => {
+  let component: DropdownMenuTrigger;
+  let fixture: ComponentFixture<DropdownMenuTrigger>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuTrigger]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuTrigger);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-trigger/dropdown-menu-trigger.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+
+import { DropdownMenuService } from '../dropdown-menu.service';
+
+@Component({
+  selector: 'wally-dropdown-menu-trigger',
+  imports: [],
+  templateUrl: './dropdown-menu-trigger.html',
+  styleUrl: './dropdown-menu-trigger.css'
+})
+export class DropdownMenuTrigger {
+  private hoverTimeout: any = null;
+
+  constructor(
+    public dropdownMenuService: DropdownMenuService
+  ) {}
+
+  toggle(): void {
+    if (this.dropdownMenuService.triggerMode() === 'click') {
+      this.dropdownMenuService.toggle();
+    }
+  }
+
+  /**
+   * Handles mouse enter event for hover mode.
+   * Opens the dropdown after a 200ms delay to prevent accidental triggers.
+   */
+  onMouseEnter(): void {
+    if (this.dropdownMenuService.triggerMode() === 'hover') {
+      this.hoverTimeout = setTimeout(() => {
+        this.dropdownMenuService.open();
+      }, 200);
+    }
+  }
+
+  /**
+   * Handles mouse leave event for hover mode.
+   * Cancels pending open timeout and closes dropdown after 100ms delay,
+   * allowing user to move mouse to dropdown content without it closing.
+   */
+  onMouseLeave(): void {
+    if (this.dropdownMenuService.triggerMode() === 'hover') {
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = null;
+      }
+
+      setTimeout(() => {
+        if (!this.dropdownMenuService.isHoveringContent()) {
+          this.dropdownMenuService.close();
+        }
+      }, 100);
+    }
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu.html

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