wally-ui 1.11.1 → 1.12.0

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

@@ -1,285 +1,233 @@
 import { Component, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener, WritableSignal, input, InputSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { it } from 'node:test';
 
 @Component({
   selector: 'wally-carousel',
   imports: [CommonModule],
   templateUrl: './carousel.html',
 })
-export class Carousel implements AfterViewInit {
+export class Carousel implements AfterViewInit, OnDestroy {
   @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
 
+  isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);
+  totalItemsCount: WritableSignal<number> = signal<number>(0);
+  currentVisibleItemIndex: WritableSignal<number> = signal<number>(0);
   carouselItemElements: HTMLElement[] = [];
 
+  private gestureState = {
+    startPositionX: 0,
+    startPositionY: 0,
+    currentPositionX: 0,
+    currentPositionY: 0,
+    isCurrentlyDragging: false,
+    gestureStartTime: 0
+  };
+
+  private readonly MINIMUM_SWIPE_DISTANCE = 50;
+  private readonly MINIMUM_SWIPE_VELOCITY = 0.3;
+  private readonly MAXIMUM_SWIPE_DURATION = 300;
+
+  private eventListenerCleanupFunctions: (() => void)[] = [];
+
+  get navigationIndicatorsArray() {
+    return Array(this.totalItemsCount()).fill(0);
+  }
+
   constructor(
     private renderer: Renderer2
   ) { }
 
   ngAfterViewInit(): void {
-    console.log('carouselContainer', this.carouselContainer.nativeElement.children);
+    if (this.carouselContainer) {
+      this.initializeCarouselItems();
+      this.setupTouchAndMouseEvents();
+      this.setupAccessibilityAttributes();
+    }
+  }
 
-    this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
-    console.log('carouselItemElements', this.carouselItemElements);
+  ngOnDestroy(): void {
+    this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
+  }
+
+  calculateNextItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex + 1) % this.totalItemsCount();
+  }
 
+  calculatePreviousItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
+  }
+
+  navigateToNextItem(): void {
+    this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
+  }
 
+  navigateToPreviousItem(): void {
+    this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
+  }
+
+  navigateToSpecificItem(targetItemIndex: number): void {
+    this.currentVisibleItemIndex.set(targetItemIndex);
+    this.updateAllItemElementPositions();
+  }
+
+  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
+    const currentVisibleIndex = this.currentVisibleItemIndex();
+
+    if (itemIndex === currentVisibleIndex) {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
+    } else if (itemIndex > currentVisibleIndex) {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
+    } else {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
+    }
+  }
+
+  updateAllItemElementPositions(): void {
     this.carouselItemElements.forEach((itemElement, itemIndex) => {
-      // this.renderer.setStyle(itemElement, 'position', 'absolute');
-      // this.renderer.setStyle(itemElement, 'display', 'flex');
-      // this.renderer.setStyle(itemElement, 'align-items', 'center');
-      // this.renderer.setStyle(itemElement, 'justify-content', 'center');
-      // this.renderer.setStyle(itemElement, 'inset', '0');
-      // this.renderer.setStyle(itemElement, 'padding', '8px');
-      // this.renderer.setStyle(itemElement, 'border-radius', '8px');
-      // this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
-
-      // this.renderer.addClass(item, 'flex flex-col items-center gap-4 p-2 rounded-sm transition-all duration-700 ease-in-out');
+      this.updateItemElementPosition(itemElement, itemIndex);
     });
+  }
+
+  @HostListener('keydown', ['$event'])
+  handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
+    switch (keyboardEvent.key) {
+      case 'ArrowLeft':
+        keyboardEvent.preventDefault();
+        this.navigateToPreviousItem();
+        break;
+      case 'ArrowRight':
+        keyboardEvent.preventDefault();
+        this.navigateToNextItem();
+        break;
+      case 'Home':
+        keyboardEvent.preventDefault();
+        this.navigateToSpecificItem(0);
+        break;
+      case 'End':
+        keyboardEvent.preventDefault();
+        this.navigateToSpecificItem(this.totalItemsCount() - 1);
+        break;
+    }
+  }
+
+  private initializeCarouselItems(): void {
+    this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
+    this.totalItemsCount.set(this.carouselItemElements.length);
 
     this.carouselItemElements.forEach((itemElement, itemIndex) => {
+      this.renderer.setStyle(itemElement, 'position', 'absolute');
+      this.renderer.setStyle(itemElement, 'inset', '0');
+      this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
+      this.renderer.setStyle(itemElement, 'display', 'flex');
+      this.renderer.setStyle(itemElement, 'align-items', 'center');
+      this.renderer.setStyle(itemElement, 'justify-content', 'center');
       this.updateItemElementPosition(itemElement, itemIndex);
     });
   }
 
-  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
-    // const currentVisibleIndex = this.currentVisibleItemIndex();
+  private setupTouchAndMouseEvents(): void {
+    const carouselContainerElement = this.carouselContainer.nativeElement;
+
+    const touchStartListener = this.renderer.listen(carouselContainerElement, 'touchstart', (event) => this.handleTouchStart(event));
+    const touchMoveListener = this.renderer.listen(carouselContainerElement, 'touchmove', (event) => this.handleTouchMove(event));
+    const touchEndListener = this.renderer.listen(carouselContainerElement, 'touchend', () => this.handleTouchEnd());
+
+    const mouseDownListener = this.renderer.listen(carouselContainerElement, 'mousedown', (event) => this.handleMouseDown(event));
+    const mouseMoveListener = this.renderer.listen(carouselContainerElement, 'mousemove', (event) => this.handleMouseMove(event));
+    const mouseUpListener = this.renderer.listen(carouselContainerElement, 'mouseup', () => this.handleMouseUp());
+    const mouseLeaveListener = this.renderer.listen(carouselContainerElement, 'mouseleave', () => this.handleMouseUp());
+
+    this.eventListenerCleanupFunctions.push(
+      touchStartListener,
+      touchMoveListener,
+      touchEndListener,
+      mouseDownListener,
+      mouseMoveListener,
+      mouseUpListener,
+      mouseLeaveListener
+    );
+
+    this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
+  }
+
+  private setupAccessibilityAttributes(): void {
+    const carouselContainerElement = this.carouselContainer.nativeElement;
 
-    // if (itemIndex === currentVisibleIndex) {
-    if (itemIndex === 2) {
-      console.log('itemIndex', itemIndex);
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(10%)');
+    this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
+    this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
+    this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
+  }
+
+  private handleTouchStart(touchEvent: TouchEvent): void {
+    this.initializeGesture(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+  }
+
+  private handleTouchMove(touchEvent: TouchEvent): void {
+    if (this.gestureState.isCurrentlyDragging) {
+      touchEvent.preventDefault();
+      this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
     }
-    if (itemIndex !== 2) {
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
+  }
+
+  private handleTouchEnd(): void {
+    this.finalizeGestureAndNavigate();
+  }
+
+  private handleMouseDown(mouseEvent: MouseEvent): void {
+    this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
+  }
+
+  private handleMouseMove(mouseEvent: MouseEvent): void {
+    if (this.gestureState.isCurrentlyDragging) {
+      mouseEvent.preventDefault();
+      this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
     }
-    // } else if (itemIndex > currentVisibleIndex) {
-    // this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
-    // } else {
-    //   this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
-    // }
   }
 
-  // @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
-
-  // isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);
-  // totalItemsCount: WritableSignal<number> = signal<number>(0);
-  // currentVisibleItemIndex: WritableSignal<number> = signal<number>(0);
-  // carouselItemElements: HTMLElement[] = [];
-
-  // private gestureState = {
-  //   startPositionX: 0,
-  //   startPositionY: 0,
-  //   currentPositionX: 0,
-  //   currentPositionY: 0,
-  //   isCurrentlyDragging: false,
-  //   gestureStartTime: 0
-  // };
-
-  // private readonly MINIMUM_SWIPE_DISTANCE = 50;
-  // private readonly MINIMUM_SWIPE_VELOCITY = 0.3;
-  // private readonly MAXIMUM_SWIPE_DURATION = 300;
-
-  // private eventListenerCleanupFunctions: (() => void)[] = [];
-
-  // get navigationIndicatorsArray() {
-  //   return Array(this.totalItemsCount()).fill(0);
-  // }
-
-  // constructor(
-  //   private renderer: Renderer2
-  // ) { }
-
-  // ngAfterViewInit(): void {
-  //   if (this.carouselContainer) {
-  //     this.initializeCarouselItems();
-  //     this.setupTouchAndMouseEvents();
-  //     this.setupAccessibilityAttributes();
-  //   }
-  // }
-
-  // ngOnDestroy(): void {
-  //   this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
-  // }
-
-  // calculateNextItemIndex(currentItemIndex: number): number {
-  //   return (currentItemIndex + 1) % this.totalItemsCount();
-  // }
-
-  // calculatePreviousItemIndex(currentItemIndex: number): number {
-  //   return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
-  // }
-
-  // navigateToNextItem(): void {
-  //   this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
-  //   this.updateAllItemElementPositions();
-  // }
-
-  // navigateToPreviousItem(): void {
-  //   this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
-  //   this.updateAllItemElementPositions();
-  // }
-
-  // navigateToSpecificItem(targetItemIndex: number): void {
-  //   this.currentVisibleItemIndex.set(targetItemIndex);
-  //   this.updateAllItemElementPositions();
-  // }
-
-  // updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
-  //   const currentVisibleIndex = this.currentVisibleItemIndex();
-
-  //   if (itemIndex === currentVisibleIndex) {
-  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
-  //   } else if (itemIndex > currentVisibleIndex) {
-  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
-  //   } else {
-  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
-  //   }
-  // }
-
-  // updateAllItemElementPositions(): void {
-  //   this.carouselItemElements.forEach((itemElement, itemIndex) => {
-  //     this.updateItemElementPosition(itemElement, itemIndex);
-  //   });
-  // }
-
-  // @HostListener('keydown', ['$event'])
-  // handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
-  //   switch (keyboardEvent.key) {
-  //     case 'ArrowLeft':
-  //       keyboardEvent.preventDefault();
-  //       this.navigateToPreviousItem();
-  //       break;
-  //     case 'ArrowRight':
-  //       keyboardEvent.preventDefault();
-  //       this.navigateToNextItem();
-  //       break;
-  //     case 'Home':
-  //       keyboardEvent.preventDefault();
-  //       this.navigateToSpecificItem(0);
-  //       break;
-  //     case 'End':
-  //       keyboardEvent.preventDefault();
-  //       this.navigateToSpecificItem(this.totalItemsCount() - 1);
-  //       break;
-  //   }
-  // }
-
-  // private initializeCarouselItems(): void {
-  //   this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
-  //   this.totalItemsCount.set(this.carouselItemElements.length);
-
-  //   this.carouselItemElements.forEach((itemElement, itemIndex) => {
-  //     this.renderer.setStyle(itemElement, 'position', 'absolute');
-  //     this.renderer.setStyle(itemElement, 'inset', '0');
-  //     this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
-  //     this.renderer.setStyle(itemElement, 'display', 'flex');
-  //     this.renderer.setStyle(itemElement, 'align-items', 'center');
-  //     this.renderer.setStyle(itemElement, 'justify-content', 'center');
-  //     this.updateItemElementPosition(itemElement, itemIndex);
-  //   });
-  // }
-
-  // private setupTouchAndMouseEvents(): void {
-  //   const carouselContainerElement = this.carouselContainer.nativeElement;
-
-  //   const touchStartListener = this.renderer.listen(carouselContainerElement, 'touchstart', (event) => this.handleTouchStart(event));
-  //   const touchMoveListener = this.renderer.listen(carouselContainerElement, 'touchmove', (event) => this.handleTouchMove(event));
-  //   const touchEndListener = this.renderer.listen(carouselContainerElement, 'touchend', () => this.handleTouchEnd());
-
-  //   const mouseDownListener = this.renderer.listen(carouselContainerElement, 'mousedown', (event) => this.handleMouseDown(event));
-  //   const mouseMoveListener = this.renderer.listen(carouselContainerElement, 'mousemove', (event) => this.handleMouseMove(event));
-  //   const mouseUpListener = this.renderer.listen(carouselContainerElement, 'mouseup', () => this.handleMouseUp());
-  //   const mouseLeaveListener = this.renderer.listen(carouselContainerElement, 'mouseleave', () => this.handleMouseUp());
-
-  //   this.eventListenerCleanupFunctions.push(
-  //     touchStartListener,
-  //     touchMoveListener,
-  //     touchEndListener,
-  //     mouseDownListener,
-  //     mouseMoveListener,
-  //     mouseUpListener,
-  //     mouseLeaveListener
-  //   );
-
-  //   this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
-  // }
-
-  // private setupAccessibilityAttributes(): void {
-  //   const carouselContainerElement = this.carouselContainer.nativeElement;
-
-  //   this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
-  //   this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
-  //   this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
-  // }
-
-  // private handleTouchStart(touchEvent: TouchEvent): void {
-  //   this.initializeGesture(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-  // }
-
-  // private handleTouchMove(touchEvent: TouchEvent): void {
-  //   if (this.gestureState.isCurrentlyDragging) {
-  //     touchEvent.preventDefault();
-  //     this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-  //   }
-  // }
-
-  // private handleTouchEnd(): void {
-  //   this.finalizeGestureAndNavigate();
-  // }
-
-  // private handleMouseDown(mouseEvent: MouseEvent): void {
-  //   this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
-  // }
-
-  // private handleMouseMove(mouseEvent: MouseEvent): void {
-  //   if (this.gestureState.isCurrentlyDragging) {
-  //     mouseEvent.preventDefault();
-  //     this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
-  //   }
-  // }
-
-  // private handleMouseUp(): void {
-  //   this.finalizeGestureAndNavigate();
-  // }
-
-  // private initializeGesture(xPosition: number, yPosition: number): void {
-  //   this.gestureState = {
-  //     startPositionX: xPosition,
-  //     startPositionY: yPosition,
-  //     currentPositionX: xPosition,
-  //     currentPositionY: yPosition,
-  //     isCurrentlyDragging: true,
-  //     gestureStartTime: Date.now()
-  //   };
-  // }
-
-  // private updateGesturePosition(xPosition: number, yPosition: number): void {
-  //   if (!this.gestureState.isCurrentlyDragging) return;
-
-  //   this.gestureState.currentPositionX = xPosition;
-  //   this.gestureState.currentPositionY = yPosition;
-  // }
-
-  // private finalizeGestureAndNavigate(): void {
-  //   if (!this.gestureState.isCurrentlyDragging) return;
-
-  //   const horizontalDistanceMoved = this.gestureState.currentPositionX - this.gestureState.startPositionX;
-  //   const verticalDistanceMoved = this.gestureState.currentPositionY - this.gestureState.startPositionY;
-  //   const gestureDuration = Date.now() - this.gestureState.gestureStartTime;
-  //   const gestureVelocity = Math.abs(horizontalDistanceMoved) / gestureDuration;
-
-  //   if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
-  //     const isValidSwipeGesture = Math.abs(horizontalDistanceMoved) > this.MINIMUM_SWIPE_DISTANCE ||
-  //       (gestureVelocity > this.MINIMUM_SWIPE_VELOCITY && gestureDuration < this.MAXIMUM_SWIPE_DURATION);
-
-  //     if (isValidSwipeGesture) {
-  //       if (horizontalDistanceMoved > 0) {
-  //         this.navigateToPreviousItem();
-  //       } else {
-  //         this.navigateToNextItem();
-  //       }
-  //     }
-  //   }
-  //   this.gestureState.isCurrentlyDragging = false;
-  // }
+  private handleMouseUp(): void {
+    this.finalizeGestureAndNavigate();
+  }
+
+  private initializeGesture(xPosition: number, yPosition: number): void {
+    this.gestureState = {
+      startPositionX: xPosition,
+      startPositionY: yPosition,
+      currentPositionX: xPosition,
+      currentPositionY: yPosition,
+      isCurrentlyDragging: true,
+      gestureStartTime: Date.now()
+    };
+  }
+
+  private updateGesturePosition(xPosition: number, yPosition: number): void {
+    if (!this.gestureState.isCurrentlyDragging) return;
+
+    this.gestureState.currentPositionX = xPosition;
+    this.gestureState.currentPositionY = yPosition;
+  }
+
+  private finalizeGestureAndNavigate(): void {
+    if (!this.gestureState.isCurrentlyDragging) return;
+
+    const horizontalDistanceMoved = this.gestureState.currentPositionX - this.gestureState.startPositionX;
+    const verticalDistanceMoved = this.gestureState.currentPositionY - this.gestureState.startPositionY;
+    const gestureDuration = Date.now() - this.gestureState.gestureStartTime;
+    const gestureVelocity = Math.abs(horizontalDistanceMoved) / gestureDuration;
+
+    if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
+      const isValidSwipeGesture = Math.abs(horizontalDistanceMoved) > this.MINIMUM_SWIPE_DISTANCE ||
+        (gestureVelocity > this.MINIMUM_SWIPE_VELOCITY && gestureDuration < this.MAXIMUM_SWIPE_DURATION);
+
+      if (isValidSwipeGesture) {
+        if (horizontalDistanceMoved > 0) {
+          this.navigateToPreviousItem();
+        } else {
+          this.navigateToNextItem();
+        }
+      }
+    }
+    this.gestureState.isCurrentlyDragging = false;
+  }
 }

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

@@ -0,0 +1,9 @@
+<div class="relative inline-block tooltip-wrapper " (mouseenter)="show()" (mouseleave)="hide()" (focus)="show()" (blur)="hide()">
+    <ng-content></ng-content>
+
+    @if (visible() && !disabled()) {
+        <div #tooltipElement [id]="tooltipId" [class]="tooltipClasses()" role="tooltip" [attr.aria-hidden]="!visible()">
+            {{ text() }}
+        </div>
+    }
+</div>