wally-ui 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.7.0",
+  "version": "1.8.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/components/carousel/carousel.html

@@ -1,38 +1,31 @@
 <div class="w-full flex flex-col items-center gap-4">
-    <div class="relative w-64 h-40 overflow-hidden rounded-lg shadow">
-        @for (item of items; track item; let i = $index) {
-            <div class="absolute inset-0 flex items-center justify-center bg-blue-500 text-white text-2xl
-                        transition-all duration-700 ease-in-out"
-                 [ngClass]="{
-                    'translate-x-0 opacity-100': i === itemVisible(),
-                    'translate-x-full opacity-0': i > itemVisible(),
-                    '-translate-x-full opacity-0': i < itemVisible()
-                 }">
-                {{ item }}
-            </div>
-        }
+    <div class="relative w-96 h-96 overflow-hidden shadow rounded-lg" #carouselContainer>
+        <ng-content></ng-content>
     </div>
 
-    <div class="flex gap-2">
-        @for (item of items; track item; let i = $index) {
+    <div class="flex items-center gap-3">
+        @for (navigationDot of navigationDotsArray; track $index; let dotIndex = $index) {
             <button
-                class="w-2 h-2 rounded-full transition-all duration-300"
+                class="size-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"
                 [ngClass]="{
-                    'bg-blue-500 scale-125': i === itemVisible(),
-                    'bg-gray-300 hover:bg-gray-400': i !== itemVisible()
+                    'bg-blue-500 border scale-150': dotIndex === currentVisibleItemIndex(),
+                    'bg-white hover:bg-gray-400 hover:scale-125': dotIndex !== currentVisibleItemIndex()
                 }"
-                (click)="goToSlide(i)">
+                (click)="navigateToSpecificItem(dotIndex)"
+                [attr.aria-label]="'Navigate to slide ' + (dotIndex + 1)">
             </button>
         }
     </div>
 
     <div class="flex gap-4">
         <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
-                (click)="goPrevios()">
-            Previos
+                (click)="navigateToPreviousItem()"
+                aria-label="Go to previous slide">
+            Previous
         </button>
         <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
-                (click)="goNext()">
+                (click)="navigateToNextItem()"
+                aria-label="Go to next slide">
             Next
         </button>
     </div>

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

@@ -1,4 +1,4 @@
-import { Component, input, OnInit, signal } from '@angular/core';
+import { Component, input, OnInit, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -6,32 +6,252 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
   templateUrl: './carousel.html',
 })
-export class Carousel implements OnInit {
-  items = [1, 2, 3, 4];
-  itemVisible = signal<number>(0);
+export class Carousel implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
+
+  totalItemsCount = signal<number>(0);
+  currentVisibleItemIndex = signal<number>(0);
+  carouselItemElements: HTMLElement[] = [];
+
+  // Touch and swipe gesture state
+  private gestureState = {
+    startPositionX: 0,
+    startPositionY: 0,
+    currentPositionX: 0,
+    currentPositionY: 0,
+    isCurrentlyDragging: false,
+    gestureStartTime: 0
+  };
+
+  // Configuration constants for touch and swipe behavior
+  private readonly MINIMUM_SWIPE_DISTANCE = 50; // minimum pixels to register as swipe
+  private readonly MINIMUM_SWIPE_VELOCITY = 0.3; // minimum velocity to register as swipe
+  private readonly MAXIMUM_SWIPE_DURATION = 300; // maximum milliseconds for swipe gesture
+
+  // Event listener cleanup functions
+  private eventListenerCleanupFunctions: (() => void)[] = [];
+
+  get navigationDotsArray() {
+    return Array(this.totalItemsCount()).fill(0);
+  }
+
+  constructor(private renderer: Renderer2) { }
 
   ngOnInit(): void {
   }
 
-  // test - algorithm Circular Buffer:
-  nextIndex(currentIndex: number): number {
-    return (currentIndex + 1) % this.items.length;
+  ngAfterViewInit(): void {
+    if (this.carouselContainer) {
+      this.initializeCarouselItems();
+      this.setupTouchAndMouseEvents();
+      this.setupAccessibilityAttributes();
+    }
+  }
+
+  ngOnDestroy(): void {
+    // Clean up all event listeners to prevent memory leaks
+    this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
+  }
+
+  private initializeCarouselItems(): void {
+    // Get all direct children elements of the carousel container
+    this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
+    this.totalItemsCount.set(this.carouselItemElements.length);
+
+    // Apply positioning and styling to each carousel item using Renderer2
+    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;
+
+    // Touch events for mobile devices
+    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());
+
+    // Mouse events for desktop devices
+    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());
+
+    // Store all cleanup functions for proper memory management
+    this.eventListenerCleanupFunctions.push(
+      touchStartListener,
+      touchMoveListener,
+      touchEndListener,
+      mouseDownListener,
+      mouseMoveListener,
+      mouseUpListener,
+      mouseLeaveListener
+    );
+
+    // Optimize touch performance by restricting to horizontal panning only
+    this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
+  }
+
+  private setupAccessibilityAttributes(): void {
+    const carouselContainerElement = this.carouselContainer.nativeElement;
+
+    // Set ARIA attributes for screen readers and accessibility
+    this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
+    this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
+    this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
+  }
+
+  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
+    const currentVisibleIndex = this.currentVisibleItemIndex();
+
+    if (itemIndex === currentVisibleIndex) {
+      // Position the currently visible item at center (0% translation)
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
+    } else if (itemIndex > currentVisibleIndex) {
+      // Position items to the right of current item (110% translation to the right)
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
+    } else {
+      // Position items to the left of current item (110% translation to the left)
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
+    }
+  }
+
+  updateAllItemElementPositions(): void {
+    this.carouselItemElements.forEach((itemElement, itemIndex) => {
+      this.updateItemElementPosition(itemElement, itemIndex);
+    });
+  }
+
+  // Touch event handlers for mobile devices
+  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(); // Prevent page scrolling during swipe
+      this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+    }
+  }
+
+  private handleTouchEnd(): void {
+    this.finalizeGestureAndNavigate();
+  }
+
+  // Mouse event handlers for desktop devices
+  private handleMouseDown(mouseEvent: MouseEvent): void {
+    this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
+  }
+
+  private handleMouseMove(mouseEvent: MouseEvent): void {
+    if (this.gestureState.isCurrentlyDragging) {
+      mouseEvent.preventDefault(); // Prevent text selection during drag
+      this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
+    }
+  }
+
+  private handleMouseUp(): void {
+    this.finalizeGestureAndNavigate();
+  }
+
+  // Unified gesture handling methods
+  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;
+
+    // Only process horizontal swipes (ignore vertical movements)
+    if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
+      // Check if gesture meets minimum requirements for navigation
+      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(); // Swipe right = go to previous item
+        } else {
+          this.navigateToNextItem(); // Swipe left = go to next item
+        }
+      }
+    }
+
+    // Reset gesture state after processing
+    this.gestureState.isCurrentlyDragging = false;
+  }
+
+  // Keyboard navigation handler
+  @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;
+    }
+  }
+
+  // Circular buffer algorithm implementation for infinite carousel navigation
+  calculateNextItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex + 1) % this.totalItemsCount();
   }
 
-  previosIndex(currentIndex: number): number {
-    return (currentIndex - 1 + this.items.length) % this.items.length;
+  calculatePreviousItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
   }
 
-  goNext(): void {
-    this.itemVisible.set(this.nextIndex(this.itemVisible()));
+  navigateToNextItem(): void {
+    this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
   }
 
-  goPrevios(): void {
-    this.itemVisible.set(this.previosIndex(this.itemVisible()));
+  navigateToPreviousItem(): void {
+    this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
   }
 
-  goToSlide(index: number): void {
-    this.itemVisible.set(index);
+  navigateToSpecificItem(targetItemIndex: number): void {
+    this.currentVisibleItemIndex.set(targetItemIndex);
+    this.updateAllItemElementPositions();
   }
   // end test Circular Buffer ---
 }

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.examples.ts

@@ -13,5 +13,36 @@ export const CarouselCodeExamples = {
 })`,
 
   // Basic usage
-  basicUsage: `<wally-carousel></wally-carousel>`,
+  basicUsage: `<wally-carousel>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</wally-carousel>`,
+
+  // Custom content example
+  customContent: `<wally-carousel>
+  <div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
+    <h3 class="text-xl font-bold mb-2">Feature 1</h3>
+    <p class="text-center text-sm">Custom slide with rich content</p>
+  </div>
+  <div class="w-full h-full bg-gradient-to-r from-green-500 to-blue-500 text-white flex flex-col items-center justify-center p-6">
+    <h3 class="text-xl font-bold mb-2">Feature 2</h3>
+    <p class="text-center text-sm">Another slide with different styling</p>
+  </div>
+</wally-carousel>`,
+
+  // Properties
+  properties: `// Component properties
+// The carousel automatically detects child elements and creates navigation
+// Currently no input properties - content projection only
+
+// Available interactions:
+// • Click navigation buttons (Previous/Next)
+// • Click dot indicators for direct navigation
+// • Touch/swipe gestures on mobile and desktop
+// • Keyboard navigation (Arrow keys, Home, End)
+
+// Auto-detected features:
+totalItemsCount: number;              // Automatically set based on child elements
+currentVisibleItemIndex: number;     // Currently visible slide index (0-based)
+navigationDotsArray: any[];          // Auto-generated dot indicators`
 };

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html

@@ -8,14 +8,14 @@
       Carousel
     </h1>
     <p class="text-gray-700 dark:text-gray-400 mb-4">
-      A smooth carousel component with navigation controls, dot indicators, and elegant transitions.
+      A carousel component with navigation controls, touch gestures, and smooth transitions.
     </p>
 
     <!-- Under Construction Badge -->
     <div class="mb-6">
       <span class="text-xs bg-yellow-500 text-black px-3 py-1 rounded-full font-medium">Under Construction</span>
       <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
-        This component is actively being developed. Features like auto-play, touch gestures, and customization options are coming soon!
+        This component is actively being developed. Touch gestures, accessibility, and customization options are coming soon.
       </p>
     </div>
 
@@ -63,7 +63,17 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
       <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
         <div class="flex justify-center">
-          <wally-carousel></wally-carousel>
+          <wally-carousel>
+            <div class="w-full h-full bg-blue-500 text-white flex items-center justify-center text-lg font-semibold">
+              Slide 1
+            </div>
+            <div class="w-full h-full bg-green-500 text-white flex items-center justify-center text-lg font-semibold">
+              Slide 2
+            </div>
+            <div class="w-full h-full bg-purple-500 text-white flex items-center justify-center text-lg font-semibold">
+              Slide 3
+            </div>
+          </wally-carousel>
         </div>
       </div>
     </section>
@@ -90,91 +100,57 @@
       </div>
       <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
         <div class="flex justify-center">
-          <wally-carousel></wally-carousel>
+          <wally-carousel>
+            <div class="w-full h-full bg-blue-400 text-white flex items-center justify-center">
+              Item 1
+            </div>
+            <div class="w-full h-full bg-green-400 text-white flex items-center justify-center">
+              Item 2
+            </div>
+          </wally-carousel>
         </div>
       </div>
     </section>
 
-    <!-- Current Features -->
+    <!-- Advanced Examples -->
     <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Current Features</h2>
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Advanced Examples</h2>
 
-      <div class="space-y-4">
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Circular Buffer Algorithm</h3>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Infinite navigation using circular buffer data structure for seamless looping.
-          </p>
-        </div>
-
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Smooth Transitions</h3>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Tailwind CSS v4 powered transitions with transform and opacity animations.
-          </p>
+      <!-- Custom Content Example -->
+      <div class="mb-6">
+        <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Custom Content</h3>
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+          <pre><code [innerHTML]="customContentCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
-
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Navigation Controls</h3>
+        <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+          <div class="flex justify-center">
+            <wally-carousel>
+              <div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
+                <h3 class="text-xl font-bold mb-2">Feature 1</h3>
+                <p class="text-center text-sm">This is a custom slide with rich content</p>
+              </div>
+              <div class="w-full h-full bg-gradient-to-r from-green-500 to-blue-500 text-white flex flex-col items-center justify-center p-6">
+                <h3 class="text-xl font-bold mb-2">Feature 2</h3>
+                <p class="text-center text-sm">Another slide with different styling</p>
+              </div>
+              <div class="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex flex-col items-center justify-center p-6">
+                <h3 class="text-xl font-bold mb-2">Feature 3</h3>
+                <p class="text-center text-sm">Beautiful gradients and typography</p>
+              </div>
+            </wally-carousel>
           </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Previous/Next buttons and dot indicators for direct slide navigation.
-          </p>
         </div>
       </div>
     </section>
 
-    <!-- Future Features -->
+    <!-- Properties -->
     <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Future Features</h2>
-
-      <div class="space-y-4">
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Auto-play</h3>
-            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Automatic slide progression with configurable intervals and pause on hover.
-          </p>
-        </div>
-
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Touch Gestures</h3>
-            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Swipe support for mobile devices with momentum scrolling and gesture recognition.
-          </p>
-        </div>
-
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
-            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            ARIA labels, keyboard navigation, and screen reader support for better accessibility.
-          </p>
-        </div>
-
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Custom Content</h3>
-            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            Support for custom slide content through content projection and templates.
-          </p>
-        </div>
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
+      <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+        <pre><code [innerHTML]="propertiesCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 
+
   </div>
 </div>

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.ts

@@ -29,6 +29,8 @@ export class CarouselDocs {
   importCode = getFormattedCode(CarouselCodeExamples.import, 'typescript');
   componentImportCode = getFormattedCode(CarouselCodeExamples.componentImport, 'typescript');
   basicUsageCode = getFormattedCode(CarouselCodeExamples.basicUsage, 'html');
+  customContentCode = getFormattedCode(CarouselCodeExamples.customContent, 'html');
+  propertiesCode = getFormattedCode(CarouselCodeExamples.properties, 'typescript');
 
   constructor(
     private aiPromptService: AiPromptService

package/playground/showcase/src/app/pages/home/home.html

@@ -1,5 +1,4 @@
 <div class="h-dvh antialiased font-mono">
-    <wally-carousel></wally-carousel>
     <div class="w-full h-full flex flex-col items-center justify-center p-4">
         <div class="max-w-md">
             <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white">

package/playground/showcase/src/app/pages/home/home.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
-import { Carousel } from '../../components/carousel/carousel';
 
 @Component({
   selector: 'wally-home',
-  imports: [Carousel],
+  imports: [],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })