wally-ui 1.17.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.17.0",
+  "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();
+    }
+  }
+}

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

@@ -19,9 +19,15 @@ export class DropdownMenuContent {
     const position = this.calculatedPosition();
     const scrollClasses = 'max-h-96 overflow-visible';
 
+    // Detectar se trigger está na metade direita da viewport
+    const triggerElement = this.elementRef.nativeElement.parentElement;
+    const isRightSide = triggerElement
+      ? triggerElement.getBoundingClientRect().left > window.innerWidth / 2
+      : false;
+
     const positionMap = {
-      bottom: 'top-full mt-1 left-0',
-      top: 'bottom-full mb-1 left-0',
+      bottom: isRightSide ? 'top-full mt-1 right-0' : 'top-full mt-1 left-0',
+      top: isRightSide ? 'bottom-full mb-1 right-0' : 'bottom-full mb-1 left-0',
       right: 'left-full ml-1 top-0',
       left: 'right-full mr-1 top-0'
     };
@@ -35,10 +41,10 @@ export class DropdownMenuContent {
   ) {
     effect(() => {
       if (this.dropdownMenuService.isOpen()) {
-        setTimeout(() => {
+        requestAnimationFrame(() => {
           const bestPosition = this.calculateBestPosition();
           this.calculatedPosition.set(bestPosition);
-        }, 0);
+        });
       }
     });
   }
@@ -49,8 +55,10 @@ export class DropdownMenuContent {
   @HostListener('window:resize')
   onResize(): void {
     if (this.dropdownMenuService.isOpen()) {
-      const bestPosition = this.calculateBestPosition();
-      this.calculatedPosition.set(bestPosition);
+      requestAnimationFrame(() => {
+        const bestPosition = this.calculateBestPosition();
+        this.calculatedPosition.set(bestPosition);
+      });
     }
   }