wally-ui 1.14.1 → 1.16.0

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

@@ -0,0 +1,333 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { SeoService } from '../../../../core/services/seo.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { ComboboxCodeExamples } from './combobox-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Button } from '../../../../components/button/button';
+import { Combobox } from '../../../../components/combobox/combobox';
+import { ComboboxInput } from '../../../../components/combobox/combobox-input/combobox-input';
+import { ComboboxTrigger } from '../../../../components/combobox/combobox-trigger/combobox-trigger';
+import { ComboboxContent } from '../../../../components/combobox/combobox-content/combobox-content';
+
+@Component({
+  selector: 'wally-combobox-docs',
+  standalone: true,
+  imports: [
+    Breadcrumb,
+    Button,
+    Combobox,
+    ComboboxInput,
+    ComboboxTrigger,
+    ComboboxContent
+  ],
+  templateUrl: './combobox-docs.component.html',
+  styleUrl: './combobox-docs.component.css'
+})
+export class ComboboxDocsComponent implements OnInit {
+
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Combobox' }
+  ];
+
+  installationCode = getFormattedCode(ComboboxCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(ComboboxCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(ComboboxCodeExamples.componentImport, 'typescript');
+
+  basicUsageCode = getFormattedCode(ComboboxCodeExamples.basicUsage, 'html');
+  componentSetupCode = getFormattedCode(ComboboxCodeExamples.componentSetup, 'typescript');
+  multiSelectCode = getFormattedCode(ComboboxCodeExamples.multiSelect, 'html');
+  multiSelectSetupCode = getFormattedCode(ComboboxCodeExamples.multiSelectSetup, 'typescript');
+  groupedItemsCode = getFormattedCode(ComboboxCodeExamples.groupedItems, 'html');
+  groupedItemsSetupCode = getFormattedCode(ComboboxCodeExamples.groupedItemsSetup, 'typescript');
+  customTriggerCode = getFormattedCode(ComboboxCodeExamples.customTrigger, 'html');
+  customTriggerSetupCode = getFormattedCode(ComboboxCodeExamples.customTriggerSetup, 'typescript');
+  positioningCode = getFormattedCode(ComboboxCodeExamples.positioning, 'html');
+  virtualScrollCode = getFormattedCode(ComboboxCodeExamples.virtualScroll, 'typescript');
+  keyboardNavigationCode = getFormattedCode(ComboboxCodeExamples.keyboardNavigation, 'text');
+  accessingSelectionCode = getFormattedCode(ComboboxCodeExamples.accessingSelection, 'html');
+  clearingSelectionCode = getFormattedCode(ComboboxCodeExamples.clearingSelection, 'html');
+  realWorldExampleCode = getFormattedCode(ComboboxCodeExamples.realWorldExample, 'html');
+  realWorldSetupCode = getFormattedCode(ComboboxCodeExamples.realWorldSetup, 'typescript');
+
+  fruits = FRUITS;
+  countries = ALL_COUNTRIES_DATA;
+  programmingLanguages = PROGRAMMING_LANGUAGES;
+
+  // Seleções
+  singleSelection: any[] = [];
+  multiSelection: any[] = [];
+  groupedSelection: any[] = [];
+  customTriggerSelection: any[] = [];
+
+  constructor(
+    private aiPromptService: AiPromptService,
+    private seoService: SeoService
+  ) { }
+
+  onSingleSelectionChange(items: any[]): void {
+    this.singleSelection = items;
+  }
+
+  onMultiSelectionChange(items: any[]): void {
+    this.multiSelection = items;
+  }
+
+  onGroupedSelectionChange(items: any[]): void {
+    this.groupedSelection = items;
+  }
+
+  onCustomTriggerSelectionChange(items: any[]): void {
+    this.customTriggerSelection = items;
+  }
+
+  ngOnInit(): void {
+    this.seoService.updateTags({
+      title: 'Combobox Component',
+      description: 'A flexible Angular combobox component with search, multi-select support, keyboard navigation, and intelligent viewport-aware positioning. Features input and custom trigger modes, item grouping, and zero external dependencies.',
+      url: '/documentation/components/combobox',
+      keywords: 'Angular Combobox, TypeScript Combobox, Select Component, Autocomplete, Multi-select, Angular UI Components, Searchable Dropdown'
+    });
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}
+
+const ALL_COUNTRIES = [
+  'Afghanistan',
+  'Albania',
+  'Algeria',
+  'Andorra',
+  'Angola',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia and Herzegovina',
+  'Botswana',
+  'Brazil',
+  'Brunei',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burundi',
+  'Cabo Verde',
+  'Cambodia',
+  'Cameroon',
+  'Canada',
+  'Central African Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Colombia',
+  'Comoros',
+  'Congo (Congo-Brazzaville)',
+  'Costa Rica',
+  "Côte d'Ivoire",
+  'Croatia',
+  'Cuba',
+  'Cyprus',
+  'Czechia (Czech Republic)',
+  'Democratic Republic of the Congo',
+  'Denmark',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Eswatini (fmr. ""Swaziland"")',
+  'Ethiopia',
+  'Fiji',
+  'Finland',
+  'France',
+  'Gabon',
+  'Gambia',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Greece',
+  'Grenada',
+  'Guatemala',
+  'Guinea',
+  'Guinea-Bissau',
+  'Guyana',
+  'Haiti',
+  'Holy See',
+  'Honduras',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Iran',
+  'Iraq',
+  'Ireland',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Japan',
+  'Jordan',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  'Kuwait',
+  'Kyrgyzstan',
+  'Laos',
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Marshall Islands',
+  'Mauritania',
+  'Mauritius',
+  'Mexico',
+  'Micronesia',
+  'Moldova',
+  'Monaco',
+  'Mongolia',
+  'Montenegro',
+  'Morocco',
+  'Mozambique',
+  'Myanmar (formerly Burma)',
+  'Namibia',
+  'Nauru',
+  'Nepal',
+  'Netherlands',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'North Korea',
+  'North Macedonia',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palau',
+  'Palestine State',
+  'Panama',
+  'Papua New Guinea',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Poland',
+  'Portugal',
+  'Qatar',
+  'Romania',
+  'Russia',
+  'Rwanda',
+  'Saint Kitts and Nevis',
+  'Saint Lucia',
+  'Saint Vincent and the Grenadines',
+  'Samoa',
+  'San Marino',
+  'Sao Tome and Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Korea',
+  'South Sudan',
+  'Spain',
+  'Sri Lanka',
+  'Sudan',
+  'Suriname',
+  'Sweden',
+  'Switzerland',
+  'Syria',
+  'Tajikistan',
+  'Tanzania',
+  'Thailand',
+  'Timor-Leste',
+  'Togo',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Tuvalu',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States of America',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Venezuela',
+  'Vietnam',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe',
+];
+
+const FRUITS = [
+  { value: 1, label: 'Apple', description: 'A sweet red fruit' },
+  { value: 2, label: 'Banana', description: 'A yellow tropical fruit' },
+  { value: 3, label: 'Orange', description: 'A citrus fruit' },
+  { value: 4, label: 'Strawberry', description: 'A red berry' },
+  { value: 5, label: 'Grapes', description: 'Small round fruits in bunches' },
+  { value: 6, label: 'Watermelon', description: 'A large green fruit' },
+  { value: 7, label: 'Mango', description: 'A tropical stone fruit' },
+  { value: 8, label: 'Pineapple', description: 'A tropical fruit with spiky skin' },
+];
+
+const ALL_COUNTRIES_DATA = ALL_COUNTRIES.map((country, index) => ({
+  value: index + 1,
+  label: country
+}));
+
+const PROGRAMMING_LANGUAGES = [
+  { value: 1, label: 'JavaScript', group: 'Frontend', description: 'Dynamic web language' },
+  { value: 2, label: 'TypeScript', group: 'Frontend', description: 'Typed JavaScript' },
+  { value: 3, label: 'React', group: 'Frontend', description: 'UI library' },
+  { value: 4, label: 'Angular', group: 'Frontend', description: 'Full framework' },
+  { value: 5, label: 'Vue', group: 'Frontend', description: 'Progressive framework' },
+  { value: 6, label: 'Node.js', group: 'Backend', description: 'JavaScript runtime' },
+  { value: 7, label: 'Python', group: 'Backend', description: 'Versatile language' },
+  { value: 8, label: 'Java', group: 'Backend', description: 'Enterprise language' },
+  { value: 9, label: 'Go', group: 'Backend', description: 'Fast compiled language' },
+  { value: 10, label: 'Rust', group: 'Backend', description: 'Memory-safe language' },
+];

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

@@ -0,0 +1,226 @@
+export const ComboboxCodeExamples = {
+  installation: `npx wally-ui add combobox`,
+
+  import: `import { Combobox } from './components/wally-ui/combobox/combobox';
+import { ComboboxInput } from './components/wally-ui/combobox/combobox-input/combobox-input';
+import { ComboboxTrigger } from './components/wally-ui/combobox/combobox-trigger/combobox-trigger';
+import { ComboboxContent } from './components/wally-ui/combobox/combobox-content/combobox-content';`,
+
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxTrigger,
+    ComboboxContent
+  ],
+  templateUrl: './example.html'
+})`,
+
+  basicUsage: `<!-- Single select with input mode -->
+<wally-combobox
+  [data]="fruits"
+  placeholder="Select a fruit..."
+  (selectionChange)="onSelectionChange($event)">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>
+
+<!-- Display selected item -->
+@if (selectedFruits.length > 0) {
+  <p>Selected: {{ selectedFruits[0].label }}</p>
+}`,
+
+  componentSetup: `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.html'
+})
+export class ExampleComponent {
+  fruits = [
+    { value: 1, label: 'Apple', description: 'A sweet red fruit' },
+    { value: 2, label: 'Banana', description: 'A yellow tropical fruit' },
+    { value: 3, label: 'Orange', description: 'A citrus fruit' }
+  ];
+
+  selectedFruits: any[] = [];
+
+  onSelectionChange(items: any[]): void {
+    this.selectedFruits = items;
+  }
+}`,
+
+  multiSelect: `<wally-combobox
+  [data]="countries"
+  [multiSelect]="true"
+  [closeOnSelect]="false"
+  (selectionChange)="onCountriesChange($event)">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>
+
+@if (selectedCountries.length > 0) {
+  <p>{{ selectedCountries.length }} countries selected</p>
+}`,
+
+  multiSelectSetup: `countries = [
+  { value: 1, label: 'United States' },
+  { value: 2, label: 'United Kingdom' },
+  { value: 3, label: 'Brazil' }
+];
+
+selectedCountries: any[] = [];
+
+onCountriesChange(items: any[]): void {
+  this.selectedCountries = items;
+}`,
+
+  groupedItems: `<wally-combobox
+  [data]="languages"
+  groupBy="group"
+  (selectionChange)="onLanguageChange($event)">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>`,
+
+  groupedItemsSetup: `languages = [
+  { value: 1, label: 'JavaScript', group: 'Frontend' },
+  { value: 2, label: 'TypeScript', group: 'Frontend' },
+  { value: 3, label: 'Python', group: 'Backend' },
+  { value: 4, label: 'Java', group: 'Backend' }
+];
+
+selectedLanguage: any[] = [];
+
+onLanguageChange(items: any[]): void {
+  this.selectedLanguage = items;
+}`,
+
+  customTrigger: `<wally-combobox
+  [data]="options"
+  triggerMode="custom"
+  (selectionChange)="onOptionChange($event)">
+  <wally-combobox-trigger>
+    <wally-button variant="outline">
+      @if (selectedOption.length > 0) {
+        {{ selectedOption[0].label }}
+      } @else {
+        Select an option
+      }
+    </wally-button>
+  </wally-combobox-trigger>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>`,
+
+  customTriggerSetup: `options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' }
+];
+
+selectedOption: any[] = [];
+
+onOptionChange(items: any[]): void {
+  this.selectedOption = items;
+}`,
+
+  positioning: `<!-- Default: bottom (auto-adjusts based on viewport space) -->
+<wally-combobox [data]="items">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>
+
+<!-- Force top positioning -->
+<wally-combobox [data]="items">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content [position]="'top'"></wally-combobox-content>
+</wally-combobox>
+
+<!-- Position automatically adjusts on window resize -->`,
+
+  virtualScroll: `<!-- Virtual scrolling is automatically enabled for large datasets -->
+<wally-combobox [data]="largeDataset">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>
+
+<!-- Note: Virtual scrolling optimizes rendering for 1000+ items -->`,
+
+  keyboardNavigation: `Keyboard shortcuts:
+- Arrow Down: Navigate to next item
+- Arrow Up: Navigate to previous item
+- Enter: Select focused item
+- Escape: Close dropdown
+- Backspace: Remove last chip (multi-select mode)`,
+
+  accessingSelection: `<!-- Use selectionChange output to track selected items -->
+<wally-combobox
+  [data]="items"
+  (selectionChange)="onSelectionChange($event)">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>
+
+<!-- Display selected items -->
+@if (selectedItems.length > 0) {
+  <p>Selected: {{ selectedItems[0].label }}</p>
+}
+
+<!-- In component -->
+selectedItems: any[] = [];
+
+onSelectionChange(items: any[]): void {
+  this.selectedItems = items;
+  console.log('Selected values:', items.map(i => i.value));
+}`,
+
+  clearingSelection: `<!-- The combobox automatically handles clearing via UI -->
+<!-- Multi-select: Individual X buttons on each chip -->
+<!-- Single-select: Clear button (X) when item is selected -->
+
+<!-- Built-in clear functionality - no code needed! -->
+<wally-combobox [data]="items">
+  <wally-combobox-input></wally-combobox-input>
+  <wally-combobox-content></wally-combobox-content>
+</wally-combobox>`,
+
+  realWorldExample: `<div class="space-y-4">
+  <!-- Country selector with multi-select -->
+  <wally-combobox
+    [data]="countries"
+    [multiSelect]="true"
+    [closeOnSelect]="false"
+    placeholder="Search countries..."
+    (selectionChange)="onCountrySelectionChange($event)">
+    <wally-combobox-input></wally-combobox-input>
+    <wally-combobox-content></wally-combobox-content>
+  </wally-combobox>
+
+  <!-- Display selected countries -->
+  @if (selectedCountries.length > 0) {
+    <div class="mt-4">
+      <h3 class="font-semibold mb-2">Selected Countries:</h3>
+      <ul class="list-disc list-inside">
+        @for (country of selectedCountries; track country.value) {
+          <li>{{ country.label }}</li>
+        }
+      </ul>
+    </div>
+  }
+</div>`,
+
+  realWorldSetup: `countries = [
+  { value: 1, label: 'United States', description: 'North America' },
+  { value: 2, label: 'United Kingdom', description: 'Europe' },
+  { value: 3, label: 'Brazil', description: 'South America' },
+  { value: 4, label: 'Japan', description: 'Asia' },
+  { value: 5, label: 'Australia', description: 'Oceania' }
+];
+
+selectedCountries: any[] = [];
+
+onCountrySelectionChange(items: any[]): void {
+  this.selectedCountries = items;
+}`
+};

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,13 @@ 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)
+    },
+    {
+      path: 'combobox',
+      loadComponent: () => import('./combobox-docs/combobox-docs.component').then(m => m.ComboboxDocsComponent)
     }
 ];

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>