@ngbase/adk 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -13,9 +13,9 @@
     "url": "https://github.com/ng-base/ngbase/issues"
   },
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -23,233 +23,233 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "module": "fesm2022/ngbase-adk.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/ngbase-adk.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/ngbase-adk.d.ts",
       "default": "./fesm2022/ngbase-adk.mjs"
     },
     "./a11y": {
-      "types": "./a11y/index.d.ts",
+      "types": "./types/ngbase-adk-a11y.d.ts",
       "default": "./fesm2022/ngbase-adk-a11y.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-avatar.mjs"
+    "./accordion": {
+      "types": "./types/ngbase-adk-accordion.d.ts",
+      "default": "./fesm2022/ngbase-adk-accordion.mjs"
     },
     "./autocomplete": {
-      "types": "./autocomplete/index.d.ts",
+      "types": "./types/ngbase-adk-autocomplete.d.ts",
       "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-accordion.mjs"
+    "./avatar": {
+      "types": "./types/ngbase-adk-avatar.d.ts",
+      "default": "./fesm2022/ngbase-adk-avatar.mjs"
     },
     "./bidi": {
-      "types": "./bidi/index.d.ts",
+      "types": "./types/ngbase-adk-bidi.d.ts",
       "default": "./fesm2022/ngbase-adk-bidi.mjs"
     },
     "./breadcrumb": {
-      "types": "./breadcrumb/index.d.ts",
+      "types": "./types/ngbase-adk-breadcrumb.d.ts",
       "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
     },
     "./cache": {
-      "types": "./cache/index.d.ts",
+      "types": "./types/ngbase-adk-cache.d.ts",
       "default": "./fesm2022/ngbase-adk-cache.mjs"
     },
     "./carousel": {
-      "types": "./carousel/index.d.ts",
+      "types": "./types/ngbase-adk-carousel.d.ts",
       "default": "./fesm2022/ngbase-adk-carousel.mjs"
     },
+    "./checkbox": {
+      "types": "./types/ngbase-adk-checkbox.d.ts",
+      "default": "./fesm2022/ngbase-adk-checkbox.mjs"
+    },
     "./chip": {
-      "types": "./chip/index.d.ts",
+      "types": "./types/ngbase-adk-chip.d.ts",
       "default": "./fesm2022/ngbase-adk-chip.mjs"
     },
     "./clipboard": {
-      "types": "./clipboard/index.d.ts",
+      "types": "./types/ngbase-adk-clipboard.d.ts",
       "default": "./fesm2022/ngbase-adk-clipboard.mjs"
     },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-checkbox.mjs"
-    },
     "./collections": {
-      "types": "./collections/index.d.ts",
+      "types": "./types/ngbase-adk-collections.d.ts",
       "default": "./fesm2022/ngbase-adk-collections.mjs"
     },
     "./color-picker": {
-      "types": "./color-picker/index.d.ts",
+      "types": "./types/ngbase-adk-color-picker.d.ts",
       "default": "./fesm2022/ngbase-adk-color-picker.mjs"
     },
     "./cookies": {
-      "types": "./cookies/index.d.ts",
+      "types": "./types/ngbase-adk-cookies.d.ts",
       "default": "./fesm2022/ngbase-adk-cookies.mjs"
     },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-dialog.mjs"
-    },
     "./datepicker": {
-      "types": "./datepicker/index.d.ts",
+      "types": "./types/ngbase-adk-datepicker.d.ts",
       "default": "./fesm2022/ngbase-adk-datepicker.mjs"
     },
+    "./dialog": {
+      "types": "./types/ngbase-adk-dialog.d.ts",
+      "default": "./fesm2022/ngbase-adk-dialog.mjs"
+    },
     "./drag": {
-      "types": "./drag/index.d.ts",
+      "types": "./types/ngbase-adk-drag.d.ts",
       "default": "./fesm2022/ngbase-adk-drag.mjs"
     },
     "./form-field": {
-      "types": "./form-field/index.d.ts",
+      "types": "./types/ngbase-adk-form-field.d.ts",
       "default": "./fesm2022/ngbase-adk-form-field.mjs"
     },
     "./hover-card": {
-      "types": "./hover-card/index.d.ts",
+      "types": "./types/ngbase-adk-hover-card.d.ts",
       "default": "./fesm2022/ngbase-adk-hover-card.mjs"
     },
     "./icon": {
-      "types": "./icon/index.d.ts",
+      "types": "./types/ngbase-adk-icon.d.ts",
       "default": "./fesm2022/ngbase-adk-icon.mjs"
     },
-    "./jwt": {
-      "types": "./jwt/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-jwt.mjs"
-    },
     "./inline-edit": {
-      "types": "./inline-edit/index.d.ts",
+      "types": "./types/ngbase-adk-inline-edit.d.ts",
       "default": "./fesm2022/ngbase-adk-inline-edit.mjs"
     },
-    "./layout": {
-      "types": "./layout/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-layout.mjs"
+    "./jwt": {
+      "types": "./types/ngbase-adk-jwt.d.ts",
+      "default": "./fesm2022/ngbase-adk-jwt.mjs"
     },
     "./keys": {
-      "types": "./keys/index.d.ts",
+      "types": "./types/ngbase-adk-keys.d.ts",
       "default": "./fesm2022/ngbase-adk-keys.mjs"
     },
+    "./layout": {
+      "types": "./types/ngbase-adk-layout.d.ts",
+      "default": "./fesm2022/ngbase-adk-layout.mjs"
+    },
     "./list": {
-      "types": "./list/index.d.ts",
+      "types": "./types/ngbase-adk-list.d.ts",
       "default": "./fesm2022/ngbase-adk-list.mjs"
     },
     "./mask": {
-      "types": "./mask/index.d.ts",
+      "types": "./types/ngbase-adk-mask.d.ts",
       "default": "./fesm2022/ngbase-adk-mask.mjs"
     },
-    "./network": {
-      "types": "./network/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-network.mjs"
-    },
     "./menu": {
-      "types": "./menu/index.d.ts",
+      "types": "./types/ngbase-adk-menu.d.ts",
       "default": "./fesm2022/ngbase-adk-menu.mjs"
     },
+    "./network": {
+      "types": "./types/ngbase-adk-network.d.ts",
+      "default": "./fesm2022/ngbase-adk-network.mjs"
+    },
     "./otp": {
-      "types": "./otp/index.d.ts",
+      "types": "./types/ngbase-adk-otp.d.ts",
       "default": "./fesm2022/ngbase-adk-otp.mjs"
     },
     "./pagination": {
-      "types": "./pagination/index.d.ts",
+      "types": "./types/ngbase-adk-pagination.d.ts",
       "default": "./fesm2022/ngbase-adk-pagination.mjs"
     },
     "./popover": {
-      "types": "./popover/index.d.ts",
+      "types": "./types/ngbase-adk-popover.d.ts",
       "default": "./fesm2022/ngbase-adk-popover.mjs"
     },
+    "./portal": {
+      "types": "./types/ngbase-adk-portal.d.ts",
+      "default": "./fesm2022/ngbase-adk-portal.mjs"
+    },
     "./progress": {
-      "types": "./progress/index.d.ts",
+      "types": "./types/ngbase-adk-progress.d.ts",
       "default": "./fesm2022/ngbase-adk-progress.mjs"
     },
     "./radio": {
-      "types": "./radio/index.d.ts",
+      "types": "./types/ngbase-adk-radio.d.ts",
       "default": "./fesm2022/ngbase-adk-radio.mjs"
     },
-    "./portal": {
-      "types": "./portal/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-portal.mjs"
-    },
     "./resizable": {
-      "types": "./resizable/index.d.ts",
+      "types": "./types/ngbase-adk-resizable.d.ts",
       "default": "./fesm2022/ngbase-adk-resizable.mjs"
     },
     "./scroll-area": {
-      "types": "./scroll-area/index.d.ts",
+      "types": "./types/ngbase-adk-scroll-area.d.ts",
       "default": "./fesm2022/ngbase-adk-scroll-area.mjs"
     },
-    "./selectable": {
-      "types": "./selectable/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-selectable.mjs"
-    },
     "./select": {
-      "types": "./select/index.d.ts",
+      "types": "./types/ngbase-adk-select.d.ts",
       "default": "./fesm2022/ngbase-adk-select.mjs"
     },
+    "./selectable": {
+      "types": "./types/ngbase-adk-selectable.d.ts",
+      "default": "./fesm2022/ngbase-adk-selectable.mjs"
+    },
     "./sheet": {
-      "types": "./sheet/index.d.ts",
+      "types": "./types/ngbase-adk-sheet.d.ts",
       "default": "./fesm2022/ngbase-adk-sheet.mjs"
     },
     "./sidenav": {
-      "types": "./sidenav/index.d.ts",
+      "types": "./types/ngbase-adk-sidenav.d.ts",
       "default": "./fesm2022/ngbase-adk-sidenav.mjs"
     },
     "./slider": {
-      "types": "./slider/index.d.ts",
+      "types": "./types/ngbase-adk-slider.d.ts",
       "default": "./fesm2022/ngbase-adk-slider.mjs"
     },
     "./sonner": {
-      "types": "./sonner/index.d.ts",
+      "types": "./types/ngbase-adk-sonner.d.ts",
       "default": "./fesm2022/ngbase-adk-sonner.mjs"
     },
     "./stepper": {
-      "types": "./stepper/index.d.ts",
+      "types": "./types/ngbase-adk-stepper.d.ts",
       "default": "./fesm2022/ngbase-adk-stepper.mjs"
     },
     "./switch": {
-      "types": "./switch/index.d.ts",
+      "types": "./types/ngbase-adk-switch.d.ts",
       "default": "./fesm2022/ngbase-adk-switch.mjs"
     },
     "./table": {
-      "types": "./table/index.d.ts",
+      "types": "./types/ngbase-adk-table.d.ts",
       "default": "./fesm2022/ngbase-adk-table.mjs"
     },
+    "./tabs": {
+      "types": "./types/ngbase-adk-tabs.d.ts",
+      "default": "./fesm2022/ngbase-adk-tabs.mjs"
+    },
     "./test": {
-      "types": "./test/index.d.ts",
+      "types": "./types/ngbase-adk-test.d.ts",
       "default": "./fesm2022/ngbase-adk-test.mjs"
     },
     "./toggle": {
-      "types": "./toggle/index.d.ts",
+      "types": "./types/ngbase-adk-toggle.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
     },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-tabs.mjs"
-    },
     "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
+      "types": "./types/ngbase-adk-toggle-group.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
     },
-    "./tour": {
-      "types": "./tour/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-tour.mjs"
-    },
     "./tooltip": {
-      "types": "./tooltip/index.d.ts",
+      "types": "./types/ngbase-adk-tooltip.d.ts",
       "default": "./fesm2022/ngbase-adk-tooltip.mjs"
     },
+    "./tour": {
+      "types": "./types/ngbase-adk-tour.d.ts",
+      "default": "./fesm2022/ngbase-adk-tour.mjs"
+    },
     "./translate": {
-      "types": "./translate/index.d.ts",
+      "types": "./types/ngbase-adk-translate.d.ts",
       "default": "./fesm2022/ngbase-adk-translate.mjs"
     },
     "./tree": {
-      "types": "./tree/index.d.ts",
+      "types": "./types/ngbase-adk-tree.d.ts",
       "default": "./fesm2022/ngbase-adk-tree.mjs"
     },
     "./utils": {
-      "types": "./utils/index.d.ts",
+      "types": "./types/ngbase-adk-utils.d.ts",
       "default": "./fesm2022/ngbase-adk-utils.mjs"
     },
     "./virtualizer": {
-      "types": "./virtualizer/index.d.ts",
+      "types": "./types/ngbase-adk-virtualizer.d.ts",
       "default": "./fesm2022/ngbase-adk-virtualizer.mjs"
     }
   }

package/schematics/components/files/accordion/accordion.ts.template

@@ -5,7 +5,6 @@ import {
   NgbAccordionContent,
   NgbAccordionGroup,
   NgbAccordionHeader,
-  slideAnimation,
 } from '@ngbase/adk/accordion';
 
 @Component({
@@ -27,18 +26,22 @@ export class AccordionGroup {}
   imports: [NgbAccordionContent],
   template: `
     <ng-content select="[<%= name %>AccordionHeader]" />
-    @if (expanded()) {
-      <div ngbAccordionContent [@slide] class="overflow-hidden">
+    <div
+      ngbAccordionContent
+      class="grid overflow-hidden"
+      [class.accordion-enter]="expanded()"
+      [class.accordion-leave]="!expanded()"
+    >
+      <div class="min-h-0">
         <div class="px-3 pb-4">
           <ng-content />
         </div>
       </div>
-    }
+    </div>
   `,
   host: {
     class: 'block will-change-auto [&:not(:last-child)]:border-b',
   },
-  animations: [slideAnimation],
 })
 export class Accordion extends NgbAccordion {}
 
@@ -47,7 +50,7 @@ export class Accordion extends NgbAccordion {}
   hostDirectives: [NgbAccordionHeader],
   host: {
     class:
-      'flex items-center w-full py-3 px-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+      'flex items-center w-full py-3 px-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 cursor-pointer',
   },
 })
 export class AccordionHeader {}

package/schematics/components/files/audio/AudioPlayer.ts.template

@@ -0,0 +1,245 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+  ElementRef,
+  viewChild,
+  input,
+  output,
+  OnDestroy,
+  effect,
+  untracked,
+} from '@angular/core';
+import { AudioVisualizer } from './AudioVisualizer';
+import { provideIcons } from '@ng-icons/core';
+import { lucidePause, lucidePlay } from '@ng-icons/lucide';
+import { Icon } from '<%= basepath %>/icon';
+import { Button } from '<%= basepath %>/button';
+
+export type AudioState = 'idle' | 'loading' | 'ready' | 'playing' | 'paused';
+
+@Component({
+  selector: '<%= name %>-audio-player',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucidePlay, lucidePause })],
+  imports: [AudioVisualizer, Icon, Button],
+  template: `
+    <div class="bg-card flex items-center gap-1 rounded-xl border">
+      <!-- Play/Pause Button -->
+      <button
+        (click)="handlePlayClick()"
+        <%= name %>Button="secondary"
+        [disabled]="state() === 'idle' || state() === 'loading'"
+        [attr.aria-label]="state() === 'playing' ? 'Pause Audio' : 'Play Audio'"
+        class="m-1 aspect-square !px-1"
+      >
+        <<%= name %>-icon [name]="state() === 'playing' ? 'lucidePause' : 'lucidePlay'" />
+      </button>
+
+      <!-- Visualizer -->
+      <div
+        class="group relative h-8 flex-grow cursor-pointer overflow-hidden rounded-lg"
+        (click)="seekOnWaveform($event)"
+      >
+        <app-audio-visualizer
+          [audioBuffer]="decodedAudioBuffer()"
+          [progress]="playbackProgress()"
+        />
+        @if (state() === 'loading') {
+          <div class="bg-muted/80 absolute inset-0 flex items-center justify-center">
+            <p class="text-muted-foreground text-sm font-medium">Loading...</p>
+          </div>
+        }
+      </div>
+    </div>
+
+    <!-- Hidden audio element for playback -->
+    <audio
+      #audioPlayer
+      [src]="audioUrl()"
+      (loadedmetadata)="updateDuration()"
+      (ended)="onPlaybackEnded()"
+    ></audio>
+  `,
+  host: {
+    class: 'block w-full',
+  },
+})
+export class AudioPlayer implements OnDestroy {
+  readonly audioPlayer = viewChild.required<ElementRef<HTMLAudioElement>>('audioPlayer');
+
+  // Input for audio file
+  readonly file = input<File | null>(null);
+  readonly volume = input(0.7);
+
+  // Internal state
+  readonly currentTime = signal(0);
+  readonly duration = signal(0);
+  readonly state = signal<AudioState>('idle');
+  readonly audioUrl = signal<string | null>(null);
+  readonly decodedAudioBuffer = signal<AudioBuffer | null>(null);
+  readonly error = signal<string | null>(null);
+
+  // Outputs to emit time updates to parent component
+  readonly currentTimeChange = output<number>();
+  readonly durationChange = output<number>();
+  readonly errorChange = output<string | null>();
+
+  private animationFrameId: number | null = null;
+  private audioContext: AudioContext | null = null;
+
+  readonly playbackProgress = computed(() =>
+    this.duration() > 0 ? this.currentTime() / this.duration() : 0,
+  );
+
+  constructor() {
+    // Watch for file changes and load the audio
+    effect(() => {
+      const fileToLoad = this.file();
+      console.log('fileToLoad ', fileToLoad);
+      if (fileToLoad) {
+        untracked(() => this.loadAudioFile(fileToLoad));
+      }
+    });
+  }
+
+  async handlePlayClick(): Promise<void> {
+    const player = this.audioPlayer().nativeElement;
+    const currentState = this.state();
+
+    if (currentState === 'playing') {
+      this.pausePlayback(player);
+      this.stopAnimationLoop();
+    } else if (currentState === 'ready' || currentState === 'paused') {
+      await this.startPlayback(player);
+      if (this.state() === 'playing') {
+        this.startAnimationLoop();
+      }
+    }
+  }
+
+  seekOnWaveform(event: MouseEvent): void {
+    const player = this.audioPlayer().nativeElement;
+    if (!player.duration) return;
+
+    const target = event.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const percentage = x / rect.width;
+    player.currentTime = percentage * player.duration;
+    this.currentTime.set(player.currentTime);
+  }
+
+  updateDuration(): void {
+    const player = this.audioPlayer().nativeElement;
+    this.duration.set(player.duration);
+    this.durationChange.emit(player.duration);
+    player.volume = this.volume();
+  }
+
+  onPlaybackEnded(): void {
+    this.state.set('ready');
+    this.stopAnimationLoop();
+    this.currentTime.set(0);
+  }
+
+  ngOnDestroy(): void {
+    this.stopAnimationLoop();
+    if (this.audioUrl()) {
+      URL.revokeObjectURL(this.audioUrl()!);
+    }
+  }
+
+  private initializeAudioContext(): void {
+    if (!this.audioContext) {
+      try {
+        this.audioContext = new AudioContext();
+      } catch (e) {
+        const errorMsg = 'Web Audio API is not supported by this browser.';
+        this.error.set(errorMsg);
+        this.errorChange.emit(errorMsg);
+        console.error(e);
+      }
+    }
+  }
+
+  private async loadAudioFile(file: File): Promise<void> {
+    this.state.set('loading');
+    this.error.set(null);
+    this.decodedAudioBuffer.set(null);
+    this.currentTime.set(0);
+    this.duration.set(0);
+    this.initializeAudioContext();
+
+    if (!this.audioContext) {
+      const errorMsg = 'Could not initialize audio context.';
+      this.error.set(errorMsg);
+      this.errorChange.emit(errorMsg);
+      this.state.set('idle');
+      return;
+    }
+
+    if (this.audioUrl()) {
+      URL.revokeObjectURL(this.audioUrl()!);
+    }
+    const url = URL.createObjectURL(file);
+    this.audioUrl.set(url);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const buffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      this.decodedAudioBuffer.set(buffer);
+      this.state.set('ready');
+    } catch (e) {
+      console.error('Error decoding audio file:', e);
+      const errorMsg =
+        'Failed to process the audio file. It may be corrupt or in an unsupported format.';
+      this.error.set(errorMsg);
+      this.errorChange.emit(errorMsg);
+      this.state.set('idle');
+      this.audioUrl.set(null);
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  private async startPlayback(audioElement: HTMLAudioElement): Promise<void> {
+    if (this.state() === 'ready' || this.state() === 'paused') {
+      try {
+        await audioElement.play();
+        this.state.set('playing');
+      } catch (error) {
+        console.error('Playback failed:', error);
+        const errorMsg = 'Could not play audio.';
+        this.error.set(errorMsg);
+        this.errorChange.emit(errorMsg);
+        this.state.set('ready');
+      }
+    }
+  }
+
+  private pausePlayback(audioElement: HTMLAudioElement): void {
+    if (this.state() === 'playing') {
+      audioElement.pause();
+      this.state.set('paused');
+    }
+  }
+
+  private startAnimationLoop(): void {
+    const player = this.audioPlayer().nativeElement;
+    const animate = () => {
+      const time = player.currentTime;
+      this.currentTime.set(time);
+      this.currentTimeChange.emit(time);
+      this.animationFrameId = requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  private stopAnimationLoop(): void {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+}