wally-ui 1.14.1 → 1.16.0

package/playground/showcase/src/app/components/combobox/lib/types/combobox-position.type.ts

@@ -0,0 +1 @@
+export type ComboboxPosition = 'bottom' | 'top' | 'left' | 'right';

package/playground/showcase/src/app/components/combobox/lib/types/combobox-trigger-mode.type.ts

@@ -0,0 +1 @@
+export type ComboboxTriggerMode = 'input' | 'custom';

package/playground/showcase/src/app/core/services/seo.service.ts

@@ -0,0 +1,100 @@
+import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { Meta, Title } from '@angular/platform-browser';
+
+export interface SeoConfig {
+  title: string;
+  description: string;
+  url?: string;
+  image?: string;
+  keywords?: string;
+  type?: 'website' | 'article';
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+  private platformId = inject(PLATFORM_ID);
+  private document = inject(DOCUMENT);
+
+  private readonly baseUrl = 'https://wally-ui.com';
+  private readonly defaultImage = 'https://wally-ui.com/assets/og-image.png';
+
+  /**
+   * Updates all SEO meta tags for the current page
+   */
+  updateTags(config: SeoConfig): void {
+    const {
+      title,
+      description,
+      url = '',
+      image = this.defaultImage,
+      keywords = 'Angular, TypeScript, UI Components, Design System, Open Source',
+      type = 'website'
+    } = config;
+
+    const fullTitle = `${title} - Wally UI`;
+    const fullUrl = `${this.baseUrl}${url}`;
+
+    // Update page title
+    this.titleService.setTitle(fullTitle);
+
+    // Update or create meta tags
+    this.meta.updateTag({ name: 'description', content: description });
+    this.meta.updateTag({ name: 'keywords', content: keywords });
+
+    // Open Graph tags
+    this.meta.updateTag({ property: 'og:title', content: fullTitle });
+    this.meta.updateTag({ property: 'og:description', content: description });
+    this.meta.updateTag({ property: 'og:url', content: fullUrl });
+    this.meta.updateTag({ property: 'og:image', content: image });
+    this.meta.updateTag({ property: 'og:type', content: type });
+
+    // Twitter Card tags
+    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+    this.meta.updateTag({ name: 'twitter:title', content: fullTitle });
+    this.meta.updateTag({ name: 'twitter:description', content: description });
+    this.meta.updateTag({ name: 'twitter:image', content: image });
+
+    // Canonical URL
+    this.updateCanonicalUrl(fullUrl);
+  }
+
+  /**
+   * Updates or creates canonical link tag (browser only)
+   */
+  private updateCanonicalUrl(url: string): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    let link: HTMLLinkElement | null = this.document.querySelector('link[rel="canonical"]');
+
+    if (!link) {
+      link = this.document.createElement('link');
+      link.setAttribute('rel', 'canonical');
+      this.document.head.appendChild(link);
+    }
+
+    link.setAttribute('href', url);
+  }
+
+  /**
+   * Removes all dynamic meta tags (useful for cleanup)
+   */
+  clearTags(): void {
+    this.meta.removeTag('name="description"');
+    this.meta.removeTag('name="keywords"');
+    this.meta.removeTag('property="og:title"');
+    this.meta.removeTag('property="og:description"');
+    this.meta.removeTag('property="og:url"');
+    this.meta.removeTag('property="og:image"');
+    this.meta.removeTag('name="twitter:card"');
+    this.meta.removeTag('name="twitter:title"');
+    this.meta.removeTag('name="twitter:description"');
+    this.meta.removeTag('name="twitter:image"');
+  }
+}

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

@@ -0,0 +1 @@
+/* Audio Waveform Documentation Styles */

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

@@ -0,0 +1,146 @@
+// Audio Waveform documentation code examples
+export const AudioWaveformCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add audio-waveform`,
+
+  // Import examples
+  import: `import { AudioWaveform } from './components/wally-ui/audio-waveform/audio-waveform';
+import { AudioWaveformService } from './components/wally-ui/audio-waveform/audio-waveform.service';`,
+
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [AudioWaveform],
+  templateUrl: './example.html'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()">
+</wally-audio-waveform>`,
+
+  // With timer
+  withTimer: `<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()"
+  [showTimer]="true">
+</wally-audio-waveform>`,
+
+  // Complete Example with Controls
+  completeExample: `<div class="flex flex-col gap-4">
+  <!-- Waveform Visualizer -->
+  <wally-audio-waveform
+    [isStartRecording]="isRecording()"
+    [isStopRecording]="!isRecording()"
+    [showTimer]="true">
+  </wally-audio-waveform>
+
+  <!-- Recording Controls -->
+  <div class="flex gap-2">
+    @if (!isRecording()) {
+      <button (click)="startRecording()"
+        class="px-4 py-2 bg-red-500 text-white rounded-full">
+        Start Recording
+      </button>
+    } @else {
+      <button (click)="stopRecording()"
+        class="px-4 py-2 bg-neutral-500 text-white rounded-full">
+        Stop Recording
+      </button>
+    }
+  </div>
+</div>`,
+
+  completeExampleTs: `export class RecordingComponent {
+  isRecording = signal(false);
+
+  startRecording() {
+    this.isRecording.set(true);
+  }
+
+  stopRecording() {
+    this.isRecording.set(false);
+  }
+}`,
+
+  // Service Integration
+  serviceIntegration: `// Access the service to get recorded audio
+export class RecordingComponent {
+  @ViewChild(AudioWaveform) audioWaveform!: AudioWaveform;
+
+  downloadRecording() {
+    const service = this.audioWaveform.audioWaveformService;
+    service.downloadRecording('my-recording.webm');
+  }
+
+  getRecordedBlob() {
+    const service = this.audioWaveform.audioWaveformService;
+    const blob = service.recordedAudioBlob();
+    return blob;
+  }
+
+  clearRecording() {
+    const service = this.audioWaveform.audioWaveformService;
+    service.clearRecording();
+  }
+}`,
+
+  // Responsive Configuration
+  responsiveConfig: `// Service Configuration (auto-responsive)
+// Mobile (< 768px): 30 bars
+// Desktop (>= 768px): 65 bars
+// Automatically adjusts based on screen width`,
+
+  // Future: Audio Transcription
+  futureTranscription: `// COMING SOON: Audio Transcription
+// The component will support automatic transcription in a future release
+
+<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()"
+  [enableTranscription]="true"
+  (transcriptionComplete)="onTranscription($event)">
+</wally-audio-waveform>`,
+
+  // Web Audio API Concepts
+  webAudioConcepts: `// How it works under the hood:
+// 1. getUserMedia() - Request microphone access
+// 2. AudioContext - Process audio in real-time
+// 3. AnalyserNode - FFT analysis (256 samples → 128 frequencies)
+// 4. getByteFrequencyData() - Get frequency values (0-255)
+// 5. Normalize to 0-100% for bar heights
+// 6. requestAnimationFrame - Smooth 60fps animation`,
+
+  // Properties: Inputs
+  propertyIsStartRecording: `isStartRecording: InputSignal<boolean> = input<boolean>(false);`,
+  propertyIsStopRecording: `isStopRecording: InputSignal<boolean> = input<boolean>(false);`,
+  propertyShowTimer: `showTimer: InputSignal<boolean> = input<boolean>(false);`,
+
+  // Properties: Service Signals
+  servicePropertyIsRecording: `isRecording: WritableSignal<boolean>`,
+  servicePropertyAudioData: `audioData: WritableSignal<number[]>  // Bar heights (0-100%)`,
+  servicePropertyRecordedAudioBlob: `recordedAudioBlob: WritableSignal<Blob | null>`,
+  servicePropertyRecordedAudioUrl: `recordedAudioUrl: WritableSignal<string | null>`,
+
+  // Methods
+  methodDownloadRecording: `downloadRecording(filename?: string): void`,
+  methodClearRecording: `clearRecording(): void`,
+
+  // Configuration constants
+  configFFTSize: `FFT_SIZE = 256  // Higher = more frequency detail`,
+  configBarCount: `BAR_COUNT = 30 (mobile) | 65 (desktop)  // Auto-responsive`,
+  configSmoothing: `SMOOTHING = 0.8  // 0 (no smoothing) to 1 (max smoothing)`,
+
+  // Accessibility
+  accessibilityExample: `<!-- The component includes built-in accessibility -->
+<!-- Timer updates announced via aria-live region (when showTimer=true) -->
+<!-- Waveform visualizer is decorative (aria-hidden) -->`,
+
+  // Browser Support
+  browserSupport: `// Requires modern browsers with:
+// - Web Audio API
+// - MediaStream API
+// - MediaRecorder API
+//
+// Supported: Chrome 60+, Firefox 55+, Safari 14+, Edge 79+`,
+};