wally-ui 1.12.1 → 1.13.0

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

@@ -0,0 +1,69 @@
+import { Component, effect, ElementRef, input, OnDestroy } from '@angular/core';
+
+import { DropdownMenuService } from './dropdown-menu.service';
+
+export type TriggerMode = 'click' | 'hover';
+
+@Component({
+  selector: 'wally-dropdown-menu',
+  imports: [],
+  providers: [DropdownMenuService],
+  templateUrl: './dropdown-menu.html',
+  styleUrl: './dropdown-menu.css'
+})
+export class DropdownMenu implements OnDestroy {
+  triggerMode = input<TriggerMode>('click');
+
+  private clickOutsideListener: ((event: MouseEvent) => void) | null = null;
+
+  constructor(
+    public dropdownMenuService: DropdownMenuService,
+    private elementRef: ElementRef
+  ) {
+    effect(() => {
+      const mode = this.triggerMode();
+      this.dropdownMenuService.triggerMode.set(mode);
+    });
+
+    effect(() => {
+      if (this.dropdownMenuService.isOpen()) {
+        this.addClickOutsideListener();
+      } else {
+        this.removeClickOutsideListener();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.removeClickOutsideListener();
+  }
+
+  /**
+   * Adds a click listener to the document to detect clicks outside the dropdown.
+   * Uses setTimeout to prevent the same click that opens the dropdown from immediately closing it.
+   */
+  private addClickOutsideListener(): void {
+    setTimeout(() => {
+      this.clickOutsideListener = (event: MouseEvent) => {
+        const clickedElement = event.target as HTMLElement;
+        const dropdownElement = this.elementRef.nativeElement as HTMLElement;
+
+        if (!dropdownElement.contains(clickedElement)) {
+          this.dropdownMenuService.close();
+        }
+      };
+
+      document.addEventListener('click', this.clickOutsideListener);
+    }, 0);
+  }
+
+  /**
+   * Removes the click outside listener from the document and cleans up the reference.
+   */
+  private removeClickOutsideListener(): void {
+    if (this.clickOutsideListener) {
+      document.removeEventListener('click', this.clickOutsideListener);
+      this.clickOutsideListener = null;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component, computed, effect, ElementRef, input, InputSignal, OnDestroy, signal, ViewChild, WritableSignal } from '@angular/core';
+import { Component, computed, ElementRef, input, InputSignal, OnDestroy, signal, ViewChild, WritableSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
@@ -19,40 +19,34 @@ export class Tooltip implements OnDestroy {
   offset: InputSignal<number> = input<number>(2);
 
   visible: WritableSignal<boolean> = signal<boolean>(false);
-  actualPosition = signal<Exclude<TooltipPosition, 'auto'>>('top');
-  tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+  actualPosition: WritableSignal<"top" | "bottom" | "left" | "right"> = signal<Exclude<TooltipPosition, 'auto'>>('top');
+  tooltipId: string = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+  isPositioned: WritableSignal<boolean> = signal<boolean>(false);
 
   private showTimeout?: number;
   private hideTimeout?: number;
 
   tooltipClasses = computed(() => {
-    const base = 'absolute z-50 py-1.5 px-3 text-sm text-white bg-[#121212] shadow-lg whitespace-nowrap pointer-events-none rounded-xl';
+    const base = 'absolute z-10 py-1.5 px-3 text-sm text-white font-medium bg-[#121212] shadow-lg whitespace-nowrap pointer-events-none rounded-xl';
     const darkMode = 'dark:bg-white dark:text-[#121212]';
 
     const positions = {
-      top: `bottom-full left-1/2 -translate-x-1/2 mb-${this.offset()}`,
-      bottom: `top-full left-1/2 -translate-x-1/2 mt-${this.offset()}`,
-      left: `right-full top-1/2 -translate-y-1/2 mr-${this.offset()}`,
-      right: `left-full top-1/2 -translate-y-1/2 ml-${this.offset()}`
+      top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+      bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+      left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+      right: 'left-full top-1/2 -translate-y-1/2 ml-2'
     };
 
-    // Animação super suave - apenas fade rápido
-    const animation = this.visible()
+    const animation = this.visible() && this.isPositioned()
       ? 'transition-opacity duration-150 opacity-100'
-      : 'transition-opacity duration-100 opacity-0';
+      : 'opacity-0';
 
     return `${base} ${darkMode} ${positions[this.actualPosition()]} ${animation}`;
   });
 
   constructor(
     private elementRef: ElementRef
-  ) {
-    effect(() => {
-      if (this.visible() && this.position() === 'auto') {
-        setTimeout(() => this.calculateBestPosition(), 10);
-      }
-    });
-  }
+  ) { }
 
   ngOnDestroy() {
     if (this.showTimeout) {
@@ -74,11 +68,18 @@ export class Tooltip implements OnDestroy {
     }
 
     this.showTimeout = window.setTimeout(() => {
-      this.visible.set(true);
-
+      // Set initial position
       if (this.position() !== 'auto') {
         this.actualPosition.set(this.position() as Exclude<TooltipPosition, 'auto'>);
       }
+
+      // Make tooltip visible with opacity 0 to measure it
+      this.visible.set(true);
+
+      // Calculate best position before showing (next frame after DOM update)
+      requestAnimationFrame(() => {
+        this.calculateBestPosition();
+      });
     }, this.delay());
   }
 
@@ -90,100 +91,214 @@ export class Tooltip implements OnDestroy {
 
     this.hideTimeout = window.setTimeout(() => {
       this.visible.set(false);
+      this.isPositioned.set(false); // Reset positioning flag
     }, 100);
   }
 
+  /**
+   * Calculates the best position for the tooltip based on available viewport space.
+   *
+   * This method intelligently positions the tooltip to ensure it remains fully visible
+   * within the viewport boundaries. It respects the user's preferred position but will
+   * automatically switch to an alternative position if the preferred one doesn't fit.
+   *
+   * **Algorithm Steps:**
+   * 1. Measures available space in all four directions (top, bottom, left, right)
+   * 2. Validates each position considering:
+   *    - Tooltip dimensions (width/height)
+   *    - Viewport boundaries
+   *    - Required offset and padding (8px each)
+   * 3. Determines priority order:
+   *    - If `position="auto"`: tries top → bottom → right → left
+   *    - If specific position: tries that position first, then fallback to others
+   * 4. Selects the first valid position from priority order
+   * 5. If no position is fully valid, selects the one with most available space
+   * 6. Applies fine-tuning adjustments:
+   *    - For top/bottom: shifts horizontally if edges overflow
+   *    - For left/right: shifts vertically if edges overflow
+   *
+   * **Position Validation:**
+   * - **Top/Bottom**: Checks if there's enough vertical space AND tooltip fits horizontally
+   * - **Left/Right**: Checks if there's enough horizontal space AND tooltip fits vertically
+   *
+   * **Viewport Adjustment:**
+   * - Uses `calc()` to adjust `left` or `top` CSS properties
+   * - Preserves Tailwind's `-translate-x-1/2` and `-translate-y-1/2` transforms
+   * - Ensures 8px minimum padding from all viewport edges
+   *
+   * @example
+   * // User specifies position="bottom"
+   * // If bottom doesn't fit → tries top → right → left
+   * // Applies horizontal shift if tooltip overflows left/right edges
+   *
+   * @returns void
+   */
   private calculateBestPosition() {
-    const hostElement =
-      this.elementRef.nativeElement.querySelector('.tooltip-wrapper');
-    if (!hostElement) return;
-
-    const rect = hostElement.getBoundingClientRect();
-    const tooltipEl = this.tooltipElement?.nativeElement;
-    if (!tooltipEl) return;
-
-    const tooltipRect = tooltipEl.getBoundingClientRect();
-    const offset = this.offset();
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    const spaceAbove = rect.top;
-    const spaceBelow = viewportHeight - rect.bottom;
-    const spaceLeft = rect.left;
-    const spaceRight = viewportWidth - rect.right;
+    const wrapperElement = this.elementRef.nativeElement.querySelector('.tooltip-wrapper');
+    if (!wrapperElement) {
+      return;
+    }
 
-    const tooltipWidth = tooltipRect.width || 150;
-    const tooltipHeight = tooltipRect.height || 40;
+    const tooltipElement = this.tooltipElement?.nativeElement;
+    if (!tooltipElement) {
+      return;
+    }
 
-    const positions: {
-      position: Exclude<TooltipPosition, 'auto'>; space: number; isValid: boolean}[] = [
+    const wrapperBounds = wrapperElement.getBoundingClientRect();
+    const tooltipBounds = tooltipElement.getBoundingClientRect();
+
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+
+    // Available space in each direction from the wrapper element
+    const availableSpaceAbove = wrapperBounds.top;
+    const availableSpaceBelow = viewportHeight - wrapperBounds.bottom;
+    const availableSpaceLeft = wrapperBounds.left;
+    const availableSpaceRight = viewportWidth - wrapperBounds.right;
+
+    // Actual tooltip dimensions
+    const tooltipWidth = tooltipBounds.width;
+    const tooltipHeight = tooltipBounds.height;
+
+    // Fixed spacing values (8px each = 0.5rem in Tailwind)
+    const offsetFromWrapper = 8; // Gap between tooltip and wrapper
+    const edgePadding = 8; // Minimum distance from viewport edges
+
+    // Calculate horizontal center position of the wrapper
+    const wrapperCenterX = wrapperBounds.left + wrapperBounds.width / 2;
+    const wrapperCenterY = wrapperBounds.top + wrapperBounds.height / 2;
+
+    // Calculate where tooltip edges would be when centered
+    const tooltipLeftEdgeWhenCentered = wrapperCenterX - tooltipWidth / 2;
+    const tooltipRightEdgeWhenCentered = wrapperCenterX + tooltipWidth / 2;
+    const tooltipTopEdgeWhenCentered = wrapperCenterY - tooltipHeight / 2;
+    const tooltipBottomEdgeWhenCentered = wrapperCenterY + tooltipHeight / 2;
+
+    // Check if tooltip fits within viewport for each position
+    const positionValidations: {
+      position: Exclude<TooltipPosition, 'auto'>;
+      availableSpace: number;
+      fitsInViewport: boolean;
+      fitsHorizontally?: boolean;
+      fitsVertically?: boolean;
+    }[] = [
         {
           position: 'top',
-          space: spaceAbove,
-          isValid: spaceAbove >= tooltipHeight + offset
+          availableSpace: availableSpaceAbove,
+          fitsInViewport: availableSpaceAbove >= tooltipHeight + offsetFromWrapper + edgePadding,
+          fitsHorizontally: tooltipLeftEdgeWhenCentered >= edgePadding &&
+            tooltipRightEdgeWhenCentered <= viewportWidth - edgePadding
         },
         {
           position: 'bottom',
-          space: spaceBelow,
-          isValid: spaceBelow >= tooltipHeight + offset
+          availableSpace: availableSpaceBelow,
+          fitsInViewport: availableSpaceBelow >= tooltipHeight + offsetFromWrapper + edgePadding,
+          fitsHorizontally: tooltipLeftEdgeWhenCentered >= edgePadding &&
+            tooltipRightEdgeWhenCentered <= viewportWidth - edgePadding
         },
         {
           position: 'left',
-          space: spaceLeft,
-          isValid: spaceLeft >= tooltipWidth + offset
+          availableSpace: availableSpaceLeft,
+          fitsInViewport: availableSpaceLeft >= tooltipWidth + offsetFromWrapper + edgePadding,
+          fitsVertically: tooltipTopEdgeWhenCentered >= edgePadding &&
+            tooltipBottomEdgeWhenCentered <= viewportHeight - edgePadding
         },
         {
           position: 'right',
-          space: spaceRight,
-          isValid: spaceRight >= tooltipWidth + offset
+          availableSpace: availableSpaceRight,
+          fitsInViewport: availableSpaceRight >= tooltipWidth + offsetFromWrapper + edgePadding,
+          fitsVertically: tooltipTopEdgeWhenCentered >= edgePadding &&
+            tooltipBottomEdgeWhenCentered <= viewportHeight - edgePadding
         }
       ];
 
-    const priorityOrder: Exclude<TooltipPosition, 'auto'>[] = ['top', 'bottom', 'right', 'left'];
+    // Determine which positions to try, in order of preference
+    let positionsToTryInOrder: Exclude<TooltipPosition, 'auto'>[];
 
-    let bestPosition: Exclude<TooltipPosition, 'auto'> = 'top';
+    if (this.position() === 'auto') {
+      // Auto mode: use default priority order
+      positionsToTryInOrder = ['top', 'bottom', 'right', 'left'];
+    } else {
+      // Specific position: try user's preference first, then fallback to others
+      const userPreferredPosition = this.position() as Exclude<TooltipPosition, 'auto'>;
+      const allOtherPositions = (['top', 'bottom', 'right', 'left'] as Exclude<TooltipPosition, 'auto'>[])
+        .filter(position => position !== userPreferredPosition);
 
-    for (const preferred of priorityOrder) {
-      const pos = positions.find(p => p.position === preferred);
-      if (pos?.isValid) {
-        bestPosition = preferred;
+      positionsToTryInOrder = [userPreferredPosition, ...allOtherPositions];
+    }
+
+    // Find the first position that fits completely in the viewport
+    let finalSelectedPosition: Exclude<TooltipPosition, 'auto'> = positionsToTryInOrder[0];
+
+    for (const candidatePosition of positionsToTryInOrder) {
+      const validation = positionValidations.find(v => v.position === candidatePosition);
+      if (validation?.fitsInViewport) {
+        finalSelectedPosition = candidatePosition;
         break;
       }
     }
 
-    if (!positions.find(p => p.position ===
-      bestPosition)?.isValid) {
-      const maxSpace = positions.reduce((max, pos) => pos.space >
-        max.space ? pos : max, positions[0]);
-      bestPosition = maxSpace.position;
+    // Fallback: if no position fits, use the one with most available space
+    const currentPositionValidation = positionValidations.find(v => v.position === finalSelectedPosition);
+    if (!currentPositionValidation?.fitsInViewport) {
+      const positionWithMostSpace = positionValidations.reduce((best, current) =>
+        current.availableSpace > best.availableSpace ? current : best,
+        positionValidations[0]
+      );
+      finalSelectedPosition = positionWithMostSpace.position;
     }
 
-    this.actualPosition.set(bestPosition);
+    this.actualPosition.set(finalSelectedPosition);
+
+    // Apply fine-tuning adjustments after position is set
+    requestAnimationFrame(() => {
+      // Mark as positioned to trigger fade-in animation
+      this.isPositioned.set(true);
 
-    setTimeout(() => {
-      const updatedTooltipRect = tooltipEl.getBoundingClientRect();
-      const padding = 8;
 
-      if (bestPosition === 'top' || bestPosition === 'bottom') {
-        if (updatedTooltipRect.left < padding) {
-          const shift = padding - updatedTooltipRect.left;
-          tooltipEl.style.transform = `translateX(${shift}px)`;
-        } else if (updatedTooltipRect.right > viewportWidth - padding) {
-          const shift = (viewportWidth - padding) - updatedTooltipRect.right;
-          tooltipEl.style.transform = `translateX(${shift}px)`;
+      const tooltipBoundsAfterPositioning = tooltipElement.getBoundingClientRect();
+
+      // Reset any previous adjustments
+      tooltipElement.style.left = '';
+      tooltipElement.style.top = '';
+
+      // Adjust horizontal position for top/bottom tooltips that overflow edges
+      if (finalSelectedPosition === 'top' || finalSelectedPosition === 'bottom') {
+        let horizontalAdjustment = 0;
+
+        // Check if tooltip overflows left edge
+        if (tooltipBoundsAfterPositioning.left < edgePadding) {
+          horizontalAdjustment = edgePadding - tooltipBoundsAfterPositioning.left;
+        }
+        // Check if tooltip overflows right edge
+        else if (tooltipBoundsAfterPositioning.right > viewportWidth - edgePadding) {
+          horizontalAdjustment = (viewportWidth - edgePadding) - tooltipBoundsAfterPositioning.right;
+        }
+
+        if (horizontalAdjustment !== 0) {
+          // Shift tooltip while preserving centered alignment
+          tooltipElement.style.left = `calc(50% + ${horizontalAdjustment}px)`;
         }
       }
 
-      if (bestPosition === 'left' || bestPosition === 'right') {
-        if (updatedTooltipRect.top < padding) {
-          const shift = padding - updatedTooltipRect.top;
-          tooltipEl.style.transform = `translateY(${shift}px)`;
-        } else if (updatedTooltipRect.bottom > viewportHeight - padding) {
-          const shift = (viewportHeight - padding) - updatedTooltipRect.bottom;
-          tooltipEl.style.transform = `translateY(${shift}px)`;
+      // Adjust vertical position for left/right tooltips that overflow edges
+      if (finalSelectedPosition === 'left' || finalSelectedPosition === 'right') {
+        let verticalAdjustment = 0;
+
+        // Check if tooltip overflows top edge
+        if (tooltipBoundsAfterPositioning.top < edgePadding) {
+          verticalAdjustment = edgePadding - tooltipBoundsAfterPositioning.top;
+        }
+        // Check if tooltip overflows bottom edge
+        else if (tooltipBoundsAfterPositioning.bottom > viewportHeight - edgePadding) {
+          verticalAdjustment = (viewportHeight - edgePadding) - tooltipBoundsAfterPositioning.bottom;
+        }
+
+        if (verticalAdjustment !== 0) {
+          // Shift tooltip while preserving centered alignment
+          tooltipElement.style.top = `calc(50% + ${verticalAdjustment}px)`;
         }
       }
-    }, 0);
+    });
   }
 }