wally-ui 1.17.1 → 1.18.0

package/package.json

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

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

package/playground/showcase/src/app/components/dialog/dialog-close/dialog-close.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/playground/showcase/src/app/components/dialog/dialog-close/dialog-close.ts

@@ -0,0 +1,16 @@
+import { Component, HostListener, inject } from '@angular/core';
+import { DialogService } from '../dialog.service';
+
+@Component({
+  selector: 'wally-dialog-close',
+  imports: [],
+  templateUrl: './dialog-close.html'
+})
+export class DialogClose {
+  dialogService = inject(DialogService);
+
+  @HostListener('click')
+  onClick(): void {
+    this.dialogService.close();
+  }
+}

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

@@ -0,0 +1,15 @@
+@if (dialogService.isOpen()) {
+  <div
+    class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-all duration-200"
+    (click)="onBackdropClick($event)"
+    role="dialog"
+    aria-modal="true">
+    <div class="flex min-h-screen items-center justify-center p-4">
+      <div
+        class="relative w-full max-w-lg bg-white dark:bg-neutral-950 border border-neutral-300 dark:border-neutral-700 rounded-xl shadow-2xl transition-all duration-200 ease-out"
+        (click)="$event.stopPropagation()">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+}

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

@@ -0,0 +1,19 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { DialogService } from '../dialog.service';
+
+@Component({
+  selector: 'wally-dialog-content',
+  imports: [],
+  templateUrl: './dialog-content.html'
+})
+export class DialogContent {
+  dialogService = inject(DialogService);
+  private elementRef = inject(ElementRef);
+
+  onBackdropClick(event: MouseEvent): void {
+    // Close only if clicking directly on backdrop (not on dialog content)
+    if (event.target === event.currentTarget && this.dialogService.closeOnBackdropClick()) {
+      this.dialogService.close();
+    }
+  }
+}

package/playground/showcase/src/app/components/dialog/dialog-description/dialog-description.html

@@ -0,0 +1,3 @@
+<p class="text-sm text-neutral-600 dark:text-neutral-400">
+  <ng-content></ng-content>
+</p>

package/playground/showcase/src/app/components/dialog/dialog-description/dialog-description.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dialog-description',
+  imports: [],
+  templateUrl: './dialog-description.html'
+})
+export class DialogDescription {}

package/playground/showcase/src/app/components/dialog/dialog-footer/dialog-footer.html

@@ -0,0 +1,3 @@
+<div class="flex flex-col-reverse sm:flex-row sm:justify-end space-y-2 space-y-reverse sm:space-y-0 sm:space-x-2 px-6 pb-6 pt-4">
+  <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/dialog/dialog-footer/dialog-footer.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dialog-footer',
+  imports: [],
+  templateUrl: './dialog-footer.html'
+})
+export class DialogFooter {}

package/playground/showcase/src/app/components/dialog/dialog-header/dialog-header.html

@@ -0,0 +1,3 @@
+<div class="flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6">
+  <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/dialog/dialog-header/dialog-header.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dialog-header',
+  imports: [],
+  templateUrl: './dialog-header.html'
+})
+export class DialogHeader {}

package/playground/showcase/src/app/components/dialog/dialog-title/dialog-title.html

@@ -0,0 +1,3 @@
+<h1 class="text-lg font-semibold text-[#0a0a0a] dark:text-white">
+  <ng-content></ng-content>
+</h1>

package/playground/showcase/src/app/components/dialog/dialog-title/dialog-title.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wally-dialog-title',
+  imports: [],
+  templateUrl: './dialog-title.html'
+})
+export class DialogTitle {}

package/playground/showcase/src/app/components/dialog/dialog-trigger/dialog-trigger.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/playground/showcase/src/app/components/dialog/dialog-trigger/dialog-trigger.ts

@@ -0,0 +1,16 @@
+import { Component, HostListener, inject } from '@angular/core';
+import { DialogService } from '../dialog.service';
+
+@Component({
+  selector: 'wally-dialog-trigger',
+  imports: [],
+  templateUrl: './dialog-trigger.html'
+})
+export class DialogTrigger {
+  dialogService = inject(DialogService);
+
+  @HostListener('click')
+  onClick(): void {
+    this.dialogService.open();
+  }
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/playground/showcase/src/app/components/dialog/dialog.service.ts

@@ -0,0 +1,20 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable()
+export class DialogService {
+  isOpen = signal<boolean>(false);
+  closeOnBackdropClick = signal<boolean>(true);
+  closeOnEsc = signal<boolean>(true);
+
+  open(): void {
+    this.isOpen.set(true);
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+  }
+
+  toggle(): void {
+    this.isOpen.update(value => !value);
+  }
+}

package/playground/showcase/src/app/components/dialog/dialog.ts

@@ -0,0 +1,29 @@
+import { Component, effect, HostListener, inject, input } from '@angular/core';
+import { DialogService } from './dialog.service';
+
+@Component({
+  selector: 'wally-dialog',
+  imports: [],
+  providers: [DialogService],
+  templateUrl: './dialog.html'
+})
+export class Dialog {
+  dialogService = inject(DialogService);
+
+  closeOnBackdropClick = input<boolean>(true);
+  closeOnEsc = input<boolean>(true);
+
+  constructor() {
+    effect(() => {
+      this.dialogService.closeOnBackdropClick.set(this.closeOnBackdropClick());
+      this.dialogService.closeOnEsc.set(this.closeOnEsc());
+    });
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    if (this.dialogService.isOpen() && this.dialogService.closeOnEsc()) {
+      this.dialogService.close();
+    }
+  }
+}