wally-ui 1.14.0 → 1.15.0

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

@@ -0,0 +1,124 @@
+import { Component, signal, WritableSignal } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { AudioWaveformCodeExamples } from './audio-waveform-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { AudioWaveform } from '../../../../components/audio-waveform/audio-waveform';
+import { Button } from '../../../../components/button/button';
+
+@Component({
+  selector: 'app-audio-waveform-docs',
+  imports: [
+    Breadcrumb,
+    AudioWaveform,
+    Button
+  ],
+  templateUrl: './audio-waveform-docs.html',
+  styleUrl: './audio-waveform-docs.css'
+})
+export class AudioWaveformDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Audio Waveform' }
+  ];
+
+  // Installation & Import
+  installationCode = getFormattedCode(AudioWaveformCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(AudioWaveformCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(AudioWaveformCodeExamples.componentImport, 'typescript');
+
+  // Basic Usage
+  basicUsageCode = getFormattedCode(AudioWaveformCodeExamples.basicUsage, 'html');
+  withTimerCode = getFormattedCode(AudioWaveformCodeExamples.withTimer, 'html');
+  completeExampleCode = getFormattedCode(AudioWaveformCodeExamples.completeExample, 'html');
+  completeExampleTsCode = getFormattedCode(AudioWaveformCodeExamples.completeExampleTs, 'typescript');
+
+  // Service Integration
+  serviceIntegrationCode = getFormattedCode(AudioWaveformCodeExamples.serviceIntegration, 'typescript');
+
+  // Configuration
+  responsiveConfigCode = getFormattedCode(AudioWaveformCodeExamples.responsiveConfig, 'typescript');
+  webAudioConceptsCode = getFormattedCode(AudioWaveformCodeExamples.webAudioConcepts, 'typescript');
+
+  // Future Features
+  futureTranscriptionCode = getFormattedCode(AudioWaveformCodeExamples.futureTranscription, 'html');
+
+  // Properties
+  propertyIsStartRecordingCode = getFormattedCode(AudioWaveformCodeExamples.propertyIsStartRecording, 'typescript');
+  propertyIsStopRecordingCode = getFormattedCode(AudioWaveformCodeExamples.propertyIsStopRecording, 'typescript');
+  propertyShowTimerCode = getFormattedCode(AudioWaveformCodeExamples.propertyShowTimer, 'typescript');
+
+  // Service Properties
+  servicePropertyIsRecordingCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyIsRecording, 'typescript');
+  servicePropertyAudioDataCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyAudioData, 'typescript');
+  servicePropertyRecordedAudioBlobCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyRecordedAudioBlob, 'typescript');
+  servicePropertyRecordedAudioUrlCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyRecordedAudioUrl, 'typescript');
+
+  // Methods
+  methodDownloadRecordingCode = getFormattedCode(AudioWaveformCodeExamples.methodDownloadRecording, 'typescript');
+  methodClearRecordingCode = getFormattedCode(AudioWaveformCodeExamples.methodClearRecording, 'typescript');
+
+  // Configuration
+  configFFTSizeCode = getFormattedCode(AudioWaveformCodeExamples.configFFTSize, 'typescript');
+  configBarCountCode = getFormattedCode(AudioWaveformCodeExamples.configBarCount, 'typescript');
+  configSmoothingCode = getFormattedCode(AudioWaveformCodeExamples.configSmoothing, 'typescript');
+
+  // Accessibility & Browser Support
+  accessibilityExampleCode = getFormattedCode(AudioWaveformCodeExamples.accessibilityExample, 'html');
+  browserSupportCode = getFormattedCode(AudioWaveformCodeExamples.browserSupport, 'typescript');
+
+  // Interactive demo state
+  isRecording: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithoutTimer: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithTimer: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithDownload: WritableSignal<boolean> = signal<boolean>(false);
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  startRecording(): void {
+    this.isRecording.set(true);
+  }
+
+  stopRecording(): void {
+    this.isRecording.set(false);
+  }
+
+  startRecordingWithoutTimer(): void {
+    this.isRecordingWithoutTimer.set(true);
+  }
+
+  stopRecordingWithoutTimer(): void {
+    this.isRecordingWithoutTimer.set(false);
+  }
+
+  startRecordingWithTimer(): void {
+    this.isRecordingWithTimer.set(true);
+  }
+
+  stopRecordingWithTimer(): void {
+    this.isRecordingWithTimer.set(false);
+  }
+
+  startRecordingWithDownload(): void {
+    this.isRecordingWithDownload.set(true);
+  }
+
+  stopRecordingWithDownload(): void {
+    this.isRecordingWithDownload.set(false);
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

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

@@ -40,6 +40,33 @@
       </h2>
 
       <div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
+        <!-- Audio Waveform Component -->
+        <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
+          aria-labelledby="audio-waveform-heading">
+          <a href="/documentation/components/audio-waveform"
+            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 Audio Waveform component documentation with real-time FFT analysis, responsive bar count, and audio recording">
+            <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="audio-waveform-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>Audio Waveform
+                  </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">
+                  Real-time audio visualizer with Web Audio API, FFT frequency analysis, responsive bar count (mobile/desktop), 60fps animations, and automatic recording to WebM. Audio transcription coming soon.
+                </p>
+              </div>
+            </div>
+          </a>
+        </article>
+
         <!-- Breadcrumb Component -->
         <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
           aria-labelledby="breadcrumb-heading">

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

@@ -32,5 +32,9 @@ export const componentsRoutes: Routes = [
     {
         path: 'selection-popover',
         loadComponent: () => import('./selection-popover-docs/selection-popover-docs').then(m => m.SelectionPopoverDocs)
+    },
+    {
+        path: 'audio-waveform',
+        loadComponent: () => import('./audio-waveform-docs/audio-waveform-docs').then(m => m.AudioWaveformDocs)
     }
 ];

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

@@ -168,6 +168,10 @@ export const SelectionPopoverCodeExamples = {
   </div>
 </wally-selection-popover>`,
 
+  // === MOBILE SUPPORT ===
+
+  mobileSupport: `<!-- Automatic mobile support -->\n<wally-selection-popover (textSelected)="onSelect($event)">\n  <!-- Works seamlessly on mobile devices:\n       - Touch event support (touchstart, touchend)\n       - Native selection menu prevention\n       - Viewport-aware positioning (avoids virtual keyboard)\n       - Larger touch targets on mobile (44x44px minimum)\n       - Touch scroll prevention on popover\n       - Adaptive delays for better touch detection\n  -->\n\n  <article>\n    <p>Try selecting text on mobile - the popover automatically adapts!</p>\n  </article>\n</wally-selection-popover>`,
+
   // === ADVANCED ===
 
   minSelectionLength: `<!-- Custom minimum selection length -->

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

@@ -332,6 +332,48 @@
           </div>
         </div>
       </article>
+
+      <!-- Mobile Support -->
+      <article class="mb-8" aria-labelledby="mobile-support-heading">
+        <h3 id="mobile-support-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Mobile Support
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          The component works seamlessly on mobile devices with automatic optimizations for touch interactions. All features are enabled by default with zero configuration.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="mobileSupportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 p-4">
+          <h4 class="text-xs font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">Automatic Mobile Features:</h4>
+          <ul class="space-y-2 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Touch event support (touchstart, touchend) with adaptive delays for better detection</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Native selection menu prevention - only your custom popover appears</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Viewport-aware positioning that avoids virtual keyboard overlap</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Larger touch targets (44x44px minimum) for better tap accuracy</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Touch scroll prevention on popover to avoid accidental dismissal</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+              <span>Smart device detection using multiple methods (touch points, window width, touch API)</span>
+            </li>
+          </ul>
+        </div>
+      </article>
     </section>
 
     <!-- API Reference -->
@@ -462,6 +504,13 @@
                     Full accessibility with role="dialog" and aria-label="Selection actions"
                   </td>
                 </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Mobile Support</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">
+                    Automatic touch event support, native menu prevention, larger touch targets, scroll prevention, and
+                    viewport-aware positioning that avoids virtual keyboard overlap
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

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

@@ -51,6 +51,7 @@ export class SelectionPopoverDocs {
   keyboardAccessibilityCode = getFormattedCode(SelectionPopoverCodeExamples.keyboardAccessibility, 'html');
   eventHandlingCode = getFormattedCode(SelectionPopoverCodeExamples.eventHandling, 'html');
   eventHandlingTsCode = getFormattedCode(SelectionPopoverCodeExamples.eventHandlingTs, 'typescript');
+  mobileSupportCode = getFormattedCode(SelectionPopoverCodeExamples.mobileSupport, 'html');
 
   // Full Example
   fullExampleCode = getFormattedCode(SelectionPopoverCodeExamples.fullExample, 'html');

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

@@ -119,7 +119,7 @@
                                 </h4>
                                 <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">
-                                    Browse 4+ production-ready Angular components: Button, Input, Carousel, Breadcrumb
+                                    Browse 7+ production-ready Angular components: Button, Input, Carousel, Breadcrumb
                                     with TypeScript examples
                                 </p>
                             </div>