wally-ui 1.11.1 → 1.12.0

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

@@ -0,0 +1,189 @@
+import { Component, computed, effect, ElementRef, input, InputSignal, OnDestroy, signal, ViewChild, WritableSignal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+
+@Component({
+  selector: 'wally-tooltip',
+  imports: [CommonModule],
+  templateUrl: './tooltip.html',
+  styleUrl: './tooltip.css'
+})
+export class Tooltip implements OnDestroy {
+  @ViewChild('tooltipElement', { read: ElementRef }) tooltipElement?: ElementRef<HTMLDivElement>;
+
+  text: InputSignal<string> = input.required<string>();
+  position: InputSignal<TooltipPosition> = input<TooltipPosition>('auto');
+  delay: InputSignal<number> = input<number>(200);
+  disabled: InputSignal<boolean> = input<boolean>(false);
+  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)}`;
+
+  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 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()}`
+    };
+
+    // Animação super suave - apenas fade rápido
+    const animation = this.visible()
+      ? 'transition-opacity duration-150 opacity-100'
+      : 'transition-opacity duration-100 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) {
+      window.clearTimeout(this.showTimeout);
+    }
+    if (this.hideTimeout) {
+      window.clearTimeout(this.hideTimeout);
+    }
+  }
+
+  show(): void {
+    if (this.disabled()) {
+      return;
+    }
+
+    if (this.hideTimeout) {
+      window.clearTimeout(this.hideTimeout);
+      this.hideTimeout = undefined;
+    }
+
+    this.showTimeout = window.setTimeout(() => {
+      this.visible.set(true);
+
+      if (this.position() !== 'auto') {
+        this.actualPosition.set(this.position() as Exclude<TooltipPosition, 'auto'>);
+      }
+    }, this.delay());
+  }
+
+  hide(): void {
+    if (this.showTimeout) {
+      window.clearTimeout(this.showTimeout);
+      this.showTimeout = undefined;
+    }
+
+    this.hideTimeout = window.setTimeout(() => {
+      this.visible.set(false);
+    }, 100);
+  }
+
+  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 tooltipWidth = tooltipRect.width || 150;
+    const tooltipHeight = tooltipRect.height || 40;
+
+    const positions: {
+      position: Exclude<TooltipPosition, 'auto'>; space: number; isValid: boolean}[] = [
+        {
+          position: 'top',
+          space: spaceAbove,
+          isValid: spaceAbove >= tooltipHeight + offset
+        },
+        {
+          position: 'bottom',
+          space: spaceBelow,
+          isValid: spaceBelow >= tooltipHeight + offset
+        },
+        {
+          position: 'left',
+          space: spaceLeft,
+          isValid: spaceLeft >= tooltipWidth + offset
+        },
+        {
+          position: 'right',
+          space: spaceRight,
+          isValid: spaceRight >= tooltipWidth + offset
+        }
+      ];
+
+    const priorityOrder: Exclude<TooltipPosition, 'auto'>[] = ['top', 'bottom', 'right', 'left'];
+
+    let bestPosition: Exclude<TooltipPosition, 'auto'> = 'top';
+
+    for (const preferred of priorityOrder) {
+      const pos = positions.find(p => p.position === preferred);
+      if (pos?.isValid) {
+        bestPosition = preferred;
+        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;
+    }
+
+    this.actualPosition.set(bestPosition);
+
+    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)`;
+        }
+      }
+
+      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)`;
+        }
+      }
+    }, 0);
+  }
+}

package/playground/showcase/src/app/pages/documentation/chat-sdk/chat-sdk.html

@@ -0,0 +1,99 @@
+<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
+  <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
+
+    <!-- Breadcrumb Navigation -->
+    <nav class="mb-8" aria-label="Breadcrumb navigation">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </nav>
+
+    <!-- Header -->
+    <header class="mb-12" role="banner">
+      <div class="flex items-center gap-3 mb-4">
+        <h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white uppercase">
+          <span aria-hidden="true">&gt;_ </span>Chat SDK
+        </h1>
+        <span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: Coming Soon">
+          COMING SOON
+        </span>
+      </div>
+      <p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
+        Complete chat development SDK with AI interface, message matrix navigation, streaming data service, and full visual customization using Wally UI components.
+      </p>
+    </header>
+
+    <!-- Live Demo -->
+    <section id="live-demo" class="mb-12" aria-labelledby="demo-heading">
+      <h2 id="demo-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Live Demo ]
+      </h2>
+      <div class="bg-white dark:bg-[#0a0a0a] border-2 border-neutral-300 dark:border-neutral-700 p-6">
+        <wally-ai-chat></wally-ai-chat>
+      </div>
+    </section>
+
+    <!-- Features Overview -->
+    <section id="features" class="mb-12" aria-labelledby="features-heading">
+      <h2 id="features-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Features Overview ]
+      </h2>
+
+      <div class="space-y-4">
+        <article class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Message Matrix Navigation
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Advanced conversation branching with matrix-style navigation. Track multiple AI responses (ai: 1/2, 1/3) and user messages (me: 1/1) with intuitive side-to-side navigation between conversation branches.
+          </p>
+        </article>
+
+        <article class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Streaming Data Service
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Enterprise-grade streaming service for real-time AI responses. Handles SSE (Server-Sent Events), WebSocket connections, and progressive message rendering with automatic retry logic.
+          </p>
+        </article>
+
+        <article class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Wally UI Components
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Built entirely with Wally UI components: AI Composer for message input, AI Prompt Input with auto-resize, custom scrollbars, and complete dark mode support. Fully accessible and SSR-ready.
+          </p>
+        </article>
+
+        <article class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Visual Customization
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Complete visual control over chat interface: message bubbles, avatars, timestamps, typing indicators, and markdown rendering. All styles customizable via Tailwind CSS classes.
+          </p>
+        </article>
+      </div>
+    </section>
+
+    <!-- Coming Soon Notice -->
+    <section id="status" class="mb-12" aria-labelledby="status-heading">
+      <h2 id="status-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-3">
+        [ Development Status ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border-2 border-neutral-300 dark:border-neutral-700 p-4">
+        <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed mb-3">
+          The Chat SDK is currently in active development. The demo above shows the current progress with the AI Composer component. Full release will include:
+        </p>
+        <ul class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 space-y-2 ml-4">
+          <li><span aria-hidden="true">▸ </span>Complete message matrix implementation</li>
+          <li><span aria-hidden="true">▸ </span>Streaming data service with retry logic</li>
+          <li><span aria-hidden="true">▸ </span>Full chat history and conversation management</li>
+          <li><span aria-hidden="true">▸ </span>Markdown rendering with code syntax highlighting</li>
+          <li><span aria-hidden="true">▸ </span>Installation via CLI: <span class="bg-neutral-200 dark:bg-neutral-800 px-2 py-1 rounded">npx wally-ui add chat-sdk</span></li>
+        </ul>
+      </div>
+    </section>
+
+  </div>
+</main>

package/playground/showcase/src/app/pages/documentation/chat-sdk/chat-sdk.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
+import { AiChat } from '../../../components/ai/ai-chat/ai-chat';
+
+@Component({
+  selector: 'app-chat-sdk',
+  imports: [
+    Breadcrumb,
+    AiChat
+  ],
+  templateUrl: './chat-sdk.html'
+})
+export class ChatSdk {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Chat SDK' }
+  ];
+}

package/playground/showcase/src/app/pages/documentation/components/components.html

@@ -128,6 +128,29 @@
           </a>
         </article>
 
+        <!-- Tooltip Component -->
+        <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article" aria-labelledby="tooltip-heading">
+          <a href="/documentation/components/tooltip"
+             class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+             aria-label="Navigate to Tooltip component documentation with smart auto-positioning, overflow detection, and accessibility features">
+            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+              <div class="flex-1">
+                <div class="flex items-center gap-3 mb-2">
+                  <h3 id="tooltip-heading" class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
+                    <span aria-hidden="true">&gt;_ </span>Tooltip
+                  </h3>
+                  <span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: New Component">
+                    NEW
+                  </span>
+                </div>
+                <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
+                  Smart tooltip with auto-positioning, overflow detection, smooth animations, and arrow indicator. Wraps any element with full ARIA support and keyboard navigation. Rich content support coming in v2.0.
+                </p>
+              </div>
+            </div>
+          </a>
+        </article>
+
       </div>
     </section>
 

package/playground/showcase/src/app/pages/documentation/components/components.routes.ts

@@ -20,5 +20,9 @@ export const componentsRoutes: Routes = [
     {
         path: 'carousel',
         loadComponent: () => import('./carousel-docs/carousel-docs').then(m => m.CarouselDocs)
+    },
+    {
+        path: 'tooltip',
+        loadComponent: () => import('./tooltip-docs/tooltip-docs').then(m => m.TooltipDocs)
     }
 ];

package/playground/showcase/src/app/pages/documentation/components/tooltip-docs/tooltip-docs.css

@@ -0,0 +1 @@
+/* Tooltip documentation styles - Retro terminal theme */

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

@@ -0,0 +1,150 @@
+export const TooltipCodeExamples = {
+  installation: `npx wally-ui add tooltip`,
+
+  import: `// app.component.ts or your module file
+import { Tooltip } from './components/tooltip/tooltip';`,
+
+  componentImport: `@Component({
+  selector: 'app-root',
+  imports: [Tooltip],
+  // ...
+})`,
+
+  basicUsage: `<wally-tooltip text="This is a tooltip">
+  <button>Hover me</button>
+</wally-tooltip>`,
+
+  positions: `<!-- Auto positioning (default) -->
+<wally-tooltip text="Auto positioned" position="auto">
+  <button>Auto</button>
+</wally-tooltip>
+
+<!-- Fixed positions -->
+<wally-tooltip text="Always on top" position="top">
+  <button>Top</button>
+</wally-tooltip>
+
+<wally-tooltip text="Always on bottom" position="bottom">
+  <button>Bottom</button>
+</wally-tooltip>
+
+<wally-tooltip text="Always on left" position="left">
+  <button>Left</button>
+</wally-tooltip>
+
+<wally-tooltip text="Always on right" position="right">
+  <button>Right</button>
+</wally-tooltip>`,
+
+  withButton: `<wally-tooltip text="Save your changes">
+  <wally-button variant="primary">Save</wally-button>
+</wally-tooltip>`,
+
+  withIcon: `<wally-tooltip text="Send message">
+  <wally-button [variant]="'ghost'" [rounded]="true" ariaLabel="Send">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+    </svg>
+  </wally-button>
+</wally-tooltip>`,
+
+  customDelay: `<!-- Fast tooltip (100ms) -->
+<wally-tooltip text="Quick tooltip" [delay]="100">
+  <button>Fast</button>
+</wally-tooltip>
+
+<!-- Slow tooltip (500ms) -->
+<wally-tooltip text="Delayed tooltip" [delay]="500">
+  <button>Slow</button>
+</wally-tooltip>`,
+
+  disabled: `<wally-tooltip text="This won't show" [disabled]="true">
+  <button>Disabled Tooltip</button>
+</wally-tooltip>`,
+
+  customOffset: `<!-- More spacing from element -->
+<wally-tooltip text="More space" [offset]="4">
+  <button>Large offset</button>
+</wally-tooltip>
+
+<!-- Less spacing from element -->
+<wally-tooltip text="Close" [offset]="1">
+  <button>Small offset</button>
+</wally-tooltip>`,
+
+  dashboard: `<!-- Toolbar with tooltips -->
+<div class="flex gap-2">
+  <wally-tooltip text="Export data to CSV">
+    <wally-button variant="outline" ariaLabel="Export">
+      <svg class="size-5"><!-- Export icon --></svg>
+    </wally-button>
+  </wally-tooltip>
+
+  <wally-tooltip text="Refresh dashboard">
+    <wally-button variant="outline" ariaLabel="Refresh">
+      <svg class="size-5"><!-- Refresh icon --></svg>
+    </wally-button>
+  </wally-tooltip>
+
+  <wally-tooltip text="Settings">
+    <wally-button variant="outline" ariaLabel="Settings">
+      <svg class="size-5"><!-- Settings icon --></svg>
+    </wally-button>
+  </wally-tooltip>
+</div>`,
+
+  formField: `<!-- Form field with help tooltip -->
+<div class="flex items-start gap-2">
+  <wally-input label="Email" type="email" placeholder="your@email.com" class="flex-1" />
+  <wally-tooltip text="We'll never share your email">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 text-neutral-500 cursor-help mt-[30px]">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+    </svg>
+  </wally-tooltip>
+</div>`,
+
+  navigation: `<!-- Navigation with tooltips -->
+<nav class="flex flex-col gap-2">
+  <wally-tooltip text="Dashboard" position="right">
+    <a href="/dashboard" class="p-2">
+      <svg class="size-6"><!-- Dashboard icon --></svg>
+    </a>
+  </wally-tooltip>
+
+  <wally-tooltip text="Analytics" position="right">
+    <a href="/analytics" class="p-2">
+      <svg class="size-6"><!-- Analytics icon --></svg>
+    </a>
+  </wally-tooltip>
+
+  <wally-tooltip text="Settings" position="right">
+    <a href="/settings" class="p-2">
+      <svg class="size-6"><!-- Settings icon --></svg>
+    </a>
+  </wally-tooltip>
+</nav>`,
+
+  avatar: `<!-- User avatar with name tooltip -->
+<wally-tooltip text="John Doe (john@example.com)">
+  <img src="avatar.jpg" alt="User avatar" class="size-10 rounded-full cursor-pointer" />
+</wally-tooltip>`,
+
+  statusBadge: `<!-- Status badge with details tooltip -->
+<wally-tooltip text="Last updated: 2 minutes ago">
+  <span class="px-2 py-1 bg-green-500 text-white text-xs rounded-full cursor-help">
+    Active
+  </span>
+</wally-tooltip>`,
+
+  richContent: `<!-- Future API (v2.0.0) -->
+<wally-tooltip>
+  <div class="p-4">
+    <img src="preview.jpg" />
+    <h4>Custom Content</h4>
+    <p>Any HTML here</p>
+  </div>
+
+  <!-- Trigger element -->
+  <button>Show Rich Tooltip</button>
+</wally-tooltip>`,
+};