wally-ui 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.18.0",
+  "version": "1.19.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

@@ -49,6 +49,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/dialog',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/toast',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'documentation/chat-sdk',
     renderMode: RenderMode.Prerender,

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

@@ -27,7 +27,7 @@
     <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"
+      class="flex-1 min-w-[120px] outline-none bg-transparent text-[#0a0a0a] dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 text-base md:text-sm"
       [placeholder]="comboboxService.selectedItems().length === 0 ? comboboxService.placeholder() : ''"
       [value]="comboboxService.searchQuery()"
       [disabled]="comboboxService.disabled()"

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

@@ -1,7 +1,7 @@
 <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"
+    class="w-full px-3 py-2 text-base md: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)"

package/playground/showcase/src/app/components/toast/lib/models/toast.model.ts

@@ -0,0 +1,11 @@
+import { ToastPosition } from '../types/toast-position.type';
+import { ToastType } from '../types/toast-type.type';
+
+export interface Toast {
+  id: number;
+  type: ToastType;
+  title?: string;
+  message: string;
+  duration?: number;
+  position?: ToastPosition;
+}

package/playground/showcase/src/app/components/toast/lib/services/toast.service.spec.ts

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

package/playground/showcase/src/app/components/toast/lib/services/toast.service.ts

@@ -0,0 +1,113 @@
+import { Injectable, signal } from '@angular/core';
+
+import { ToastPosition } from '../types/toast-position.type';
+import { Toast } from '../models/toast.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  private _toasts = signal<Toast[]>([]);
+  private _defaultPosition = signal<ToastPosition>('top-center');
+  private _timeouts = new Map<number, { timeout: ReturnType<typeof setTimeout>, remainingTime: number, startTime: number }>();
+  private _pausedToasts = new Set<number>();
+
+  readonly toasts = this._toasts.asReadonly();
+  readonly defaultPosition = this._defaultPosition.asReadonly();
+
+  setDefaultPosition(position: ToastPosition): void {
+    this._defaultPosition.set(position);
+  }
+
+  /**
+   * Creates a new toast notification.
+   *
+   * @remarks
+   * - Loading and neutral toasts have duration=0 (no auto-dismiss, must be removed manually)
+   * - Other types default to 5000ms auto-dismiss
+   *
+   * @returns The toast ID - save this to remove loading toasts manually
+   */
+  create(toast: Omit<Toast, "id">): number {
+    const id: number = Date.now();
+    const duration: number = (toast.type === 'loading' || toast.type === 'neutral') ? 0 : (toast.duration ?? 5000);
+
+    const newToast: Toast = {
+      id: id,
+      duration: duration,
+      position: toast.position || this._defaultPosition(),
+      ...toast
+    }
+
+    this._toasts.update(currentToasts => [...currentToasts, newToast]);
+
+    if (duration > 0) {
+      this.scheduleRemoval(id, duration);
+    }
+
+    return id;
+  }
+
+  private scheduleRemoval(id: number, duration: number): void {
+    const timeout = setTimeout(() => {
+      this.remove(id);
+      this._timeouts.delete(id);
+    }, duration);
+
+    this._timeouts.set(id, {
+      timeout,
+      remainingTime: duration,
+      startTime: Date.now()
+    });
+  }
+
+  /**
+   * Pauses auto-dismiss timer for a toast (e.g., when hovering).
+   *
+   * @remarks
+   * Calculates elapsed time since timer started and subtracts from remaining time.
+   * This allows resuming with the correct remaining duration.
+   */
+  pause(id: number): void {
+    const timeoutData = this._timeouts.get(id);
+
+    if (timeoutData && !this._pausedToasts.has(id)) {
+      clearTimeout(timeoutData.timeout);
+      const elapsed = Date.now() - timeoutData.startTime;
+      timeoutData.remainingTime = Math.max(0, timeoutData.remainingTime - elapsed);
+      this._pausedToasts.add(id);
+    }
+  }
+
+  /**
+   * Resumes auto-dismiss timer for a paused toast.
+   *
+   * @remarks
+   * Creates a new setTimeout with the remaining time calculated during pause.
+   * Updates startTime to now for accurate future pause calculations.
+   */
+  resume(id: number): void {
+    const timeoutData = this._timeouts.get(id);
+
+    if (timeoutData && this._pausedToasts.has(id)) {
+      this._pausedToasts.delete(id);
+      timeoutData.startTime = Date.now();
+      timeoutData.timeout = setTimeout(() => {
+        this.remove(id);
+        this._timeouts.delete(id);
+      }, timeoutData.remainingTime);
+    }
+  }
+
+  remove(id: number): void {
+    const timeoutData = this._timeouts.get(id);
+
+    if (timeoutData) {
+      clearTimeout(timeoutData.timeout);
+      this._timeouts.delete(id);
+    }
+
+    this._pausedToasts.delete(id);
+    this._toasts.update(current => current.filter(toast => toast.id !== id));
+  }
+}

package/playground/showcase/src/app/components/toast/lib/types/toast-position.type.ts

@@ -0,0 +1,10 @@
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'center-left'
+  | 'center'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';

package/playground/showcase/src/app/components/toast/lib/types/toast-type.type.ts

@@ -0,0 +1 @@
+export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'loading' | 'neutral';

package/playground/showcase/src/app/components/toast/toast-container/toast-container.html

@@ -0,0 +1,29 @@
+@for (position of visiblePositions(); track position) {
+  <div
+    class="fixed z-50 pointer-events-none"
+    [class]="getPositionClasses(position)"
+  >
+    <div
+      class="relative pointer-events-auto transition-all duration-500 ease-in-out w-[456px] max-w-[calc(100vw-2rem)]"
+      [class.flex]="getHoverSignal(position)()"
+      [class.flex-col]="getHoverSignal(position)()"
+      [class.gap-2]="getHoverSignal(position)()"
+      [style.height]="getContainerHeight(position)"
+      [style.transform-origin]="getTransformOrigin(position)"
+      (mouseenter)="onMouseEnter(position)"
+      (mouseleave)="onMouseLeave(position)"
+    >
+      @for (
+        toast of getToastsForPosition(position);
+        track trackByToastId($index, toast)
+      ) {
+        <wally-toast-item
+          [toast]="toast"
+          [visualIndex]="getVisualIndex(toast, position)"
+          [totalVisible]="getToastsForPosition(position).length"
+          [isHovered]="getHoverSignal(position)()"
+        />
+      }
+    </div>
+  </div>
+}

package/playground/showcase/src/app/components/toast/toast-container/toast-container.spec.ts

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

package/playground/showcase/src/app/components/toast/toast-container/toast-container.ts

@@ -0,0 +1,149 @@
+import { Component, computed, inject, Signal, signal } from '@angular/core';
+
+import { ToastPosition } from '../lib/types/toast-position.type';
+import { ToastService } from '../lib/services/toast.service';
+import { ToastItem } from '../toast-item/toast-item';
+import { Toast } from '../lib/models/toast.model';
+
+@Component({
+  selector: 'wally-toast-container',
+  imports: [ToastItem],
+  templateUrl: './toast-container.html',
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
+})
+export class ToastContainer {
+  private toastService = inject(ToastService);
+
+  private readonly MAX_VISIBLE = 5;
+
+  private hoverStates = new Map<ToastPosition, ReturnType<typeof signal<boolean>>>();
+
+  toastsByPosition: Signal<Record<ToastPosition, Toast[]>> = computed(() => {
+    const toasts = this.toastService.toasts();
+    const grouped: Record<ToastPosition, Toast[]> = {
+      'top-left': [],
+      'top-center': [],
+      'top-right': [],
+      'center-left': [],
+      'center': [],
+      'center-right': [],
+      'bottom-left': [],
+      'bottom-center': [],
+      'bottom-right': []
+    };
+
+    toasts.forEach(toast => {
+      const position = toast.position || 'top-center';
+      grouped[position].push(toast);
+    });
+
+    return grouped;
+  });
+
+  visiblePositions: Signal<ToastPosition[]> = computed(() => {
+    const grouped = this.toastsByPosition();
+    return (Object.keys(grouped) as ToastPosition[]).filter(
+      pos => grouped[pos].length > 0
+    );
+  });
+
+  getPositionClasses(position: ToastPosition): string {
+    const positionMap: Record<ToastPosition, string> = {
+      'top-left': 'top-4 left-4',
+      'top-center': 'top-4 left-1/2 -translate-x-1/2',
+      'top-right': 'top-4 right-4',
+      'center-left': 'top-1/2 left-4 -translate-y-1/2',
+      'center': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+      'center-right': 'top-1/2 right-4 -translate-y-1/2',
+      'bottom-left': 'bottom-4 left-4',
+      'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+      'bottom-right': 'bottom-4 right-4'
+    };
+    return positionMap[position];
+  }
+
+  getTransformOrigin(position: ToastPosition): string {
+    if (position.startsWith('top')) return 'top';
+    if (position.startsWith('bottom')) return 'bottom';
+    return 'center';
+  }
+
+  /**
+   * Gets toasts for a position, limiting to MAX_VISIBLE (5) newest.
+   *
+   * @remarks
+   * - slice(-5): Gets last 5 toasts (newest)
+   * - reverse(): Puts newest first (index 0 = front of stack)
+   */
+  getToastsForPosition(position: ToastPosition): Toast[] {
+    const toasts = this.toastsByPosition()[position];
+    return toasts.slice(-this.MAX_VISIBLE).reverse();
+  }
+
+  getVisualIndex(toast: Toast, position: ToastPosition): number {
+    const toasts = this.getToastsForPosition(position);
+    return toasts.indexOf(toast);
+  }
+
+  trackByToastId(_index: number, toast: Toast): number {
+    return toast.id;
+  }
+
+  getHoverSignal(position: ToastPosition): Signal<boolean> {
+    if (!this.hoverStates.has(position)) {
+      this.hoverStates.set(position, signal(false));
+    }
+    return this.hoverStates.get(position)!;
+  }
+
+  onMouseEnter(position: ToastPosition): void {
+    const hoverSignal = this.hoverStates.get(position);
+    if (hoverSignal) {
+      hoverSignal.set(true);
+    } else {
+      this.hoverStates.set(position, signal(true));
+    }
+
+    const toasts = this.getToastsForPosition(position);
+    toasts.forEach(toast => {
+      this.toastService.pause(toast.id);
+    });
+  }
+
+  onMouseLeave(position: ToastPosition): void {
+    const hoverSignal = this.hoverStates.get(position);
+    if (hoverSignal) {
+      hoverSignal.set(false);
+    }
+
+    const toasts = this.getToastsForPosition(position);
+    toasts.forEach(toast => {
+      this.toastService.resume(toast.id);
+    });
+  }
+
+  /**
+   * Calculates container height for stacking effect.
+   *
+   * @remarks
+   * Hovered: 'auto' - flexbox with gap-3 handles spacing
+   *
+   * Stacked: 64px base + 8px per additional toast
+   * - 1 toast: 64px
+   * - 2 toasts: 64 + 8 = 72px
+   * - 5 toasts: 64 + 32 = 96px
+   *
+   * The 8px matches the visible border offset between stacked toasts
+   */
+  getContainerHeight(position: ToastPosition): string {
+    const toasts = this.getToastsForPosition(position);
+    const count = toasts.length;
+    const hovered = this.getHoverSignal(position)();
+
+    if (hovered) {
+      return 'auto';
+    } else {
+      return `${64 + (count - 1) * 8}px`;
+    }
+  }
+}

package/playground/showcase/src/app/components/toast/toast-item/toast-item.html

@@ -0,0 +1,137 @@
+<div
+  class="transition-all duration-500 ease-in-out origin-top w-full sm:w-[456px] max-w-[calc(100vw-2rem)]"
+  [class.absolute]="!isHovered()"
+  [style.z-index]="zIndex()"
+  [style.transform]="transformStyle()"
+  [style.opacity]="isClosing() ? 0 : opacityStyle()"
+  role="alert"
+  aria-live="polite"
+>
+  <div
+    class="flex items-center gap-3 px-4 py-3 rounded-xl bg-white dark:bg-[#262626] border border-neutral-300 dark:border-neutral-700 shadow-lg transition-all duration-200 w-full antialiased"
+  >
+    @if (toast().type !== "neutral") {
+      <div class="flex-shrink-0" [class]="iconColorClasses()">
+        @switch (toast().type) {
+          @case ("success") {
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+              />
+            </svg>
+          }
+          @case ("error") {
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+              />
+            </svg>
+          }
+          @case ("info") {
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+              />
+            </svg>
+          }
+          @case ("warning") {
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+              />
+            </svg>
+          }
+          @case ("loading") {
+            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+          }
+        }
+      </div>
+    }
+
+    <div class="flex-1 min-w-0">
+      @if (toast().title) {
+        <div
+          class="font-semibold text-base text-neutral-900 dark:text-white mb-1"
+        >
+          {{ toast().title }}
+        </div>
+      }
+      <div
+        class="text-[15px] text-neutral-600 dark:text-neutral-300 leading-snug"
+      >
+        {{ toast().message }}
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="flex-shrink-0 p-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 transition-colors text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
+      (click)="onClose()"
+      aria-label="Close notification"
+    >
+      <svg
+        class="w-4 h-4"
+        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>
+</div>

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

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

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

@@ -0,0 +1,118 @@
+import { Component, computed, effect, inject, input, Signal, signal } from '@angular/core';
+
+import { ToastService } from '../lib/services/toast.service';
+import { ToastType } from '../lib/types/toast-type.type';
+import { Toast } from '../lib/models/toast.model';
+
+@Component({
+  selector: 'wally-toast-item',
+  imports: [],
+  templateUrl: './toast-item.html',
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
+})
+export class ToastItem {
+  private toastService = inject(ToastService);
+
+  toast = input.required<Toast>();
+  visualIndex = input.required<number>();
+  totalVisible = input.required<number>();
+  isHovered = input<boolean>(false);
+
+  isClosing = signal(false);
+  remainingTime = signal(100);
+
+  /**
+   * Calculates CSS transform for stacking effect.
+   *
+   * @remarks
+   * Stacked (not hovered):
+   * - Index 0 (newest): No offset, full scale
+   * - Index 1+: Moves DOWN by 13px per level, scales down by 2% per level
+   *
+   * Hovered: Flexbox handles positioning, only removes scale
+   */
+  transformStyle: Signal<string> = computed(() => {
+    const index = this.visualIndex();
+    const hovered = this.isHovered();
+
+    if (hovered) {
+      return 'scale(1)';
+    } else {
+      if (index === 0) {
+        return 'translateY(0) scale(1)';
+      } else {
+        // Push older toasts DOWN to show stacked borders behind newest
+        // 13px = enough to show ~6-8px of the toast border below
+        const yOffset = index * 13;
+        const scale = 1 - (index * 0.02); // 2% smaller per level (0.98, 0.96, 0.94, 0.92)
+        return `translateY(${yOffset}px) scale(${scale})`;
+      }
+    }
+  });
+
+  /**
+   * Calculates opacity for depth perception in stack.
+   *
+   * @remarks
+   * - Index 0 or hovered: Full opacity (1.0)
+   * - Index 1+: Reduces by 12% per level (0.88, 0.76, 0.64, 0.52)
+   */
+  opacityStyle: Signal<number> = computed(() => {
+    const index = this.visualIndex();
+    const hovered = this.isHovered();
+
+    if (hovered || index === 0) {
+      return 1;
+    } else {
+      return 1 - (index * 0.12); // 12% opacity reduction per level
+    }
+  });
+
+  zIndex: Signal<number> = computed(() => {
+    return 50 - this.visualIndex();
+  });
+
+  iconColorClasses: Signal<string> = computed(() => {
+    const colorMap: Record<ToastType, string> = {
+      success: 'text-green-500',
+      error: 'text-red-500',
+      info: 'text-blue-500',
+      warning: 'text-yellow-500',
+      loading: 'text-neutral-400',
+      neutral: 'text-neutral-400'
+    };
+    return colorMap[this.toast().type];
+  });
+
+  constructor() {
+    effect(() => {
+      const toast = this.toast();
+      if (toast.duration && toast.duration > 0) {
+        this.startProgressTimer(toast.duration);
+      }
+    });
+  }
+
+  private startProgressTimer(duration: number): void {
+    const interval = 50;
+    const steps = duration / interval;
+    let currentStep = 0;
+
+    const timer = setInterval(() => {
+      currentStep++;
+      const percentage = 100 - (currentStep / steps) * 100;
+      this.remainingTime.set(Math.max(0, percentage));
+
+      if (currentStep >= steps) {
+        clearInterval(timer);
+      }
+    }, interval);
+  }
+
+  onClose(): void {
+    this.isClosing.set(true);
+    setTimeout(() => {
+      this.toastService.remove(this.toast().id);
+    }, 200);
+  }
+}

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

@@ -0,0 +1 @@
+<wally-toast-container></wally-toast-container>