@dataclouder/ngx-lessons 0.1.16 → 0.1.19

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -7,12 +7,12 @@ import * as i1 from '@angular/forms';
 import { FormBuilder, FormControl, FormArray, FormsModule, ReactiveFormsModule, UntypedFormControl, FormGroup, Validators } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3 from 'primeng/inputtext';
+import * as i2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i1$4 from 'primeng/dynamicdialog';
-import { DynamicDialogRef, DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DynamicDialogConfig, DialogService } from 'primeng/dynamicdialog';
 import { nanoid } from 'nanoid';
-import * as i2 from 'primeng/select';
+import * as i2$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { TtsPlaygroundComponent, getRandomQuickVoice, NgxAiServicesService, ChatRoleVertex } from '@dataclouder/ngx-ai-services';
 import * as i1$2 from 'primeng/card';
@@ -23,12 +23,12 @@ import { DatePipe, CommonModule, KeyValuePipe, SlicePipe } from '@angular/common
 import { PopoverModule } from 'primeng/popover';
 import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i2$1 from 'primeng/speeddial';
+import * as i2$2 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { UserService } from '@dataclouder/ngx-users';
 import * as i1$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i3$2 from 'primeng/selectbutton';
+import * as i3$1 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i4$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
@@ -42,20 +42,20 @@ import { DividerModule } from 'primeng/divider';
 import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
 import * as i1$5 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i3$1 from 'primeng/splitter';
+import * as i3 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i2$2 from 'primeng/drawer';
+import * as i2$3 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
 import * as i4$3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import { TableModule } from 'primeng/table';
-import * as i3$3 from 'primeng/panel';
+import * as i3$2 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
 import * as i5$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { ToastModule } from 'primeng/toast';
-import * as i3$4 from 'primeng/textarea';
+import * as i3$3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { ChipModule } from 'primeng/chip';
 
@@ -228,6 +228,14 @@ class ComponentBuilder {
             explanation: new FormControl(null),
         });
     }
+    ngOnInit() {
+        this.populateForm();
+    }
+    populateForm() {
+        if (this.inputs) {
+            this.formGroup.patchValue(this.inputs);
+        }
+    }
     // Every component knows its type by comparing agains LessonComponentBuilders
     get questionType() {
         const self = this;
@@ -239,7 +247,7 @@ class ComponentBuilder {
         });
         return name;
     }
-    getCode() {
+    getFormValue() {
         const data = this.formGroup.value;
         // Deleting null values
         Object.keys(data).forEach((key) => {
@@ -247,6 +255,10 @@ class ComponentBuilder {
                 delete data[key];
             }
         });
+        return data;
+    }
+    getCode() {
+        const data = this.getFormValue();
         const code = { component: this.componentName, inputs: { ...data } };
         return code;
     }
@@ -293,7 +305,7 @@ class TextWriterBuiderComponent extends ComponentBuilder {
         this.componentName = 'TextWriter';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterBuiderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TextWriterBuiderComponent, isStandalone: true, selector: "app-text-writer-buider", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de formulario con texto</h5>\r\n  </div>\r\n\r\n  <div>\r\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\r\n      <input pInputText type=\"text\" nbInput fullWidth formControlName=\"response\" placeholder=\"Respuesta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"\" nbInput fullWidth formControlName=\"hint\"\r\n        placeholder=\"Escribe una pista para esta pregunta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"text\" nbInput fullWidth formControlName=\"explanation\"\r\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\r\n    </form>\r\n  </div>\r\n\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\"\r\n      [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\"\r\n      severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TextWriterBuiderComponent, isStandalone: true, selector: "app-text-writer-buider", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de formulario con texto</h5>\r\n  </div>\r\n\r\n  <div>\r\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\r\n      <input pInputText type=\"text\" nbInput fullWidth formControlName=\"response\" placeholder=\"Respuesta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"\" nbInput fullWidth formControlName=\"hint\"\r\n        placeholder=\"Escribe una pista para esta pregunta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"text\" nbInput fullWidth formControlName=\"explanation\"\r\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\r\n    </form>\r\n  </div>\r\n\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\"\r\n      [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\"\r\n      severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterBuiderComponent, decorators: [{
             type: Component,
@@ -360,7 +372,7 @@ class TextWriterComponent extends ComponentWithForm {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TextWriterComponent, isStandalone: true, selector: "app-text-writer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<input [class]=\"this.status\" pInputText [formControl]=\"control\" fieldSize=\"small\" type=\"text\" placeholder=\"Respuesta\"\n    [size]=\"size\" />\n\n<!-- [ngClass]=\"{ 'selected-radio': 'true']}\" -->", styles: [".warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TextWriterComponent, isStandalone: true, selector: "app-text-writer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<input [class]=\"this.status\" pInputText [formControl]=\"control\" fieldSize=\"small\" type=\"text\" placeholder=\"Respuesta\"\n    [size]=\"size\" />\n\n<!-- [ngClass]=\"{ 'selected-radio': 'true']}\" -->", styles: [".warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterComponent, decorators: [{
             type: Component,
@@ -375,7 +387,7 @@ class TranslationSwitcherBuilderComponent extends ComponentBuilder {
         this.componentName = 'TranslationSwitcher';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSwitcherBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TranslationSwitcherBuilderComponent, isStandalone: true, selector: "app-translation-switcher-builder", usesInheritance: true, ngImport: i0, template: "<div>\n  <div>\n    <h5>Constructor de translation switcher</h5>\n  </div>\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input style=\"width: 100%\" pInputText type=\"text\" nbInput fullWidth formControlName=\"text\" placeholder=\"Texto para visualizar\" />\n\n      <br /><br />\n\n      <input\n        style=\"width: 100%\"\n        pInputText\n        class=\"form-input\"\n        type=\"\"\n        nbInput\n        fullWidth\n        formControlName=\"response\"\n        placeholder=\"Traducci\u00F3n al hacer clic\" />\n    </form>\n  </div>\n  <br />\n  <div>\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TranslationSwitcherBuilderComponent, isStandalone: true, selector: "app-translation-switcher-builder", usesInheritance: true, ngImport: i0, template: "<div>\n  <div>\n    <h5>Constructor de translation switcher</h5>\n  </div>\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input style=\"width: 100%\" pInputText type=\"text\" nbInput fullWidth formControlName=\"text\" placeholder=\"Texto para visualizar\" />\n\n      <br /><br />\n\n      <input\n        style=\"width: 100%\"\n        pInputText\n        class=\"form-input\"\n        type=\"\"\n        nbInput\n        fullWidth\n        formControlName=\"response\"\n        placeholder=\"Traducci\u00F3n al hacer clic\" />\n    </form>\n  </div>\n  <br />\n  <div>\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSwitcherBuilderComponent, decorators: [{
             type: Component,
@@ -412,33 +424,29 @@ class SpeakerBuilderComponent extends ComponentBuilder {
     constructor() {
         super(...arguments);
         this.componentName = 'Speaker';
+        this.form = this.formBuilder.group({
+            text: new FormControl(null),
+        });
         this.tts = signal(undefined, ...(ngDevMode ? [{ debugName: "tts" }] : []));
     }
     handleTtsGenerated(event) {
         console.log('TTS generated:', event);
         this.tts.set(event);
     }
-    // Update return type and add settings object
-    getCode() {
-        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 = {
-            component: this.questionType,
-            inputs: { tts: ttsValue },
-        };
-        return code;
+    ngOnInit() {
+        super.ngOnInit();
+        console.log(this.inputs);
+        this.form.setValue(this.inputs);
+    }
+    getFormValue() {
+        return this.form.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerBuilderComponent, isStandalone: true, selector: "app-speaker-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: TtsPlaygroundComponent, selector: "dc-tts-playground", inputs: ["settings", "emitValues"], outputs: ["ttsGenerated", "formValues"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerBuilderComponent, isStandalone: true, selector: "app-speaker-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <div [formGroup]=\"form\">\r\n    <input pInputText formControlName=\"text\" placeholder=\"Enter text to speak\" />\r\n  </div>\r\n\r\n  <!-- Dont remove Este componente va a agregar la funcionalidad de generar el texto asi darle play va a reproducir este audio -->\r\n  <!-- <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground> -->\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-speaker-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule, SelectModule, TtsPlaygroundComponent], template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'app-speaker-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule, SelectModule, TtsPlaygroundComponent], template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <div [formGroup]=\"form\">\r\n    <input pInputText formControlName=\"text\" placeholder=\"Enter text to speak\" />\r\n  </div>\r\n\r\n  <!-- Dont remove Este componente va a agregar la funcionalidad de generar el texto asi darle play va a reproducir este audio -->\r\n  <!-- <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground> -->\r\n</div>\r\n" }]
         }] });
 
 // ❌ can use this until i copy services to this lib
@@ -446,22 +454,29 @@ class SpeakerComponent {
     ngOnInit() {
         // throw new Error('Method not implemented.');
     }
-    //   voiceOptions = VoiceOptions;
-    //   constructor(private speachService: SpeechService, private audioService: AudioService) {}
-    //   ngOnInit(): void {}
     speach() {
-        console.log('should speech but will do in next version');
+        if (this.tts && this.tts.storage.url) {
+            const audio = new Audio(this.tts.storage.url);
+            audio.play();
+        }
+        else {
+            // Primera versión del Speech To Text.
+            const utterance = new SpeechSynthesisUtterance(this.text);
+            speechSynthesis.speak(utterance);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts" }, ngImport: i0, template: "<h4>Speacker component</h4>\r\n\r\n<!-- <p-button severity=\"help\" [label]=\"config?.settings?.text\" (click)=\"speach()\" /> -->\r\n\r\n<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"config?.settings?.text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts", text: "text" }, ngImport: i0, template: "<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-speaker', standalone: true, imports: [ButtonModule], template: "<h4>Speacker component</h4>\r\n\r\n<!-- <p-button severity=\"help\" [label]=\"config?.settings?.text\" (click)=\"speach()\" /> -->\r\n\r\n<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"config?.settings?.text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
+            args: [{ selector: 'app-speaker', standalone: true, imports: [ButtonModule], template: "<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], tts: [{
                 type: Input
+            }], text: [{
+                type: Input
             }] } });
 
 class SelectorComponent extends ComponentWithForm {
@@ -493,7 +508,7 @@ class SelectorComponent extends ComponentWithForm {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SelectorComponent, isStandalone: true, selector: "app-selector", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<p-select [class]=\"status\" placeholder=\"Selecciona\" [options]=\"config.settings.options\" [formControl]=\"control\"></p-select>\r\n", styles: ["::ng-deep .comp-selector button{min-width:80px}.warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SelectorComponent, isStandalone: true, selector: "app-selector", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<p-select [class]=\"status\" placeholder=\"Selecciona\" [options]=\"config.settings.options\" [formControl]=\"control\"></p-select>\r\n", styles: ["::ng-deep .comp-selector button{min-width:80px}.warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorComponent, decorators: [{
             type: Component,
@@ -520,6 +535,7 @@ class SelectorBuilderComponent extends ComponentBuilder {
         };
     }
     ngOnInit() {
+        super.ngOnInit();
         this.formGroup.get('response');
     }
     //TODO Probablemente estos 3 pueden irse a una clase abstracta
@@ -535,7 +551,7 @@ class SelectorBuilderComponent extends ComponentBuilder {
         return this.formGroup.get('options');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div class=\"p-fluid grid\">\n  <div class=\"col-12 md:col-6\">\n    <p-card header=\"Ejemplo de componente\">\n      <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n      <div class=\"mt-4\">\n        <p>En que a\u00F1o lleg\u00F3 cristobal colon a america?</p>\n        <app-selector [config]=\"sampleConfig\"></app-selector>\n      </div>\n    </p-card>\n  </div>\n\n  <hr />\n\n  <div class=\"col-12 md:col-6\">\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <div class=\"field\">\n        <label for=\"response\">Respuesta Correcta</label>\n        <input id=\"response\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"hint\">Pista</label>\n        <input id=\"hint\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"explanation\">Explicaci\u00F3n</label>\n        <input\n          id=\"explanation\"\n          class=\"form-input\"\n          type=\"text\"\n          pInputText\n          fullWidth\n          formControlName=\"explanation\"\n          placeholder=\"Escribe una explicaci\u00F3n para la respuesta\" />\n      </div>\n\n      <hr />\n      <h6>Opciones</h6>\n\n      <div class=\"form-group\" formArrayName=\"options\">\n        @for (item of optionsForm.controls; track item; let i = $index) {\n        <div class=\"field grid align-items-center\">\n          <div class=\"col\">\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n          </div>\n          <div class=\"col-fixed\" style=\"width: auto\">\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n          </div>\n        </div>\n        }\n      </div>\n\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n    </form>\n\n    @if (isRendered) {\n    <div class=\"mt-4\">\n      <app-selector></app-selector>\n    </div>\n    }\n\n    <div class=\"mt-4 flex justify-content-end gap-2\">\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n</div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: SelectorComponent, selector: "app-selector", inputs: ["config"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div class=\"p-fluid grid\">\n  <div class=\"col-12 md:col-6\">\n    <p-card header=\"Ejemplo de componente\">\n      <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n      <div class=\"mt-4\">\n        <p>En que a\u00F1o lleg\u00F3 cristobal colon a america?</p>\n        <app-selector [config]=\"sampleConfig\"></app-selector>\n      </div>\n    </p-card>\n  </div>\n\n  <hr />\n\n  <div class=\"col-12 md:col-6\">\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <div class=\"field\">\n        <label for=\"response\">Respuesta Correcta</label>\n        <input id=\"response\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"hint\">Pista</label>\n        <input id=\"hint\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"explanation\">Explicaci\u00F3n</label>\n        <input\n          id=\"explanation\"\n          class=\"form-input\"\n          type=\"text\"\n          pInputText\n          fullWidth\n          formControlName=\"explanation\"\n          placeholder=\"Escribe una explicaci\u00F3n para la respuesta\" />\n      </div>\n\n      <hr />\n      <h6>Opciones</h6>\n\n      <div class=\"form-group\" formArrayName=\"options\">\n        @for (item of optionsForm.controls; track item; let i = $index) {\n        <div class=\"field grid align-items-center\">\n          <div class=\"col\">\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n          </div>\n          <div class=\"col-fixed\" style=\"width: auto\">\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n          </div>\n        </div>\n        }\n      </div>\n\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n    </form>\n\n    @if (isRendered) {\n    <div class=\"mt-4\">\n      <app-selector></app-selector>\n    </div>\n    }\n\n    <div class=\"mt-4 flex justify-content-end gap-2\">\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n</div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: SelectorComponent, selector: "app-selector", inputs: ["config"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorBuilderComponent, decorators: [{
             type: Component,
@@ -544,13 +560,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 var LessonComponentEnum;
 (function (LessonComponentEnum) {
-    LessonComponentEnum["Selector"] = "selector";
-    LessonComponentEnum["Speaker"] = "speaker";
-    LessonComponentEnum["TextWriter"] = "textWriter";
-    LessonComponentEnum["VerbSummary"] = "verbSummary";
-    LessonComponentEnum["WordSummary"] = "wordSummary";
-    LessonComponentEnum["TranslationSwitcher"] = "translationSwitcher";
-    LessonComponentEnum["PlayWord"] = "playWord";
+    LessonComponentEnum["Selector"] = "Selector";
+    LessonComponentEnum["Speaker"] = "Speaker";
+    LessonComponentEnum["TextWriter"] = "TextWriter";
+    LessonComponentEnum["VerbSummary"] = "VerbSummary";
+    LessonComponentEnum["WordSummary"] = "WordSummary";
+    LessonComponentEnum["TranslationSwitcher"] = "TranslationSwitcher";
+    LessonComponentEnum["PlayWord"] = "PlayWord";
 })(LessonComponentEnum || (LessonComponentEnum = {}));
 const LessonComponentBuilders = {
     [LessonComponentEnum.Selector]: SelectorBuilderComponent,
@@ -626,7 +642,7 @@ class DcLessonCardComponent {
         this.onAction.emit({ action: eventType, item: this.lesson });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(this.userService.isAdmin()){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status || 'No status'\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(this.userService.isAdmin()){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status || 'No status'\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
@@ -642,6 +658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class DefaultLessonsService extends EntityCommunicationService {
+    getFixedQuery() {
+        return {};
+    }
     constructor() {
         super('lesson');
         // --- Endpoint Definitions for methods not in EntityCommunicationService ---
@@ -750,7 +769,25 @@ class DCLessonListComponent extends EntityBaseListComponent {
         // Services
         this.userService = inject(UserService);
         // Inputs
-        this.customFilters = [];
+        this.customFilters = [
+            {
+                name: 'Tags',
+                field: 'tags',
+                type: 'string',
+                operator: '$regex',
+            },
+            {
+                name: 'Format',
+                field: 'format',
+                type: 'select',
+                operator: '$eq',
+                options: [
+                    { label: 'HTML', value: 'html' },
+                    { label: 'Markdown', value: 'markdown' },
+                ],
+            },
+        ];
+        this.persistenceKey = 'lessons_list';
         // Injected Services
         // I dont rename so use the same in EntityBaseListComponent and Pagination
         this.entityCommunicationService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
@@ -805,13 +842,15 @@ class DCLessonListComponent extends EntityBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customFilters: "customFilters" }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <dc-lesson-card [lesson]=\"lesson\" [showOptions]=\"true\" (onAction)=\"handleAction($event)\"></dc-lesson-card>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: DcLessonCardComponent, selector: "dc-lesson-card", inputs: ["lesson", "showOptions", "cardHeight"], outputs: ["onAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customFilters: "customFilters", persistenceKey: "persistenceKey" }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  [persistenceKey]=\"persistenceKey\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <dc-lesson-card [lesson]=\"lesson\" [showOptions]=\"true\" (onAction)=\"handleAction($event)\"></dc-lesson-card>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "customSortOptions", "isAdmin", "persistenceKey"], outputs: ["onFilterAction", "onNew"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: DcLessonCardComponent, selector: "dc-lesson-card", inputs: ["lesson", "showOptions", "cardHeight"], outputs: ["onAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, QuickTableComponent, PaginatorModule, DcLessonCardComponent], template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <dc-lesson-card [lesson]=\"lesson\" [showOptions]=\"true\" (onAction)=\"handleAction($event)\"></dc-lesson-card>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"] }]
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, QuickTableComponent, PaginatorModule, DcLessonCardComponent], template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  [persistenceKey]=\"persistenceKey\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <dc-lesson-card [lesson]=\"lesson\" [showOptions]=\"true\" (onAction)=\"handleAction($event)\"></dc-lesson-card>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { customFilters: [{
                 type: Input
+            }], persistenceKey: [{
+                type: Input
             }] } });
 
 class DCLessonFormComponent {
@@ -1012,7 +1051,7 @@ class LessonUtilsService {
         // if (!lesson?.components) {
         //   return;
         // }
-        alert('I need to refactor this part');
+        // alert('I need to refactor this part');
         // Placeholder logic - adapt as needed from original component
         console.log('Validating audios for lesson:', lesson.id);
     }
@@ -1295,39 +1334,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class DynamicComponentsBuilderService {
-    #dialogService = inject(DialogService);
-    #toastService = inject(TOAST_ALERTS_TOKEN);
-    #dynamicComponentsService = inject(DynamicComponentsRegisterService);
-    openComponentBuilder(componentType, data = null) {
-        const componentToBuild = this.#dynamicComponentsService.getDynamicComponentBuilders(componentType);
-        if (!componentToBuild) {
-            console.error(`No component builder found for type: ${componentType}`);
-            this.#toastService.error({ title: 'Error', subtitle: `Componente desconocido: ${componentType}` });
-            return undefined;
-        }
-        const dialogRef = this.#dialogService.open(componentToBuild, {
-            inputValues: {
-                // inputValues was removed in newer PrimeNG versions, use 'data'
-                inputs: data?.inputs,
-                id: data?.id,
-            },
-            width: '80vw',
-            header: 'Agregar componente',
-            closable: true,
-        });
-        return dialogRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class DynamicComponentBuilderDialogComponent {
     #config;
     constructor(ref) {
@@ -1342,6 +1348,9 @@ class DynamicComponentBuilderDialogComponent {
             if (componentClass) {
                 this.container.clear();
                 this.componentRef = this.container.createComponent(componentClass);
+                if (this.#config.data.inputs) {
+                    this.componentRef.instance.inputs = this.#config.data.inputs;
+                }
             }
             else {
                 console.error(`Component class not found for type: ${componentType}`);
@@ -1350,14 +1359,16 @@ class DynamicComponentBuilderDialogComponent {
     }
     copyCode() {
         // navigator.clipboard.writeText(this.#config.data.type);
-        alert('Copied to clipboard');
         if (this.componentRef) {
             // You can now access any public property on the component instance
             // For example, if your dynamic component has a 'properties' property:
-            console.log('Component properties: ', this.componentRef.instance.getComponentData());
             const dynamicObjectData = this.componentRef.instance.getComponentData();
+            console.log('Dynamic object data:', dynamicObjectData);
+            // Copy to clipboard
+            navigator.clipboard.writeText(dynamicObjectData.str);
+            alert(dynamicObjectData.str);
+            this.ref.close();
         }
-        console.log(this.container);
     }
     addToEnd() {
         if (this.componentRef) {
@@ -1376,55 +1387,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: ['container', { read: ViewContainerRef, static: true }]
             }] } });
 
-class DCLessonComponentAdderComponent {
+class DynamicComponentsBuilderService {
+    #dialogService = inject(DialogService);
+    openComponentBuilder(type, inputs = {}) {
+        return this.#dialogService.open(DynamicComponentBuilderDialogComponent, {
+            header: 'Select a Component',
+            width: '60vw',
+            modal: true,
+            closable: true,
+            data: {
+                type: type,
+                inputs: inputs,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DCDynamicComponentsSelector {
     constructor() {
         // Services
         this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
-        this.dialogService = inject(DialogService);
         this.componentAdded = new EventEmitter(); // Changed Output name and type
         this.onNewDynamicComponent = new EventEmitter();
         // Expose enum to the template
         this.lessonComponentEnum = LessonComponentEnum;
     }
-    // Logic to open component builder, now utilizing DynamicComponentsBuilderService
     openComponentBuilder(type) {
-        const dialogRef = this.dynamicComponentsBuilderService.openComponentBuilder(type);
-        if (dialogRef) {
-            // Handle the result and emit the new event
-            dialogRef.onClose.subscribe((result) => {
-                if (result) {
-                    console.log('Component builder closed:', result);
-                    this.componentAdded.emit(result); // Emit the result when dialog closes successfully
-                }
-            });
-        }
-        else {
-            // Optional: Log if the dialog couldn't be opened, though the service already logs an error.
-            console.warn(`Dialog could not be opened for type via component: ${type}`);
-        }
-    }
-    openComponentBuilder2(type) {
-        this.ref = this.dialogService.open(DynamicComponentBuilderDialogComponent, {
-            header: 'Select a Component',
-            width: '60vw',
-            modal: true,
-            closable: true,
-            data: {
-                type: type,
-            },
-        });
+        this.ref = this.dynamicComponentsBuilderService.openComponentBuilder(type);
         this.ref.onClose.subscribe((result) => {
             if (result) {
                 this.onNewDynamicComponent.emit(result);
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded", onNewDynamicComponent: "onNewDynamicComponent" }, providers: [DialogService], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCDynamicComponentsSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCDynamicComponentsSelector, isStandalone: true, selector: "dc-dynamic-components-selector", outputs: { componentAdded: "componentAdded", onNewDynamicComponent: "onNewDynamicComponent" }, providers: [], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCDynamicComponentsSelector, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-component-adder', standalone: true, imports: [CommonModule, ButtonModule, TooltipModule], providers: [DialogService], template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n" }]
+            args: [{ selector: 'dc-dynamic-components-selector', standalone: true, imports: [CommonModule, ButtonModule, TooltipModule], providers: [], template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n" }]
         }], propDecorators: { componentAdded: [{
                 type: Output
             }], onNewDynamicComponent: [{
@@ -1592,7 +1601,7 @@ class DCLessonMetadataEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { form: "form", lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added TooltipModule
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { form: "form", lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added TooltipModule
                 InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
@@ -1641,10 +1650,6 @@ class LessonFormEditorService {
             description: [''],
             format: ['html'],
             lang: [''],
-            characterCard: [],
-            conversationSettings: [],
-            metaApp: [],
-            conversationFlow: [],
             textCoded: [''],
             manageable: this.formUtils.createManageableFormGroup(),
             learnable: this.formUtils.createLearnableFormGroup(),
@@ -1667,7 +1672,7 @@ class LessonRendererService {
         this.components = {};
         this.mainForm = new FormGroup({});
     }
-    renderLesson(lessonData, viewContainerRef, dynamicLessonElement, renderer) {
+    buildAndRenderDynamicComponents(lessonData, viewContainerRef, dynamicLessonElement, renderer) {
         this.clearLessonRendering(dynamicLessonElement);
         console.log('Rendering lesson:', lessonData.id);
         const { htmlContent, components } = this.parseAndCreateComponents(lessonData, viewContainerRef);
@@ -1713,6 +1718,10 @@ class LessonRendererService {
             }
             const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
             if (!LessonClass) {
+                this.toastrService.warn({
+                    title: 'Componente Invalido',
+                    subtitle: `Se intentó crear el componente ${lessonCodedConfig.component} pero no se encontró la clase en el registro de componentes`,
+                });
                 console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
                 return null;
             }
@@ -2070,7 +2079,7 @@ class DCLessonRendererComponent {
             // Quick fix to only render on changes textCode not all the lesson
             if (newTextCoded !== this.previousTextCoded) {
                 if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
-                    this.components = this.lessonRendererService.renderLesson(currentLesson, this.viewContainerRef, dynamicLessonRefEl.nativeElement, this.renderer);
+                    this.components = this.lessonRendererService.buildAndRenderDynamicComponents(currentLesson, this.viewContainerRef, dynamicLessonRefEl.nativeElement, this.renderer);
                     this.mainForm = this.lessonRendererService.mainForm;
                 }
                 else {
@@ -2156,7 +2165,7 @@ class DCLessonRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLessonRef", first: true, predicate: ["dynamicLessonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLessonRef class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLessonRef", first: true, predicate: ["dynamicLessonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLessonRef class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
             type: Component,
@@ -2193,7 +2202,7 @@ class DcLessonTextEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLessonTextEditorComponent, isStandalone: true, selector: "dc-lesson-text-editor", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveLesson: "saveLesson", updateLesson: "updateLesson" }, ngImport: i0, template: "<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson.emit($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [(ngModel)]=\"httpTemporalModel\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n", dependencies: [{ kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1$5.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i3$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLessonTextEditorComponent, isStandalone: true, selector: "dc-lesson-text-editor", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveLesson: "saveLesson", updateLesson: "updateLesson" }, ngImport: i0, template: "<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson.emit($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [(ngModel)]=\"httpTemporalModel\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n", dependencies: [{ kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1$5.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i3.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonTextEditorComponent, decorators: [{
             type: Component,
@@ -2246,6 +2255,7 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         this.promptService = inject(PromptService);
         this.ngxVertexService = inject(NgxAiServicesService);
         this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
+        this.formUtil = inject(FormUtilsService);
         this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : []));
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
@@ -2266,6 +2276,7 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
     }
     patchForm(entity) {
         this.form.patchValue(entity);
+        this.formUtil.patchLearnableFormGroup(this.form.controls.learnable, entity.learnable);
     }
     /**
      * Updates a specific property on the lesson signal.
@@ -2299,7 +2310,8 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
     async saveLesson(event) {
         // TODO: Revisar por ahora uso el método del padre para guardar. pero creo que este era para guardar la lección.
         event?.preventDefault();
-        const currentLesson = this.entity();
+        const textCoded = this.entity().textCoded;
+        const currentLesson = { ...this.entity(), ...this.form.value, textCoded };
         if (!currentLesson) {
             this.toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
             return undefined;
@@ -2369,21 +2381,15 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         await this.lessonNotionService.improveLessonWithNotionAI(this.entity());
     }
     onNewDynamicComponent(result) {
-        const newComponentConfig = result?.obj;
-        if (newComponentConfig?.id) {
+        const componentData = result?.obj;
+        if (componentData?.id) {
             this.entity.update((currentLesson) => {
                 if (!currentLesson)
                     return undefined;
-                const newDynamicComponent = {
-                    id: newComponentConfig.id,
-                    component: newComponentConfig.component,
-                    inputs: newComponentConfig.inputs || {},
-                    config: newComponentConfig,
-                };
                 const currentDynamicComponents = currentLesson.dynamicComponents || {};
                 const updatedDynamicComponents = {
                     ...currentDynamicComponents,
-                    [newComponentConfig.id]: newDynamicComponent,
+                    [componentData.id]: componentData,
                 };
                 const updatedTextCoded = (currentLesson.textCoded || '') + result.str;
                 return { ...currentLesson, dynamicComponents: updatedDynamicComponents, textCoded: updatedTextCoded };
@@ -2420,7 +2426,7 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
     }
     editComponent(comp) {
         console.log('Edit component:', comp);
-        this.dynamicComponentsBuilderService.openComponentBuilder(comp.component, comp).onClose.subscribe((result) => {
+        this.dynamicComponentsBuilderService.openComponentBuilder(comp.component, comp.inputs).onClose.subscribe((result) => {
             this.onComponentAdded(result);
         });
     }
@@ -2428,7 +2434,7 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         this.entityCommunicationService.partialUpdate(this.entityId(), { assets: event.assets });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\" (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-lesson-component-adder>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded", "onNewDynamicComponent"] }, { kind: "ngmodule", type: // Add the component adder here
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-dynamic-components-selector\n  (componentAdded)=\"onComponentAdded($event)\"\n  (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-dynamic-components-selector>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCDynamicComponentsSelector, selector: "dc-dynamic-components-selector", outputs: ["componentAdded", "onNewDynamicComponent"] }, { kind: "ngmodule", type: // Add the component adder here
                 DialogModule }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "component", type: DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["form", "lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: DcLessonTextEditorComponent, selector: "dc-lesson-text-editor", inputs: ["lessonInput"], outputs: ["saveLesson", "updateLesson"] }, { kind: "component", type: DcDynamicComponentPreviewComponent, selector: "dc-dynamic-component-preview", inputs: ["dynamicComponentsArray"], outputs: ["showComponentDetails", "editComponent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
@@ -2440,7 +2446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         ReactiveFormsModule,
                         SelectButtonModule,
                         TooltipModule,
-                        DCLessonComponentAdderComponent, // Add the component adder here
+                        DCDynamicComponentsSelector, // Add the component adder here
                         DialogModule,
                         AssetsLoaderComponent,
                         DCLessonMetadataEditorComponent,
@@ -2448,7 +2454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DcLearnableFormComponent,
                         DcLessonTextEditorComponent,
                         DcDynamicComponentPreviewComponent,
-                    ], template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\" (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-lesson-component-adder>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"] }]
+                    ], template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-dynamic-components-selector\n  (componentAdded)=\"onComponentAdded($event)\"\n  (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-dynamic-components-selector>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"] }]
         }] });
 
 class LessonsV2Component {
@@ -2635,7 +2641,7 @@ class CourseListComponent extends PaginationBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: LangDescTranslation, name: "langDesc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "customSortOptions", "isAdmin", "persistenceKey"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: LangDescTranslation, name: "langDesc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, decorators: [{
             type: Component,
@@ -2704,7 +2710,7 @@ class CourseDetailComponent {
         this.course.set(course);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$3.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, decorators: [{
             type: Component,
@@ -2769,7 +2775,7 @@ class CourseFormComponent extends EntityBaseFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, decorators: [{
             type: Component,