@dataclouder/ngx-lessons 0.0.29 → 0.0.31

package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output, Type, ViewChildren, QueryList, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output, Type, ViewChildren, QueryList, OnDestroy, input } from '@angular/core';
+
 import { PaginatorModule } from 'primeng/paginator';
 import { NgComponentOutlet } from '@angular/common';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@@ -8,6 +8,7 @@ import { Subscription } from 'rxjs';
 import {
   DCFilterBarComponent,
   ICustomFilter,
+  OnActionEvent,
   PaginationBase,
   PColumn,
   QuickTableComponent,
@@ -39,21 +40,15 @@ const returnProperties: Record<string, 0 | 1> = { id: 1, title: 1, assets: 1 };
   templateUrl: './dc-lesson-list.component.html',
   styleUrls: ['./dc-lesson-list.component.scss'],
   standalone: true,
-  imports: [CommonModule, RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent],
+  imports: [RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent],
 })
 export class DCLessonListComponent extends PaginationBase implements OnInit, OnDestroy {
-  @Input() public isAdmin: boolean = false;
+  @Input() public showOptions: boolean = true;
   @Input() public customCardComponent?: Type<DcLessonCardComponent>;
   @Input() public customFilters: ICustomFilter[] = [];
-  @Input() public viewType: 'table' | 'card' = 'card';
-
-  @Input() public override actions: MenuItem[] = TableViewActions;
+  @Input() public viewType: 'table' | 'cards' = 'cards';
 
-  @Output() public onTakeLesson: EventEmitter<any> = new EventEmitter();
-  @Output() public onEditLesson: EventEmitter<any> = new EventEmitter();
-  @Output() public onRemoveLesson: EventEmitter<any> = new EventEmitter();
-  @Output() public qr: EventEmitter<any> = new EventEmitter();
-  @Output() public onNewLesson: EventEmitter<any> = new EventEmitter();
+  // readonly actions = input<MenuItem[]>(TableViewActions);
 
   public override columns: PColumn[] = tableViewColumns;
 
@@ -92,17 +87,8 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
       const instance: DcLessonCardComponent = outlet.componentInstance;
 
       this.cardEventSubs.push(
-        instance.take.subscribe((lesson: any) => {
-          this.takeLesson(lesson);
-        }),
-        instance.edit.subscribe((lesson: any) => {
-          this.editLesson(lesson);
-        }),
-        instance.remove.subscribe((lesson: any) => {
-          this.removeLesson(lesson);
-        }),
-        instance.qr.subscribe((lesson: any) => {
-          this.generateQR(lesson);
+        instance.onAction.subscribe((lesson: any) => {
+          this.doOrEmitAction(lesson);
         }),
       );
     });
@@ -138,28 +124,11 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
     }
   }
 
-  public goToLessonDetails(id: string) {
-    // this.router.navigate([`${RouteNames.App}/${RouteNames.LessonsV2}/details/${id}`]);
-    alert('TODO: goToLessonDetails');
-  }
-
   public search(searchText: string) {
     this.filterConfig['text'] = searchText;
     this.getPaginatedLessons(this.filterConfig);
   }
 
-  private generateQR(lesson: any) {
-    this.qr.emit(lesson);
-  }
-
-  private takeLesson(lesson: any) {
-    this.onTakeLesson.emit(lesson);
-  }
-
-  private editLesson(lesson: any) {
-    this.onEditLesson.emit(lesson);
-  }
-
   private removeLesson(lesson: any) {
     const response = confirm('¿Estás seguro de querer eliminar esta lección?');
     if (response) {
@@ -171,18 +140,31 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
   }
 
   public newLesson() {
-    this.onNewLesson.emit();
+    this.onAction.emit({ action: 'new' });
   }
 
-  public filterChanged(filters: any) {
-    console.log('filterChanged in dc-lesson-list', filters);
-    this.filterConfig = filters;
-    this.filterConfig.returnProps = returnProperties;
+  public applyFilterBarEvent(filterEvent: OnActionEvent) {
+    if (filterEvent.action == 'changeView') {
+      this.viewType = this.viewType === 'table' ? 'cards' : 'table';
+      return;
+    } else {
+      console.log('filterChanged in dc-lesson-list', filterEvent);
+      this.filterConfig = filterEvent.item;
+      this.filterConfig.returnProps = returnProperties;
 
-    this.getPaginatedLessons(this.filterConfig);
+      this.getPaginatedLessons(this.filterConfig);
+    }
   }
 
   protected override loadData(): Promise<void> {
     return this.getPaginatedLessons(this.filterConfig);
   }
+
+  public doOrEmitAction(actionEvent: OnActionEvent) {
+    if (actionEvent.action === 'delete') {
+      this.removeLesson(actionEvent.item);
+    } else {
+      this.onAction.emit(actionEvent);
+    }
+  }
 }

package/src/lib/components/lesson-mini-components/components/ComponentBuilder.ts

@@ -3,22 +3,24 @@ import { FormBuilder, FormControl } from '@angular/forms';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { LessonComponentBuilders, LessonComponentConfiguration, LessonComponentEnum, LessonCompSettings } from './lessons.clases';
+import { nanoid } from 'nanoid';
 
 // Create a type that maps the interface to FormControls
 export type LessonCompSettingsForm = {
   [K in keyof Required<LessonCompSettings>]: FormControl<LessonCompSettings[K]>;
 };
 
+export interface ComponentBuildData {
+  str: string;
+  obj: LessonComponentConfiguration;
+}
+
 @Component({
   selector: 'app-component-builder',
   template: '<div>no template</div>',
 })
 export class ComponentBuilder {
-  constructor(
-    protected formBuilder: FormBuilder,
-    // protected toastrService: ToastService, // protected ref: NbDialogRef<ComponentBuilder>,
-    protected ref: DynamicDialogRef,
-  ) {}
+  constructor(protected formBuilder: FormBuilder, protected ref: DynamicDialogRef) {}
 
   // Sobreescribir si es necesario
   // public formGroup = this.formBuilder.group<LessonCompSettings>({});
@@ -46,7 +48,7 @@ export class ComponentBuilder {
     return <LessonComponentEnum>name;
   }
 
-  private getCode(): string {
+  protected getCode(): LessonComponentConfiguration {
     const data = this.formGroup.value;
     // Deleting null values
     Object.keys(data).forEach((key) => {
@@ -54,21 +56,27 @@ export class ComponentBuilder {
         delete data[key];
       }
     });
-    const id = Math.random().toString(36).substring(7);
-    const code: LessonComponentConfiguration = { id: id, component: this.questionType, settings: { ...data } as unknown as LessonCompSettings };
-    return `~${JSON.stringify(code)}~`;
+    const code: LessonComponentConfiguration = { component: this.questionType, settings: { ...data } as unknown as LessonCompSettings };
+    return code;
   }
 
   public showCode() {
     const code = this.getCode();
-    alert(code);
+    const stringCode = `~${JSON.stringify(code)}~`;
+    alert(stringCode);
   }
 
-  public async copyToClipboard() {
+  public getComponentData(): ComponentBuildData {
     const code = this.getCode();
-    await navigator.clipboard.writeText(code);
-    // this.toastrService.info('Control + V para pegar', 'Se copió al portapapeles');
-    // this.ref.close();
-    this.ref.close(code);
+    const id = nanoid().replace(/-/g, '_');
+    code.id = id;
+    return { str: `~${JSON.stringify(code)}~`, obj: code };
+  }
+
+  // TODO: for now copyToClipboard is the that that closes modal and return data.
+  public async copyToClipboard() {
+    const data = this.getComponentData();
+    await navigator.clipboard.writeText(data.str);
+    this.ref.close(data);
   }
 }

package/src/lib/components/lesson-mini-components/components/lessons.clases.ts

@@ -9,7 +9,8 @@ import { TextWriterBuiderComponent } from './text-writer/text-writer-buider/text
 import { TextWriterComponent } from './text-writer/text-writer.component';
 import { TranslationSwitcherBuilderComponent } from './translationSwitcher/translationSwitcherBuilder/translationSwitcherBuilder.component';
 import { TranslationSwitcherComponent } from './translationSwitcher/translationSwitcher.component';
-// import { SpeakerComponent } from './speaker/speaker.component';
+import { SpeakerBuilderComponent } from './speaker/speaker-builder/speaker-builder.component';
+import { SpeakerComponent } from './speaker/speaker.component';
 
 export type LessonComponentsType = 'selector' | 'speaker' | 'text-writer' | 'verb-summary' | 'word-summary';
 
@@ -24,7 +25,7 @@ export enum LessonComponentEnum {
 
 export const LessonComponentBuilders = {
   [LessonComponentEnum.Selector]: SelectorBuilderComponent,
-  // [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+  [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
   [LessonComponentEnum.TextWriter]: TextWriterBuiderComponent,
   // [LessonComponentEnum.VerbSummary]: VerbSummaryBuilderComponent,
   // [LessonComponentEnum.WordSummary]: WordSummaryBuilderComponent,
@@ -33,7 +34,7 @@ export const LessonComponentBuilders = {
 
 export const LessonComponents = {
   [LessonComponentEnum.Selector]: SelectorComponent,
-  // [LessonComponentEnum.Speaker]: SpeakerComponent,
+  [LessonComponentEnum.Speaker]: SpeakerComponent,
   [LessonComponentEnum.TextWriter]: TextWriterComponent,
   // [LessonComponentEnum.VerbSummary]: VerbSummaryComponent,
   // [LessonComponentEnum.WordSummary]: WordSummaryComponent,
@@ -52,10 +53,12 @@ export interface LessonCompSettings {
   hint?: string;
   explanation?: string;
 }
-export interface LessonComponentConfiguration {
-  id: string;
+// Make LessonComponentConfiguration generic for settings
+export interface LessonComponentConfiguration<T extends LessonCompSettings = LessonCompSettings> {
+  id?: string;
   component: LessonComponentEnum;
-  settings: LessonCompSettings;
+  settings?: T; // for component that need and standards
+  inputs?: Record<string, any>; // for whatever component.
 }
 
 export interface StorageFile {
@@ -68,13 +71,15 @@ export interface AudioStorage extends StorageFile {
   text?: string;
   voiceType?: string;
 }
-export interface SpeakerCompConfiguration extends LessonComponentConfiguration {
+// Make SpeakerCompConfiguration extend the generic base interface
+export interface SpeakerCompConfiguration extends LessonComponentConfiguration<LessonCompSettings & { voice: string }> {
   audio: AudioStorage;
-  settings: LessonCompSettings & { voice: string };
+  // settings is now inherited correctly via the generic type argument
 }
 
 export interface LessonComponentInterface {
-  config: LessonComponentConfiguration;
+  // Update config to use the generic form
+  config: LessonComponentConfiguration<any>;
 
   control?: UntypedFormControl;
 
@@ -89,20 +94,8 @@ export interface LessonComponentInterface {
 
 export const LESSONS_TOKEN = new InjectionToken<LessonsAbstractService>('Lessons Service');
 
-// export enum LessonComponentEnum {
-//   Selector = 'selector',
-//   Speaker = 'speaker',
-//   TextWriter = 'textWriter',
-//   VerbSummary = 'verbSummary',
-//   WordSummary = 'wordSummary',
-//   TranslationSwitcher = 'translationSwitcher',
-// }
-
-export interface StorageFile {
-  bucket: string;
-  url: string;
-  path: string; // path where the file is in the storage
-}
+// Removed duplicate LessonComponentEnum definition
+// Removed duplicate StorageFile definition
 
 export interface ImgStorageData extends StorageFile {
   fullPath: string; // path + name
@@ -112,19 +105,15 @@ export interface ImgStorageData extends StorageFile {
 
 export type LessonImage = ImgStorageData & { type: string };
 
-// export interface LessonCompSettings {
-//   response: string;
-//   responses: string; // en caso de que haya multiples respuestas
-//   options: string[]; // optiones para visualizar
-//   text: string;
-//   hint: string;
-//   explanation: string;
-// }
+// Removed duplicate LessonCompSettings definition
+// Removed duplicate LessonComponentConfiguration definition
 
-export interface LessonComponentConfiguration {
-  id: string;
-  component: LessonComponentEnum;
-  settings: LessonCompSettings;
+//  New way of render components
+export interface DynamicContentComponent {
+  id: string; // duplicated id
+  component: LessonComponentEnum; // name of the component
+  inputs: Record<string, any>;
+  config: LessonComponentConfiguration<any>;
 }
 
 type StorageType = StorageFile & { type: string };
@@ -151,7 +140,9 @@ export interface ILesson {
   authorEmail: string;
   tags: string[];
   media: Media;
-  components: Array<LessonComponentConfiguration>;
+  // Update components array to use generic form
+  components: Array<LessonComponentConfiguration<any>>;
+  dynamicComponents: Record<string, DynamicContentComponent>;
   baseLang: string;
   targetLang: string;
 
@@ -197,36 +188,11 @@ export function provideLessonsService(serviceImplementation: Type<LessonsAbstrac
 //   return null;
 // }
 
-export interface LessonComponentConfiguration {
-  id: string;
-  component: LessonComponentEnum;
-  settings: LessonCompSettings;
-}
-
-export interface StorageFile {
-  bucket: string;
-  url: string;
-  path: string; // path where the file is in the storage
-}
-
-export interface AudioStorage extends StorageFile {
-  text?: string;
-  voiceType?: string;
-}
-
-export interface SpeakerCompConfiguration extends LessonComponentConfiguration {
-  audio: AudioStorage;
-  settings: LessonCompSettings & { voice: string };
-}
-
-export interface LessonComponentInterface {
-  config: LessonComponentConfiguration;
-
-  control?: UntypedFormControl;
-
-  validate?(): boolean | null;
-  evaluate?(): boolean | null;
-}
+// Removed duplicate LessonComponentConfiguration definition
+// Removed duplicate StorageFile definition
+// Removed duplicate AudioStorage definition
+// Removed duplicate SpeakerCompConfiguration definition
+// Removed duplicate LessonComponentInterface definition
 
 // export const LessonComponents = {
 //   [LessonComponentEnum.Selector]: 1,

package/src/lib/components/lesson-mini-components/components/selector/selector-builder/selector-builder.component.html

@@ -1,58 +1,62 @@
-<div>
-  <div>
-    <p-message>Construcción del componente de Selección, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>
-  </div>
-
-  <div>
-    <span>En que año llegó cristobal colon a america?</span>
-    <app-selector [config]="sampleConfig"></app-selector>
-  </div>
-
-  <hr />
-
-  <div>
-    <form class="builder-form" [formGroup]="formGroup">
-      <input class="form-input" type="text" pInputText fullWidth formControlName="response" placeholder="Respuesta Correcta..." />
-      <br />
-
-      <input class="form-input" type="" pInputText fullWidth formControlName="hint" placeholder="Escribe una pista para esta pregunta" />
-
-      <br />
-      <input
-        class="form-input"
-        type="text"
-        pInputText
-        fullWidth
-        formControlName="explanation"
-        placeholder="Excribe una explicación para la respuesta" />
-
-      <hr />
-      <h6>Opciones</h6>
-
-      <div class="form-group" formArrayName="options">
-        <div
-          style="display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column"
-          *ngFor="let item of optionsForm.controls; let i = index">
-          <div>
-            <input type="text" pInputText fullWidth [formControlName]="i" />
-            <p-button (click)="deleteFormArrayByIndex('options', i)" icon="pi pi-times" severity="danger"></p-button>
-          </div>
-        </div>
-      </div>
-
-      <p-button (click)="pushControlToFormArray('options')" label="Agregar Opción" [text]="true" severity="help"></p-button>
-    </form>
-
-    <!-- <button nbButton (click)="isRendered = !isRendered"> Renderizar </button> -->
-
-    <div *ngIf="isRendered">
-      <!-- TODO:  probably i need to pass some params -->
-      <app-selector></app-selector>
-    </div>
-  </div>
-
-  <div>
-    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código" [rounded]="true"></p-button>
-    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true" severity="secondary"></p-button>
-  </div>
-</div>
+<div>
+  <div>
+    <p-message>Construcción del componente de Selección, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>
+  </div>
+
+  <div>
+    <span>En que año llegó cristobal colon a america?</span>
+    <app-selector [config]="sampleConfig"></app-selector>
+  </div>
+
+  <hr />
+
+  <div>
+    <form class="builder-form" [formGroup]="formGroup">
+      <input class="form-input" type="text" pInputText fullWidth formControlName="response" placeholder="Respuesta Correcta..." />
+      <br />
+
+      <input class="form-input" type="" pInputText fullWidth formControlName="hint" placeholder="Escribe una pista para esta pregunta" />
+
+      <br />
+      <input
+        class="form-input"
+        type="text"
+        pInputText
+        fullWidth
+        formControlName="explanation"
+        placeholder="Excribe una explicación para la respuesta" />
+
+        <hr />
+        <h6>Opciones</h6>
+
+        <div class="form-group" formArrayName="options">
+          @for (item of optionsForm.controls; track item; let i = $index) {
+            <div
+              style="display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column"
+              >
+              <div>
+                <input type="text" pInputText fullWidth [formControlName]="i" />
+                <p-button (click)="deleteFormArrayByIndex('options', i)" icon="pi pi-times" severity="danger"></p-button>
+              </div>
+            </div>
+          }
+        </div>
+
+        <p-button (click)="pushControlToFormArray('options')" label="Agregar Opción" [text]="true" severity="help"></p-button>
+      </form>
+
+      <!-- <button nbButton (click)="isRendered = !isRendered"> Renderizar </button> -->
+
+      @if (isRendered) {
+        <div>
+          <!-- TODO:  probably i need to pass some params -->
+          <app-selector></app-selector>
+        </div>
+      }
+    </div>
+
+    <div>
+      <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código" [rounded]="true"></p-button>
+      <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true" severity="secondary"></p-button>
+    </div>
+  </div>

package/src/lib/components/lesson-mini-components/components/selector/selector-builder/selector-builder.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormArray, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { NgFor, NgIf } from '@angular/common';
+
 
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
@@ -16,7 +16,7 @@ import { LessonComponentConfiguration, LessonComponentEnum } from '../../lessons
   templateUrl: './selector-builder.component.html',
   styleUrls: ['./selector-builder.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgFor, NgIf, SelectorComponent, InputTextModule, ButtonModule, MessageModule],
+  imports: [FormsModule, ReactiveFormsModule, SelectorComponent, InputTextModule, ButtonModule, MessageModule],
 })
 export class SelectorBuilderComponent extends ComponentBuilder implements OnInit {
   constructor(

package/src/lib/components/lesson-mini-components/components/selector/selector.component.html

@@ -1,2 +1 @@
-<p-dropdown [class]="status" placeholder="Selecciona" [options]="config.settings.options" [formControl]="control"
-  [showClear]="true"></p-dropdown>
+<p-select [class]="status" placeholder="Selecciona" [options]="config.settings.options" [formControl]="control"></p-select>

package/src/lib/components/lesson-mini-components/components/selector/selector.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DropdownModule } from 'primeng/dropdown';
+import { SelectModule } from 'primeng/select';
 
 import { ComponentWithForm } from '../ComponentWithForm';
 import { LessonComponentConfiguration, LessonComponentInterface } from '../lessons.clases';
@@ -11,7 +11,7 @@ import { LessonComponentConfiguration, LessonComponentInterface } from '../lesso
   templateUrl: './selector.component.html',
   styleUrls: ['./selector.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, DropdownModule],
+  imports: [FormsModule, ReactiveFormsModule, SelectModule],
 })
 export class SelectorComponent extends ComponentWithForm implements LessonComponentInterface {
   public isFilled = false;

package/src/lib/components/lesson-mini-components/components/speaker/speaker-builder/speaker-builder.component.html

@@ -3,33 +3,11 @@
     <h5>Constructor de Speaker</h5>
   </div>
 
-  <form [formGroup]="formGroup">
-    <input type="text" pInputText fullWidth formControlName="text" placeholder="Texto..." />
+  <lib-ngx-tts (ttsGenerated)="handleTtsGenerated($event)"></lib-ngx-tts>
 
-    <br>
-    <p-dropdown [options]="voiceOptions" optionLabel="name" optionValue="id" [showClear]="true" placeholder="Voz"
-      formControlName="voice">
-
-      <ng-template let-voice pTemplate="item">
-        <div class="flex align-items-center gap-2">
-          <div>{{ voice.provider }}</div>
-          -
-          <div>{{ voice.name }}</div>
-        </div>
-      </ng-template>
-    </p-dropdown>
-
-  </form>
-
-  <br>
-  <br>
-  <br>
-
-  <br>
+  <br />
   <div>
-    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código"
-      [rounded]="true"></p-button>
-    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true"
-      severity="secondary"></p-button>
+    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código" [rounded]="true"></p-button>
+    <p-button (click)="showCode()" [disabled]="!tts()" label="Mostrar" [rounded]="true" severity="secondary"></p-button>
   </div>
-</div>
+</div>

package/src/lib/components/lesson-mini-components/components/speaker/speaker-builder/speaker-builder.component.ts

@@ -1,27 +1,40 @@
-// import { Component } from '@angular/core';
-// import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-// import { ComponentBuilder } from '../../ComponentBuilder';
-// import { ButtonModule } from 'primeng/button';
-// import { InputTextModule } from 'primeng/inputtext';
-// import { DropdownModule } from 'primeng/dropdown';
-// import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Component, signal } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ComponentBuilder } from '../../ComponentBuilder';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
+import { NgxTtsComponent, TTSGenerated } from '@dataclouder/ngx-tts';
+import { LessonComponentConfiguration, LessonCompSettings } from '../../lessons.clases';
 
-// @Component({
-//   selector: 'app-speaker-builder',
-//   templateUrl: './speaker-builder.component.html',
-//   styleUrls: ['./speaker-builder.component.scss'],
-//   standalone: true,
-//   imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule, DropdownModule],
-// })
-// export class SpeakerBuilderComponent extends ComponentBuilder {
-//   public override formGroup = this.formBuilder.group({ text: ['', Validators.required], voice: [''] });
-//   public voiceOptions = VoiceOptions;
+@Component({
+  selector: 'app-speaker-builder',
+  templateUrl: './speaker-builder.component.html',
+  styleUrls: ['./speaker-builder.component.scss'],
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule, DropdownModule, NgxTtsComponent],
+})
+export class SpeakerBuilderComponent extends ComponentBuilder {
+  public tts = signal<TTSGenerated | undefined>(undefined);
 
-//   constructor(
-//     protected override formBuilder: UntypedFormBuilder,
-//     // protected override toastrService: ToastService, // protected ref: NbDialogRef<ComponentBuilder>,
-//     protected override ref: DynamicDialogRef,
-//   ) {
-//     super(formBuilder, null);
-//   }
-// }
+  public handleTtsGenerated(event: TTSGenerated): void {
+    console.log('TTS generated:', event);
+    this.tts.set(event);
+  }
+
+  // Update return type and add settings object
+  protected override getCode(): LessonComponentConfiguration<LessonCompSettings & { voice: string }> {
+    const ttsValue = this.tts();
+    if (!ttsValue) {
+      // Handle the case where tts is undefined, maybe throw an error or return a default config
+      console.error('TTS data is not generated yet.');
+      // Depending on requirements, you might return a default/empty config or throw
+      return { component: this.questionType, inputs: {} }; // Example: return empty inputs
+    }
+    const code: LessonComponentConfiguration<LessonCompSettings & { voice: string }> = {
+      component: this.questionType,
+      inputs: { tts: ttsValue },
+    };
+    return code;
+  }
+}

package/src/lib/components/lesson-mini-components/components/speaker/speaker.component.html

@@ -1,7 +1,9 @@
-<!-- <nb-tag (click)="speach()" class="lisen" status="control" size="small" appearance="filled"
-  [text]="settings.text"></nb-tag> -->
-
-<button pButton style="padding: 0px 2px;" severity="help" size="small" (click)="speach()" [label]="config.settings.text"
-  [text]="true" [rounded]="true"></button>
-
-<!-- <p-button label="Secondary" [outlined]="true" ></p-button> -->
+<button
+  pButton
+  style="padding: 0px 2px"
+  severity="help"
+  size="small"
+  (click)="speach()"
+  [label]="config?.settings?.text"
+  [text]="true"
+  [rounded]="true"></button>