wally-ui 1.12.0 → 1.13.0

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

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

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()) {
+<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,31 @@
+import { Component, computed } from '@angular/core';
+import { DropdownMenuSubService } from '../dropdown-menu-sub.service';
+
+@Component({
+  selector: 'wally-dropdown-menu-sub-content',
+  imports: [],
+  templateUrl: './dropdown-menu-sub-content.html',
+  styleUrl: './dropdown-menu-sub-content.css'
+})
+export class DropdownMenuSubContent {
+  constructor(public subService: DropdownMenuSubService) {}
+
+  positionClasses = computed(() => {
+    return 'top-0 left-full';
+  });
+
+  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>

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

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

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

@@ -0,0 +1,31 @@
+import { Injectable, signal, WritableSignal } from '@angular/core';
+
+export type TriggerMode = 'click' | 'hover';
+
+@Injectable()
+export class DropdownMenuService {
+  isOpen: WritableSignal<boolean> = signal(false);
+  triggerMode = signal<TriggerMode>('click');
+
+  private hoveringContent = signal(false);
+
+  toggle(): void {
+    this.isOpen.update(value => !value);
+  }
+
+  open(): void {
+    this.isOpen.set(true);
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+  }
+
+  setHoveringContent(value: boolean) {
+    this.hoveringContent.set(value);
+  }
+
+  isHoveringContent(): boolean {
+    return this.hoveringContent();
+  }
+}