@dataclouder/ngx-lessons 0.1.2 → 0.1.4

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,68 +1,242 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ChangeDetectionStrategy, signal, InjectionToken, Pipe, EventEmitter, Output, ViewChildren, Inject, inject, Injectable, input, Renderer2, ViewContainerRef, computed, effect, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy, signal, EventEmitter, Output, Injectable, effect, ViewChildren, input, Renderer2, ViewContainerRef, computed, ViewChild, ChangeDetectorRef, output } from '@angular/core';
+import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, SlicePipe } from '@angular/common';
+import * as i1$3 from '@angular/router';
+import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, UiStateService, EModelQuality, LoadingBarService, PromptService, DcExtensionsViewerComponent, DcLearnableViewerComponent, DcAuditableViewerComponent, DcManageableViewerComponent, DcReactionsViewerComponent, HttpCoreService, PaginationBase, EntityBaseFormComponent, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
 import * as i1 from '@angular/forms';
-import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule, Validators, FormGroup } from '@angular/forms';
-import * as i4 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
+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 i5 from 'primeng/message';
-import { MessageModule } from 'primeng/message';
+import * as i3 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import { DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
 import { nanoid } from 'nanoid';
-import * as i2 from 'primeng/dynamicdialog';
-import { DialogService } from 'primeng/dynamicdialog';
-import * as i2$1 from 'primeng/select';
+import * as i2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import { DropdownModule } from 'primeng/dropdown';
-import { NgxTtsComponent } from '@dataclouder/ngx-tts';
-import * as i2$3 from 'primeng/paginator';
-import { PaginatorModule } from 'primeng/paginator';
-import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/router';
-import { RouterModule, ActivatedRoute, Router } from '@angular/router';
-import * as i4$2 from '@dataclouder/ngx-core';
-import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService, HttpCoreService, PromptService } from '@dataclouder/ngx-core';
+import { TTSPlayground, getRandomQuickVoice, NgxVertexService, ChatRoleVertex } from '@dataclouder/ngx-vertex';
+import * as i4 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
 import { PopoverModule } from 'primeng/popover';
 import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i2$2 from 'primeng/speeddial';
+import * as i2$1 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i3 from 'primeng/card';
+import * as i3$1 from 'primeng/card';
 import { CardModule } from 'primeng/card';
+import * as i1$2 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
-import * as i3$1 from '@ckeditor/ckeditor5-angular';
+import * as i3$2 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i5$2 from 'primeng/splitter';
+import * as i5$1 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i2$5 from 'primeng/tooltip';
+import * as i2$3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { ResolutionType, AspectType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import { TextEngines, ConversationType, USER_DATA_EXCHANGE, ChatRole, EvalResultStringDefinition, ChatEventType, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
-import * as i2$4 from 'primeng/drawer';
+import { ResolutionType, AspectType, AssetsLoaderComponent, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
+import { TextEngines, ConversationType, USER_DATA_EXCHANGE, SystemPromptType, ChatRole, EvalResultStringDefinition, EDoActionType, ConditionOperator, ConditionType, ConversationEvents, ChatEventType, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
+import * as i2$2 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import * as i7 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import TurndownService from 'turndown';
 import { marked } from 'marked';
-import * as i5$1 from 'primeng/inputgroup';
+import * as i5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import * as i6 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
-import { NgxVertexService, ChatRoleVertex } from '@dataclouder/ngx-vertex';
-import * as i2$6 from 'primeng/api';
+import * as i2$4 from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import * as i3$3 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import { ChipModule } from 'primeng/chip';
+import { FormlyModule } from '@ngx-formly/core';
+
+// This pipe should not be here in the lessons, refactor when is posible and remove LangCodeDescription
+const LangCodeDescription = {
+    es: 'Spanish',
+    en: 'English',
+    it: 'Italian',
+    pt: 'Portuguese',
+    fr: 'French',
+    ja: 'Japanese',
+};
+const LangCodeDescriptionEs = {
+    es: 'Español',
+    en: 'Inglés',
+    it: 'Italiano',
+    pt: 'Portugués',
+    fr: 'Frances',
+    ja: 'Japonés',
+};
+class LangDescTranslationPipe {
+    transform(value, lang) {
+        if (lang === 'es') {
+            return LangCodeDescriptionEs[value];
+        }
+        else {
+            return LangCodeDescription[value];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, isStandalone: true, name: "langDesc" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'langDesc',
+                    standalone: true,
+                }]
+        }] });
+class FlagLanguagePipe {
+    transform(lang) {
+        if (lang === 'en') {
+            return '🇺🇸';
+        }
+        else if (lang === 'es') {
+            return '🇲🇽';
+        }
+        else if (lang === 'fr') {
+            return '🇫🇷';
+        }
+        else if (lang === 'it') {
+            return '🇮🇹';
+        }
+        else if (lang === 'pt') {
+            return '🇧🇷';
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlagLanguagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: FlagLanguagePipe, isStandalone: true, name: "flagEmoji" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlagLanguagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'flagEmoji',
+                    standalone: true,
+                }]
+        }] });
+
+// NOTE: what to do? IAgent Deponds on ngx-agent-cards but lessons don't
+// import { IAgentCard } from '@dataclouder/ngx-agent-cards';
+const NOTION_SERVICE_TOKEN = new InjectionToken('notion.service');
+class NotionAbstractService {
+}
+function provideNotionService(serviceImplementation) {
+    return [
+        {
+            provide: NOTION_SERVICE_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+var NotionExportType;
+(function (NotionExportType) {
+    NotionExportType["HTML"] = "html";
+    NotionExportType["MARKDOWN"] = "markdown";
+    NotionExportType["PLAIN_TEXT"] = "plain_text";
+    NotionExportType["SIMPLE_BLOCKS"] = "simple_blocks";
+})(NotionExportType || (NotionExportType = {}));
+
+const MarkdownWriterSkill = `
+You are an Expert Markdown Writer with the following qualities:
+You are a world-class Markdown formatting specialist who excels at organizing information in a visually appealing and highly accessible manner. Your writing combines technical precision with creative presentation to engage readers of all backgrounds.
+Your Core Skills 📝
+
+You transform complex information into beautifully structured Markdown documents
+You strategically use headings, lists, and formatting to create clear visual hierarchies
+You incorporate helpful emojis to enhance readability and engagement
+You write in a clear, concise style that's accessible to general audiences
+
+Your Process Approach 🔄
+
+You always begin with a logical document structure before adding content
+You organize information into clearly defined sections with descriptive headings
+You balance visual elements with textual content for optimal readability
+You maintain consistent formatting patterns throughout documents
+
+Your Writing Style ✨
+
+You use simple, direct language that's easy for everyone to understand
+You explain technical concepts using everyday examples and analogies
+You create a friendly, conversational tone while maintaining professionalism
+You break down complex ideas into manageable segments
+
+Your Special Touches 🎯
+
+You know exactly when and where to add emojis for maximum impact
+You create custom tables to present comparative information effectively
+You use blockquotes to highlight important takeaways
+You incorporate visual dividers to separate major content sections
+
+When responding to requests, you'll first understand the subject matter, then organize it into a logical structure with clear headings, appropriate formatting elements, and helpful visual enhancements. Your goal is always to create content that's not only informative but also visually engaging and accessible to all readers.
+`;
+const UserRequirements = `
+  User also can provide additional instructions or requirements for the lesson or current lesson to improve it.
+`;
+const LanguageLessonSkill = (langBase, langTarget) => `
+
+You are also a ${langTarget} lesson professor, you write lessons for ${langBase} learners.
+explain the best you can will all your experience teaching.
+
+You can infer the level of the lesson from the content or user request, so can increase difficulty
+
+For Basic Level: generate a ${langTarget} lesson for ${langBase} learners at a basic level (A1-A2).
+
+Include:
+
+- Simple dialogues or short texts.
+- Key vocabulary with simple definitions or ${langBase} translations.
+- Basic grammar points explained simply (e.g., "to be" verb, simple present).
+- Practice exercises (e.g., fill-in-the-blanks, simple questions).
+
+For Intermediate Level: generate a ${langTarget} lesson for ${langBase} learners at a medium level (B1-B2).
+
+Include:
+
+- Texts or dialogues of moderate length and complexity.
+- New vocabulary and common phrasal verbs with context.
+- Explanation and practice of intermediate grammar points (e.g., past simple vs. present perfect, conditionals).
+- Exercises that require more detailed responses or understanding.
+- The content should be engaging and cover topics relevant to daily life, work, or hobbies.
+
+For Advanced Level: generate a ${langTarget} lesson for ${langBase} learners at an advanced level (C1-C2).
+
+Include:
+
+- Challenging texts or discussions.
+- Advanced vocabulary, idioms, and nuanced expressions.
+- Exploration of complex grammar or stylistic points.
+- Exercises that encourage critical thinking, debate, or detailed writing.
+- The content should be stimulating and cover a wide range of topics, including academic or professional contexts.
+`;
+const getLanguageSimpleAgent = (langBase, langTarget) => {
+    return {
+        systemPrompt: `
+    ${MarkdownWriterSkill}
+    ${LanguageLessonSkill(langBase, langTarget)}
+    ${UserRequirements}
+
+  `,
+        model: { id: 'gemini-2.5-flash-preview-04-17', provider: 'google' },
+    };
+};
 
 class ComponentBuilder {
-    constructor(formBuilder, ref) {
-        this.formBuilder = formBuilder;
-        this.ref = ref;
+    constructor() {
+        this.formBuilder = inject(FormBuilder);
+        this.ref = inject(DynamicDialogRef);
         // Sobreescribir si es necesario
         // public formGroup = this.formBuilder.group<LessonCompSettings>({});
         this.formGroup = this.formBuilder.group({
             response: new FormControl(null),
             responses: new FormControl(null),
-            options: this.formBuilder.array([]),
+            options: new FormArray([]),
             text: new FormControl(null),
             hint: new FormControl(null),
             explanation: new FormControl(null),
@@ -87,7 +261,7 @@ class ComponentBuilder {
                 delete data[key];
             }
         });
-        const code = { component: this.questionType, settings: { ...data } };
+        const code = { component: this.componentName, inputs: { ...data } };
         return code;
     }
     showCode() {
@@ -97,8 +271,13 @@ class ComponentBuilder {
     }
     getComponentData() {
         const code = this.getCode();
-        const id = nanoid().replace(/-/g, '_');
-        code.id = id;
+        if (this.id) {
+            code.id = this.id;
+        }
+        else {
+            const id = nanoid().replace(/-/g, '_');
+            code.id = id;
+        }
         return { str: `~${JSON.stringify(code)}~`, obj: code };
     }
     // TODO: for now copyToClipboard is the that that closes modal and return data.
@@ -107,16 +286,33 @@ class ComponentBuilder {
         await navigator.clipboard.writeText(data.str);
         this.ref.close(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentBuilder, deps: [{ token: i1.FormBuilder }, { token: i2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ComponentBuilder, isStandalone: true, selector: "app-component-builder", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ComponentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ComponentBuilder, isStandalone: true, selector: "app-component-builder", inputs: { inputs: "inputs", id: "id" }, ngImport: i0, template: '<div>no template</div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ComponentBuilder, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-component-builder',
                     template: '<div>no template</div>',
                 }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
+        }], propDecorators: { inputs: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class TextWriterBuiderComponent extends ComponentBuilder {
+    constructor() {
+        super(...arguments);
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterBuiderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-writer-buider', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule], 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"] }]
+        }] });
 
 class ComponentWithForm {
     constructor() {
@@ -131,10 +327,10 @@ class ComponentWithForm {
     validate() {
         // TODO: generic method to evaluate
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentWithForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ComponentWithForm, isStandalone: true, selector: "app-component-form", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ComponentWithForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ComponentWithForm, isStandalone: true, selector: "app-component-form", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentWithForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ComponentWithForm, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-component-form',
@@ -142,111 +338,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
-class SelectorComponent extends ComponentWithForm {
-    constructor() {
-        super();
-        this.isFilled = false;
-    }
-    evaluate() {
-        let result;
-        if (this.control.value == null) {
-            result = null;
-        }
-        else {
-            result = this.control.value?.toLowerCase().trim() === this.config.settings.response.toLowerCase().trim();
-        }
-        if (result) {
-            this.status = 'success';
-        }
-        else {
-            this.status = 'danger';
-        }
-        this.isFilled = true;
-        return result;
-    }
-    validate() {
-        if (this.control.invalid) {
-            this.status = 'warning';
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-selector', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectModule], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SelectorBuilderComponent extends ComponentBuilder {
-    constructor(formBuilder, 
-    // protected override toastrService: ToastService,
-    ref) {
-        super(formBuilder, null);
-        this.formBuilder = formBuilder;
-        this.ref = ref;
-        this.sampleConfig = {
-            id: '1',
-            component: LessonComponentEnum.Selector,
-            settings: {
-                options: ['fourteen ninety-two', 'fourteen ninety-six', 'fifteen ninety-one'],
-                response: 'fourteen ninety-two',
-                hint: 'Pista para la respuesta',
-                explanation: 'Explicación de la respuesta',
-                responses: 'Opción 1, Opción 2, Opción 3',
-                text: 'Texto de la pregunta',
-            },
-        };
-    }
-    // public formGroup = this.formBuilder.group({
-    //   options: this.formBuilder.array([]),
-    //   response: ['', Validators.required],
-    //   hint: [],
-    //   explanation: [],
-    // });
-    ngOnInit() {
-        this.formGroup.get('response');
-    }
-    //TODO Probablemente estos 3 pueden irse a una clase abstracta
-    pushControlToFormArray(controlName) {
-        this.formGroup.controls.options.push(this.formBuilder.control(''));
-        // (this.formGroup.get(controlName) as UntypedFormArray).push(this.formBuilder.control(''));
-        console.log(this.formGroup.controls.options);
-    }
-    deleteFormArrayByIndex(controlName, index) {
-        this.formGroup.get(controlName).removeAt(index);
-    }
-    get optionsForm() {
-        return this.formGroup.get('options');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectorBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\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\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\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      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\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: ["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: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectorBuilderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-selector-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectorComponent, InputTextModule, ButtonModule, MessageModule], template: "<div>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\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\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\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      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\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: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
-
-class TextWriterBuiderComponent extends ComponentBuilder {
-    constructor(formBuilder, 
-    // protected override toastrService: ToastService,
-    ref) {
-        super(formBuilder, null);
-        this.formBuilder = formBuilder;
-        this.ref = ref;
-        this.formGroup = this.formBuilder.group({ response: ['', Validators.required], hint: [], explanation: [] });
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterBuiderComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterBuiderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-text-writer-buider', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule], 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"] }]
-        }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.DynamicDialogRef }] });
-
 class TextWriterComponent extends ComponentWithForm {
     constructor() {
         super();
@@ -282,10 +373,10 @@ class TextWriterComponent extends ComponentWithForm {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextWriterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-writer', standalone: true, imports: [FormsModule, ReactiveFormsModule, InputTextModule], 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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -293,22 +384,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             }] } });
 
 class TranslationSwitcherBuilderComponent extends ComponentBuilder {
-    constructor(formBuilder, 
-    // protected override toastrService: ToastService,
-    ref) {
-        super(formBuilder, null);
-        this.formBuilder = formBuilder;
-        this.ref = ref;
-    }
-    // Este componente reutiliza completamente el form del padre y todos los métodos
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        super(...arguments);
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSwitcherBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-translation-switcher-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
+        }] });
 
 class TranslationSwitcherComponent {
     constructor() {
@@ -326,10 +412,10 @@ class TranslationSwitcherComponent {
             this.visibleText = this.config.settings.text;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TranslationSwitcherComponent, isStandalone: true, selector: "app-translation-switcher", inputs: { config: "config" }, ngImport: i0, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: TranslationSwitcherComponent, isStandalone: true, selector: "app-translation-switcher", inputs: { config: "config" }, ngImport: i0, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-translation-switcher', standalone: true, imports: [ButtonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { config: [{
@@ -339,7 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class SpeakerBuilderComponent extends ComponentBuilder {
     constructor() {
         super(...arguments);
-        this.tts = signal(undefined);
+        this.componentName = 'Speaker';
+        this.tts = signal(undefined, ...(ngDevMode ? [{ debugName: "tts" }] : []));
     }
     handleTtsGenerated(event) {
         console.log('TTS generated:', event);
@@ -360,16 +447,15 @@ class SpeakerBuilderComponent extends ComponentBuilder {
         };
         return code;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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  <lib-ngx-tts (ttsGenerated)=\"handleTtsGenerated($event)\"></lib-ngx-tts>\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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: NgxTtsComponent, selector: "lib-ngx-tts", inputs: ["path"], outputs: ["ttsGenerated"] }] }); }
+    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  <tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></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: TTSPlayground, selector: "tts-playground", inputs: ["path"], outputs: ["ttsGenerated"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerBuilderComponent, decorators: [{
+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, DropdownModule, NgxTtsComponent], template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <lib-ngx-tts (ttsGenerated)=\"handleTtsGenerated($event)\"></lib-ngx-tts>\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, TTSPlayground], template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></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" }]
         }] });
 
 // ❌ can use this until i copy services to this lib
-// import { CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
 class SpeakerComponent {
     ngOnInit() {
         // throw new Error('Method not implemented.');
@@ -379,16 +465,11 @@ class SpeakerComponent {
     //   ngOnInit(): void {}
     speach() {
         console.log('should speech but will do in next version');
-        //   if (this.config.audio) {
-        //     this.audioService.playAudio(this.config.audio.url);
-        //   } else {
-        //     this.speachService.speach(this.config.settings.text);
-        //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts" }, ngImport: i0, template: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [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.ɵ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: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [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: "19.2.4", ngImport: i0, type: SpeakerComponent, decorators: [{
+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: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
         }], propDecorators: { config: [{
@@ -397,234 +478,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
-var LessonComponentEnum;
-(function (LessonComponentEnum) {
-    LessonComponentEnum["Selector"] = "selector";
-    LessonComponentEnum["Speaker"] = "speaker";
-    LessonComponentEnum["TextWriter"] = "textWriter";
-    LessonComponentEnum["VerbSummary"] = "verbSummary";
-    LessonComponentEnum["WordSummary"] = "wordSummary";
-    LessonComponentEnum["TranslationSwitcher"] = "translationSwitcher";
-})(LessonComponentEnum || (LessonComponentEnum = {}));
-const LessonComponentBuilders = {
-    [LessonComponentEnum.Selector]: SelectorBuilderComponent,
-    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
-    [LessonComponentEnum.TextWriter]: TextWriterBuiderComponent,
-    // [LessonComponentEnum.VerbSummary]: VerbSummaryBuilderComponent,
-    // [LessonComponentEnum.WordSummary]: WordSummaryBuilderComponent,
-    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherBuilderComponent,
-};
-const LessonComponents = {
-    [LessonComponentEnum.Selector]: SelectorComponent,
-    [LessonComponentEnum.Speaker]: SpeakerComponent,
-    [LessonComponentEnum.TextWriter]: TextWriterComponent,
-    // [LessonComponentEnum.VerbSummary]: VerbSummaryComponent,
-    // [LessonComponentEnum.WordSummary]: WordSummaryComponent,
-    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherComponent,
-};
-function getLessonComponentClass(type) {
-    return LessonComponents[type];
-}
-const LESSONS_TOKEN = new InjectionToken('Lessons Service');
-class LessonsAbstractService {
-}
-// my-service.provider.ts
-function provideLessonsService(serviceImplementation) {
-    return [
-        {
-            provide: LESSONS_TOKEN,
-            useExisting: serviceImplementation,
-        },
-    ];
-}
-// export type LessonComponentsType = 'selector' | 'speaker' | 'text-writer' | 'verb-summary' | 'word-summary';
-// export function getLessonComponentClass(type: LessonComponentsType) {
-//   // return LessonComponents[type];
-//   return null;
-// }
-// Removed duplicate LessonComponentConfiguration definition
-// Removed duplicate StorageFile definition
-// Removed duplicate AudioStorage definition
-// Removed duplicate SpeakerCompConfiguration definition
-// Removed duplicate LessonComponentInterface definition
-// export const LessonComponents = {
-//   [LessonComponentEnum.Selector]: 1,
-//   [LessonComponentEnum.Speaker]: 2,
-//   [LessonComponentEnum.TextWriter]: 3,
-//   [LessonComponentEnum.VerbSummary]: 4,
-//   [LessonComponentEnum.WordSummary]: 5,
-//   [LessonComponentEnum.TranslationSwitcher]: 6,
-// }
-const LangCodeDescription = {
-    es: 'Spanish',
-    en: 'English',
-    it: 'Italian',
-    pt: 'Portuguese',
-    fr: 'French',
-};
-const LangCodeDescriptionEs = {
-    es: 'Español',
-    en: 'Inglés',
-    it: 'Italiano',
-    pt: 'Portugués',
-    fr: 'Frances',
-};
-
-class LangDescTranslationPipe {
-    transform(value, lang) {
-        if (lang === 'es') {
-            return LangCodeDescriptionEs[value];
-        }
-        else {
-            return LangCodeDescription[value];
-        }
+class SelectorComponent extends ComponentWithForm {
+    constructor() {
+        super();
+        this.isFilled = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LangDescTranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: LangDescTranslationPipe, isStandalone: true, name: "langDesc" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'langDesc',
-                    standalone: true,
-                }]
-        }] });
-class FlagLanguagePipe {
-    transform(lang) {
-        if (lang === 'en') {
-            return '🇺🇸';
-        }
-        else if (lang === 'es') {
-            return '🇲🇽';
-        }
-        else if (lang === 'fr') {
-            return '🇫🇷';
+    evaluate() {
+        let result;
+        if (this.control.value == null) {
+            result = null;
         }
-        else if (lang === 'it') {
-            return '🇮🇹';
+        else {
+            result = this.control.value?.toLowerCase().trim() === this.config.settings.response.toLowerCase().trim();
         }
-        else if (lang === 'pt') {
-            return '🇧🇷';
+        if (result) {
+            this.status = 'success';
         }
         else {
-            return '';
+            this.status = 'danger';
         }
+        this.isFilled = true;
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FlagLanguagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: FlagLanguagePipe, isStandalone: true, name: "flagEmoji" }); }
+    validate() {
+        if (this.control.invalid) {
+            this.status = 'warning';
+        }
+        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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FlagLanguagePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'flagEmoji',
-                    standalone: true,
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selector', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectModule], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SelectorBuilderComponent extends ComponentBuilder {
+    constructor() {
+        super(...arguments);
+        this.componentName = 'Selector';
+        this.sampleConfig = {
+            id: '1',
+            component: LessonComponentEnum.Selector,
+            settings: {
+                options: ['fourteen ninety-two', 'fourteen ninety-six', 'fifteen ninety-one'],
+                response: 'fourteen ninety-two',
+                hint: 'Pista para la respuesta',
+                explanation: 'Explicación de la respuesta',
+                responses: 'Opción 1, Opción 2, Opción 3',
+                text: 'Texto de la pregunta',
+            },
+        };
+    }
+    // public formGroup = this.formBuilder.group({
+    //   options: this.formBuilder.array([]),
+    //   response: ['', Validators.required],
+    //   hint: [],
+    //   explanation: [],
+    // });
+    ngOnInit() {
+        this.formGroup.get('response');
+    }
+    //TODO Probablemente estos 3 pueden irse a una clase abstracta
+    pushControlToFormArray(controlName) {
+        this.formGroup.controls.options.push(this.formBuilder.control(''));
+        // (this.formGroup.get(controlName) as UntypedFormArray).push(this.formBuilder.control(''));
+        console.log(this.formGroup.controls.options);
+    }
+    deleteFormArrayByIndex(controlName, index) {
+        this.formGroup.get(controlName).removeAt(index);
+    }
+    get optionsForm() {
+        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>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\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\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\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      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\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: ["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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selector-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectorComponent, InputTextModule, ButtonModule, MessageModule], template: "<div>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\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\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\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      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\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: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
         }] });
 
-// NOTE: what to do? IAgent Deponds on ngx-agent-cards but lessons don't
-// import { IAgentCard } from '@dataclouder/ngx-agent-cards';
-const NOTION_SERVICE_TOKEN = new InjectionToken('notion.service');
-class NotionAbstractService {
+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 || (LessonComponentEnum = {}));
+const LessonComponentBuilders = {
+    [LessonComponentEnum.Selector]: SelectorBuilderComponent,
+    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+    [LessonComponentEnum.TextWriter]: TextWriterBuiderComponent,
+    // [LessonComponentEnum.VerbSummary]: VerbSummaryBuilderComponent,
+    // [LessonComponentEnum.WordSummary]: WordSummaryBuilderComponent,
+    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherBuilderComponent,
+    // [LessonComponentEnum.PlayWord]: PlayWordBuilderComponent,
+};
+const LessonComponents = {
+    [LessonComponentEnum.Selector]: SelectorComponent,
+    [LessonComponentEnum.Speaker]: SpeakerComponent,
+    [LessonComponentEnum.TextWriter]: TextWriterComponent,
+    // [LessonComponentEnum.VerbSummary]: VerbSummaryComponent,
+    // [LessonComponentEnum.WordSummary]: WordSummaryComponent,
+    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherComponent,
+    // [LessonComponentEnum.PlayWord]: PlayWordComponent,
+};
+function getLessonComponentClass(type) {
+    return LessonComponents[type];
 }
-function provideNotionService(serviceImplementation) {
+const LESSONS_TOKEN = new InjectionToken('Lessons Service');
+// export abstract class LessonsAbstractService extends EntityCommunicationService<ILesson> {
+//   abstract getLessons(paginator?: any): Promise<any>;
+//   abstract getLesson(id: string): Promise<any>;
+//   abstract postLesson(lesson: ILesson): Promise<any>;
+//   abstract updateLesson(lesson: ILesson): Promise<any>;
+//   abstract deleteLesson(id: string): Promise<any>;
+//   abstract generateLesson(lesson: ILesson): Promise<any>;
+//   abstract postGenerateByAI(id: string): Promise<any>;
+//   abstract extractTextFromHtml(html: string): string;
+//   abstract postImproveMDWithAI(lessonId: string, markdownText: string): Promise<any>; // Added for AI Markdown improvement
+//   abstract saveTakenLesson(lesson: ILessonTaken): Promise<any>;
+//   abstract getPrompts(): LessonPrompts;
+// }
+// my-service.provider.ts
+function provideLessonsService(serviceImplementation) {
     return [
         {
-            provide: NOTION_SERVICE_TOKEN,
+            provide: LESSONS_TOKEN,
             useExisting: serviceImplementation,
         },
     ];
 }
-var NotionExportType;
-(function (NotionExportType) {
-    NotionExportType["HTML"] = "html";
-    NotionExportType["MARKDOWN"] = "markdown";
-    NotionExportType["PLAIN_TEXT"] = "plain_text";
-    NotionExportType["SIMPLE_BLOCKS"] = "simple_blocks";
-})(NotionExportType || (NotionExportType = {}));
-
-const MarkdownWriterSkill = `
-You are an Expert Markdown Writer with the following qualities:
-You are a world-class Markdown formatting specialist who excels at organizing information in a visually appealing and highly accessible manner. Your writing combines technical precision with creative presentation to engage readers of all backgrounds.
-Your Core Skills 📝
-
-You transform complex information into beautifully structured Markdown documents
-You strategically use headings, lists, and formatting to create clear visual hierarchies
-You incorporate helpful emojis to enhance readability and engagement
-You write in a clear, concise style that's accessible to general audiences
-
-Your Process Approach 🔄
-
-You always begin with a logical document structure before adding content
-You organize information into clearly defined sections with descriptive headings
-You balance visual elements with textual content for optimal readability
-You maintain consistent formatting patterns throughout documents
-
-Your Writing Style ✨
-
-You use simple, direct language that's easy for everyone to understand
-You explain technical concepts using everyday examples and analogies
-You create a friendly, conversational tone while maintaining professionalism
-You break down complex ideas into manageable segments
-
-Your Special Touches 🎯
-
-You know exactly when and where to add emojis for maximum impact
-You create custom tables to present comparative information effectively
-You use blockquotes to highlight important takeaways
-You incorporate visual dividers to separate major content sections
-
-When responding to requests, you'll first understand the subject matter, then organize it into a logical structure with clear headings, appropriate formatting elements, and helpful visual enhancements. Your goal is always to create content that's not only informative but also visually engaging and accessible to all readers.
-`;
-const UserRequirements = `
-  User also can provide additional instructions or requirements for the lesson or current lesson to improve it.
-`;
-const LanguageLessonSkill = (langBase, langTarget) => `
-
-You are also a ${langTarget} lesson professor, you write lessons for ${langBase} learners.
-explain the best you can will all your experience teaching.
-
-You can infer the level of the lesson from the content or user request, so can increase difficulty
-
-For Basic Level: generate a ${langTarget} lesson for ${langBase} learners at a basic level (A1-A2).
-
-Include:
-
-- Simple dialogues or short texts.
-- Key vocabulary with simple definitions or ${langBase} translations.
-- Basic grammar points explained simply (e.g., "to be" verb, simple present).
-- Practice exercises (e.g., fill-in-the-blanks, simple questions).
-
-For Intermediate Level: generate a ${langTarget} lesson for ${langBase} learners at a medium level (B1-B2).
-
-Include:
-
-- Texts or dialogues of moderate length and complexity.
-- New vocabulary and common phrasal verbs with context.
-- Explanation and practice of intermediate grammar points (e.g., past simple vs. present perfect, conditionals).
-- Exercises that require more detailed responses or understanding.
-- The content should be engaging and cover topics relevant to daily life, work, or hobbies.
-
-For Advanced Level: generate a ${langTarget} lesson for ${langBase} learners at an advanced level (C1-C2).
-
-Include:
-
-- Challenging texts or discussions.
-- Advanced vocabulary, idioms, and nuanced expressions.
-- Exploration of complex grammar or stylistic points.
-- Exercises that encourage critical thinking, debate, or detailed writing.
-- The content should be stimulating and cover a wide range of topics, including academic or professional contexts.
-`;
-const getLanguageSimpleAgent = (langBase, langTarget) => {
-    return {
-        systemPrompt: `
-    ${MarkdownWriterSkill}
-    ${LanguageLessonSkill(langBase, langTarget)}
-    ${UserRequirements}
-
-  `,
-        model: { id: 'gemini-2.5-flash-preview-04-17', provider: 'google' },
-    };
-};
 
 var EventCard;
 (function (EventCard) {
@@ -632,6 +623,7 @@ var EventCard;
     EventCard["Delete"] = "delete";
     EventCard["Select"] = "select";
     EventCard["Qr"] = "qr";
+    EventCard["Clone"] = "clone";
 })(EventCard || (EventCard = {}));
 class DcLessonCardComponent {
     constructor() {
@@ -641,56 +633,24 @@ class DcLessonCardComponent {
         this.coverUrl = 'assets/background/default-background.webp';
         this.eventType = EventCard;
         this.items = [
-            {
-                label: 'Editar',
-                icon: 'pi pi-pencil',
-                command: () => {
-                    this.eventCard(EventCard.Edit);
-                },
-            },
-            {
-                label: 'Eliminar',
-                icon: 'pi pi-trash',
-                command: () => {
-                    this.eventCard(EventCard.Delete);
-                },
-            },
-            {
-                label: 'Tomar lección',
-                icon: 'pi pi-play',
-                command: () => {
-                    this.eventCard(EventCard.Select);
-                },
-            },
+            { label: 'Clonar', icon: 'pi pi-copy', command: () => this.eventCard(EventCard.Clone) },
+            { label: 'Editar', icon: 'pi pi-pencil', command: () => this.eventCard(EventCard.Edit) },
+            { label: 'Eliminar', icon: 'pi pi-trash', command: () => this.eventCard(EventCard.Delete) },
         ];
     }
     ngOnInit() {
-        console.log(this.lesson);
         this.coverUrl =
             this.lesson?.banner?.url || this.lesson?.metadata?.banner?.url || this.lesson?.media?.images?.[0]?.url || 'assets/background/default-background.webp';
     }
     eventCard(eventType) {
-        switch (eventType) {
-            case EventCard.Edit:
-                this.onAction.emit({ action: 'edit', item: this.lesson });
-                break;
-            case EventCard.Delete:
-                this.onAction.emit({ action: 'delete', item: this.lesson });
-                break;
-            case EventCard.Select:
-                this.onAction.emit({ action: 'select', item: this.lesson });
-                break;
-            case EventCard.Qr:
-                this.onAction.emit({ action: 'qr', item: this.lesson });
-                break;
-        }
+        this.onAction.emit({ action: eventType, item: this.lesson });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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(showOptions){\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  }\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.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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 (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [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}.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: "pipe", type: DatePipe, name: "date" }, { 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", "autofocus", "fluid", "buttonProps"], 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: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    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(showOptions){\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.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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 (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [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}.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: i3$1.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: "19.2.4", ngImport: i0, type: DcLessonCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\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  }\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.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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 (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [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}.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"] }]
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\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.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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 (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [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}.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"] }]
         }], propDecorators: { lesson: [{
                 type: Input
             }], showOptions: [{
@@ -701,146 +661,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }] } });
 
+class DefaultLessonsService extends EntityCommunicationService {
+    constructor() {
+        super('lesson');
+        // --- Endpoint Definitions for methods not in EntityCommunicationService ---
+        this.endpoints = {
+            saveTakenLesson: `api/user/saveLesson`,
+            generateLesson: `api/lesson/generate`,
+            generateByAI: `api/lesson/generate-ai`,
+            improveMDWithAI: `api/lesson/improve-markdown-ai`,
+            GenerateBanner: 'api/lesson/generate-banner',
+        };
+    }
+    // --- Method Implementations from LessonsAbstractService ---
+    async getLessons(filters = {}) {
+        if (!filters.returnProps) {
+            filters.returnProps = {
+                level: 1,
+                title: 1,
+                description: 1,
+                createdDate: 1,
+                banner: 1,
+                metadata: 1,
+                appExtensions: 1,
+                media: 1,
+            };
+        }
+        return this.query(filters);
+    }
+    async getLesson(id) {
+        return this.findOne(id);
+    }
+    async postLesson(lesson) {
+        return this.createOrUpdate(lesson);
+    }
+    async updateLesson(lesson) {
+        if (!lesson._id) {
+            throw new Error('Lesson ID is required for update.');
+        }
+        return this.createOrUpdate(lesson);
+    }
+    async deleteLesson(id) {
+        await this.remove(id);
+    }
+    // --- Methods specific to lessons ---
+    saveTakenLesson(lesson) {
+        return this.httpService.post(this.endpoints.saveTakenLesson, lesson);
+    }
+    async generateLesson(lesson) {
+        return this.httpService.post(this.endpoints.generateLesson, lesson);
+    }
+    async postGenerateByAI(id) {
+        return this.httpService.post(this.endpoints.generateByAI, { id });
+    }
+    async postImproveMDWithAI(lessonId, markdownText) {
+        return this.httpService.post(this.endpoints.improveMDWithAI, { id: lessonId, markdown: markdownText });
+    }
+    generateBanner(prompt, lessonId) {
+        return this.httpService.post(this.endpoints.GenerateBanner, { prompt, lessonId });
+    }
+    extractTextFromHtml(html) {
+        const r1 = new RegExp('~(.+?)~', 'g');
+        const lessonHtml = html.replace(r1, (_matching, jsonCoded) => {
+            try {
+                const data = JSON.parse(jsonCoded);
+                return `<span>${data?.settings?.text || ''}</span>`;
+            }
+            catch (e) {
+                console.error('Error parsing JSON in extractTextFromHtml:', jsonCoded, e);
+                return '';
+            }
+        });
+        let text = lessonHtml.replace(/<[^>]*>/g, ' ');
+        text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ' ');
+        text = text.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ' ');
+        text = text.replace(/&nbsp;/g, ' ');
+        text = text.replace(/&/g, '&');
+        text = text.replace(/</g, '<');
+        text = text.replace(/>/g, '>');
+        text = text.replace(/\s+/g, ' ').trim();
+        return text;
+    }
+    getPrompts() {
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DefaultLessonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DefaultLessonsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DefaultLessonsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 const tableViewColumns = [
     { field: 'media.images[0].url', header: 'Image', type: 'image' },
     { field: 'title', header: 'Título' },
     { field: 'description', header: 'Descripción' },
 ];
-const TableViewActions = [
-    { title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' },
-    { title: 'qr', label: 'QR', icon: 'pi pi-qrcode', severity: 'info' },
-    { title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'info' },
-    { title: 'delete', label: 'Delete', icon: 'pi pi-trash', severity: 'danger' },
-];
-const returnProperties = { id: 1, title: 1, assets: 1 };
-class DCLessonListComponent extends PaginationBase {
-    constructor(cdr, router, route, lessonsService, toastrService) {
-        super(route, router);
-        this.cdr = cdr;
-        this.router = router;
-        this.route = route;
-        this.lessonsService = lessonsService;
-        this.toastrService = toastrService;
-        this.showOptions = true;
+class DCLessonListComponent extends EntityBaseListComponent {
+    constructor() {
+        super();
         this.customFilters = [];
-        this.viewType = 'cards';
+        // Injected Services
+        // I dont rename so use the same in EntityBaseListComponent and Pagination
+        this.entityCommunicationService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.columns = tableViewColumns;
-        this.cardComponent = null;
+        // Private properties
         this.cardEventSubs = [];
-        this.lessons = [];
-        this.isLoadingLessons = false;
+        this.filterConfig.returnProps = {
+            title: 1,
+            description: 1,
+            media: 1,
+            _id: 1,
+            id: 1,
+        };
+        effect(() => {
+            // When items signal changes, re-subscribe to card events
+            this.items(); // a little hack to make the effect run when items change
+            setTimeout(() => this.subscribeToCardEvents());
+        });
     }
-    ngOnInit() {
-        this.filterConfig.returnProps = returnProperties;
+    async ngOnInit() {
         this.cardComponent = this.customCardComponent || DcLessonCardComponent;
-        this.getPaginatedLessons(this.filterConfig);
-    }
-    subscribeDinamicInstantToEvents() {
-        this.clearcardEventSubs();
-        this.subscribeToCardEvents();
-    }
-    subscribeToCardEvents() {
-        this.outlets.forEach((outlet) => {
-            const instance = outlet.componentInstance;
-            this.cardEventSubs.push(instance.onAction.subscribe((lesson) => {
-                this.doOrEmitAction(lesson);
-            }));
-        });
+        await super.ngOnInit();
     }
-    clearcardEventSubs() {
-        this.cardEventSubs.forEach((sub) => sub.unsubscribe());
-        this.cardEventSubs = [];
+    ngAfterViewInit() {
+        this.outlets.changes.subscribe(() => this.subscribeToCardEvents());
     }
     ngOnDestroy() {
-        this.clearcardEventSubs();
-    }
-    async getPaginatedLessons(paginator) {
-        try {
-            this.lessons = null;
-            this.isLoadingLessons = true;
-            this.cdr.detectChanges();
-            const lessons = await this.lessonsService.getLessons(paginator);
-            this.lessons = lessons['rows'] || lessons;
-            this.totalRecords = lessons['count'] || this.lessons.length;
-            console.log('lessons', lessons);
-            setTimeout(() => {
-                this.subscribeDinamicInstantToEvents();
-            });
-        }
-        finally {
-            this.isLoadingLessons = false;
-            this.cdr.detectChanges();
-        }
+        this.clearCardEventSubs();
     }
-    search(searchText) {
-        this.filterConfig['text'] = searchText;
-        this.getPaginatedLessons(this.filterConfig);
+    getCustomButtons(item) {
+        return [
+            { label: 'Select', icon: 'pi pi-check', command: () => this.handleAction({ action: 'select', item }) },
+            { label: 'QR', icon: 'pi pi-qrcode', command: () => this.handleAction({ action: 'qr', item }) },
+        ];
     }
-    removeLesson(lesson) {
-        const response = confirm('¿Estás seguro de querer eliminar esta lección?');
-        if (response) {
-            this.lessonsService.deleteLesson(lesson._id);
-            this.lessons = this.lessons.filter((l) => l._id !== lesson._id);
-            this.cdr.detectChanges();
-            this.toastrService.success({ title: 'Adios a la lección', subtitle: 'La lección ha sido eliminada correctamente' });
+    handleAction(actionEvent) {
+        if (['select', 'qr'].includes(actionEvent.action)) {
+            this.onAction.emit(actionEvent);
+        }
+        else {
+            super.doAction(actionEvent);
         }
-    }
-    newLesson() {
-        this.onAction.emit({ action: 'new' });
     }
     applyFilterBarEvent(filterEvent) {
-        if (filterEvent.action == 'changeView') {
-            this.viewType = this.viewType === 'table' ? 'cards' : 'table';
+        if (filterEvent.action === 'changeView') {
+            this.toggleView();
             return;
         }
-        else {
-            console.log('filterChanged in dc-lesson-list', filterEvent);
-            this.filterConfig = filterEvent.item;
-            this.filterConfig.returnProps = returnProperties;
-            this.getPaginatedLessons(this.filterConfig);
-        }
+        this.filterConfig = { ...this.filterConfig, ...filterEvent.item };
+        this.loadData();
     }
-    loadData() {
-        return this.getPaginatedLessons(this.filterConfig);
+    subscribeToCardEvents() {
+        this.clearCardEventSubs();
+        this.outlets.forEach((outlet) => {
+            const instance = outlet.componentInstance;
+            if (instance?.onAction) {
+                this.cardEventSubs.push(instance.onAction.subscribe((event) => {
+                    this.handleAction(event);
+                }));
+            }
+        });
+    }
+    clearCardEventSubs() {
+        this.cardEventSubs.forEach((sub) => sub.unsubscribe());
+        this.cardEventSubs = [];
     }
-    doOrEmitAction(actionEvent) {
-        if (actionEvent.action === 'delete') {
-            this.removeLesson(actionEvent.item);
+    async loadData() {
+        try {
+            this.isLoading = true;
+            const response = await this.entityCommunicationService.getLessons(this.filterConfig);
+            this.items.set(response.rows);
+            this.totalRecordsSignal.set(response.count);
         }
-        else {
-            this.onAction.emit(actionEvent);
+        catch (error) {
+            console.error('Error loading data', error);
+        }
+        finally {
+            this.isLoading = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: LESSONS_TOKEN }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { showOptions: "showOptions", customCardComponent: "customCardComponent", customFilters: "customFilters", viewType: "viewType" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\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}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "items", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
+    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: { customCardComponent: "customCardComponent", customFilters: "customFilters" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (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  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\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", 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}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonListComponent, decorators: [{
+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, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\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}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: LessonsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [LESSONS_TOKEN]
-                }] }, { type: i4$2.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }], propDecorators: { showOptions: [{
-                type: Input
-            }], customCardComponent: [{
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, NgComponentOutlet, QuickTableComponent, PaginatorModule], template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (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  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\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", 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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { customCardComponent: [{
                 type: Input
             }], customFilters: [{
                 type: Input
-            }], viewType: [{
-                type: Input
             }], outlets: [{
                 type: ViewChildren,
                 args: ['outlet']
             }] } });
 
 class DCLessonFormComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DCLessonFormComponent, isStandalone: true, selector: "dc-lesson-form", ngImport: i0, template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonFormComponent, isStandalone: true, selector: "dc-lesson-form", ngImport: i0, template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-form', standalone: true, imports: [ReactiveFormsModule], template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"] }]
         }] });
@@ -860,7 +883,6 @@ const DEFAULT_LESSON_AGENT_CARD = {
             post_history_instructions: 'Your reply should be always short, 1 or 2 paragraphs at most, and to the point, and you should ask friendly questions all the time',
         },
     },
-    model: { provider: 'google' },
 };
 const AppRolePlaySkill = `
 You are an app role play assistant from Polilan App. The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson.
@@ -870,19 +892,14 @@ const EngagementSkill = `
 You are an engagement assistant, start by greeting the user, asking something about the lesson, and then continue the conversation. always ask one or two friendly questions. 
 that makes sense for the lesson. 
 `;
-const BasicAgentCard = {
-    systemPrompt: 'You are a helpful assistant.',
-    model: { provider: 'openai', id: 'gpt-4o' },
-};
 function getDefaultLessonEvaluatorAgentCard(lessonText) {
+    // TODO: probably i need to build in order to add the sources to the task or system.
     return {
         expectedResponseType: `interface EvalResult {
       score: number;                       // Score of the user's response 0 to 3
       feedback: string;                    // Feedback of the user's understanding of the conversation
     }`,
-        messages: [],
         model: { id: 'gpt-4o-mini', provider: 'openai' },
-        sources: [lessonText],
         task: `User is reading a taking a lesson, now their are having a conversation,
     you have to evaluate the current conversation, and give a feedback of the user understanding of the lesson,
     this is the lesson:  ${lessonText}`,
@@ -890,8 +907,7 @@ function getDefaultLessonEvaluatorAgentCard(lessonText) {
 }
 class LessonAIService {
     constructor() {
-        this.lessonService = inject(LESSONS_TOKEN);
-        // TODO: Inject the application-level UserService
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.userService = inject(USER_DATA_EXCHANGE);
     }
     /**
@@ -915,7 +931,7 @@ ${userInformationPrompt}`;
      * @returns An object containing the master agent card and the evaluator agent card.
      */
     async generateAgentCards(lesson) {
-        const lessonText = this.lessonService.extractTextFromHtml(lesson.textCoded);
+        const lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
         const userInformationPrompt = this.userService.getUserDataInformation();
         const scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
         // Create a deep copy of the default card to avoid modifying the constant
@@ -930,23 +946,19 @@ ${userInformationPrompt}`;
      * @param lesson The lesson data.
      * @returns An IConversationSettings object configured for the lesson scenario.
      */
-    async generateConversationSettingsForLesson(lesson) {
-        // TODO: Consolidate user fetching logic if possible, or ensure consistency
-        const user = {
-            personalData: { firstname: 'Test', lastname: 'User' },
-            settings: { targetLanguage: 'en', baseLanguage: 'es' },
-            languageProgress: { en: { level: '1' } },
-        }; // Replace 'any' with your actual User type/interface
-        if (!user) {
-            console.error('User data not available to generate conversation settings.');
-            return null;
-        }
-        const lessonText = this.lessonService.extractTextFromHtml(lesson.textCoded);
+    async generateConversationSettingsForLesson(lesson, settings) {
+        // TODO: Consolidate user fetching logic if possible, or ensure consistency
+        const baseLang = this.userService.getUserDataExchange()?.baseLang || 'en';
+        const lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
         const userInformationPrompt = this.userService.getUserDataInformation();
-        const scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
+        let scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
+        if (settings.additionalPrompt) {
+            scenario += '\n\n' + settings.additionalPrompt;
+        }
         const initialMessage = {
             role: ChatRole.System,
             content: scenario,
+            messageId: SystemPromptType.SystemPrompt,
         };
         // Use defaults similar to DEFAULT_LESSON_AGENT_CARD but adjust for prompt-based start
         const conversationSettings = {
@@ -955,13 +967,14 @@ ${userInformationPrompt}`;
             autoStart: true,
             messages: [initialMessage],
             model: { provider: 'google' },
+            tts: { voice: getRandomQuickVoice(baseLang || 'en', 'female') },
         };
         return conversationSettings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonAIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonAIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonAIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root', // Or provide appropriately if it's library-specific
@@ -994,32 +1007,69 @@ Assign a rating from 0 to 3 based on how well the student performs *compared to
 Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
 `;
 
-// Removed: import { WordPopupService } from 'src/app/shared/services/word-popup.service'; // No longer needed here
+// TODO: check LessonComponentBuilders in lessons.clases.ts for origianl implementation
+const DynamicComponentBuilders = {
+    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+};
+const DynamicComponents = {
+    [LessonComponentEnum.Speaker]: SpeakerComponent,
+};
+class DynamicComponentsService {
+    constructor() {
+        this._dynamicComponentBuilders = { ...DynamicComponentBuilders };
+        this._dynamicComponents = { ...DynamicComponents };
+    }
+    registerCustomComponent(component, name) {
+        // this._dynamicComponentBuilders[name || component.name] = component;
+        this._dynamicComponents[name || component.name] = component;
+    }
+    registerCustomComponentBuilder(component, name) {
+        this._dynamicComponentBuilders[name || component.name] = component;
+    }
+    getDynamicComponentBuilders(type) {
+        return this._dynamicComponentBuilders[type];
+    }
+    getDynamicComponentClass(type) {
+        return this._dynamicComponents[type];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class DCLessonRendererComponent {
     constructor() {
         // --- Signal Inputs ---
-        this.lessonInput = input(); // Input signal for lesson object
-        this.lessonIdInput = input(); // Input signal for lesson ID
-        this.test = input(false);
+        this.lessonInput = input(...(ngDevMode ? [undefined, { debugName: "lessonInput" }] : [])); // Input signal for lesson object
+        this.lessonIdInput = input(...(ngDevMode ? [undefined, { debugName: "lessonIdInput" }] : [])); // Input signal for lesson ID
+        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
         // --- Outputs ---
         this.wordClicked = new EventEmitter(); // New output event
-        // --- Injected Services (using inject function) ---
+        // --- Services  ---
         this.renderer = inject(Renderer2);
         this.viewContainerRef = inject(ViewContainerRef);
         this.toastrService = inject(TOAST_ALERTS_TOKEN);
-        this.lessonService = inject(LESSONS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.lessonAIService = inject(LessonAIService); // Inject the new service
         this.userDataExchange = inject(USER_DATA_EXCHANGE);
-        // Removed: private readonly wordPopupService = inject(WordPopupService); // No longer needed here
+        this.dynamicComponentsService = inject(DynamicComponentsService);
+        this.uiStateService = inject(UiStateService);
         // --- State Signals ---
-        this.lesson = signal(undefined); // Internal lesson state signal
-        this.chatVisible = signal(false); // Signal for chat visibility
-        this.agentMasterLesson = signal(undefined); // Signal for agent card
-        this.evaluatorAgentCard = signal(undefined); // Signal for evaluator card
-        this.conversationSettings = signal(undefined);
-        this.evalAgentTask = signal(undefined); // Signal for evaluator card
+        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
+        // chatVisible = this.uiStateService.chatDrawerVisible; // Signal for chat visibility
+        this.agentMasterLesson = signal(undefined, ...(ngDevMode ? [{ debugName: "agentMasterLesson" }] : [])); // Signal for agent card
+        this.evaluatorAgentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "evaluatorAgentCard" }] : [])); // Signal for evaluator card
+        this.conversationSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationSettings" }] : []));
+        this.evalAgentTask = signal(undefined, ...(ngDevMode ? [{ debugName: "evalAgentTask" }] : [])); // Signal for evaluator card
+        // backgroundTasks: Record<ConversationEvents | string, SimpleAgentTask> = {};
+        this.conversationFlow = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationFlow" }] : []));
         // --- Computed Signals ---
-        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url); // Computed signal for imageCover
+        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url, ...(ngDevMode ? [{ debugName: "imageCover" }] : [])); // Computed signal for imageCover
         // --- Properties ---
         this.components = {};
         this.mainForm = new FormGroup({});
@@ -1036,7 +1086,7 @@ class DCLessonRendererComponent {
                 console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
                 try {
                     // Consider adding a loading state signal here
-                    const fetchedLesson = await this.lessonService.getLesson(lessonId);
+                    const fetchedLesson = await this.lessonsService.getLesson(lessonId);
                     this.lesson.set(fetchedLesson);
                     console.log('Fetched lesson:', fetchedLesson);
                 }
@@ -1080,6 +1130,57 @@ class DCLessonRendererComponent {
             }
         });
     }
+    ngOnInit() {
+        // TODO: esto es mal, el goal no puede venir aqui sino pasado desde el componente que inicie la lección
+        this.conversationFlow.set({
+            goal: {
+                enabled: true,
+                task: `User is learning is taking a lesson about languages, evaluate how good are the responses.`,
+                model: { quality: EModelQuality.FAST },
+            },
+            triggerTasks: {
+                [ConversationEvents.OnUserMessage]: {
+                    enabled: true,
+                    ...this.evalAgentTask(),
+                },
+            },
+            challenges: null,
+            dynamicConditions: [
+                {
+                    what: ConditionType.Goal,
+                    when: ConditionOperator.GreaterThanOrEqual,
+                    value: 100,
+                    do: [
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.SystemPrompt,
+                            prompt: 'You were talking with the user, user finish the conversation, in the next message you must try to finish the conversation and say good bye.',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.CharacterDescription,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.UserInformation,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.MessageExamples,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.ScenarioDescription,
+                            prompt: '',
+                        },
+                    ],
+                },
+            ],
+        });
+    }
     // --- Rendering Logic ---
     _clearLessonRendering() {
         // Destroy previously created dynamic components
@@ -1095,7 +1196,6 @@ class DCLessonRendererComponent {
     _renderLesson(lessonData) {
         this._clearLessonRendering(); // Clear previous state first
         console.log('Rendering lesson:', lessonData.id);
-        // console.log('Image cover URL:', this.imageCover()); // Access computed signal
         // 1) Parse textCoded, create components, and build HTML structure
         const { htmlContent, components } = this._parseAndCreateComponents(lessonData);
         this.components = components;
@@ -1109,7 +1209,6 @@ class DCLessonRendererComponent {
     _parseAndCreateComponents(lessonData) {
         const r1 = new RegExp('~(.+?)~', 'g');
         let count = 0;
-        //
         const createdComponents = {};
         const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
             const componentName = `dynamicComp${count}`;
@@ -1162,7 +1261,7 @@ class DCLessonRendererComponent {
                     lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
                 }
             }
-            const LessonClass = getLessonComponentClass(lessonCodedConfig.component);
+            const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
             if (!LessonClass) {
                 console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
                 return null; // Return null if class doesn't exist
@@ -1222,12 +1321,6 @@ class DCLessonRendererComponent {
                 }
             }
         });
-        if (this.test()) {
-            // Access signal value
-            console.log('Test mode: Evaluation skipped saving.');
-            this.toastrService.info({ subtitle: `Test Results: ${rates.correct} correct, ${rates.incorrect} incorrect`, title: 'Test Mode' });
-            return;
-        }
         const totalQuestions = rates.correct + rates.incorrect;
         rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0; // Avoid division by zero
         const status = rates.score >= 0.7 ? 'passed' : 'failed'; // Use >= for threshold
@@ -1269,10 +1362,10 @@ class DCLessonRendererComponent {
         console.log('Requesting agent cards from LessonAIService...');
         try {
             // Call the service to get the agent cards
-            const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(currentLesson);
+            const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(currentLesson, this.settings());
             if (conversationSettings) {
                 this.conversationSettings.set(conversationSettings);
-                this.chatVisible.set(true);
+                this.uiStateService.chatDrawerVisible.set(true);
                 console.log('Agent cards received and set.');
             }
             else {
@@ -1287,14 +1380,17 @@ class DCLessonRendererComponent {
     }
     onVisibleChange(isVisible) {
         if (isVisible === false) {
-            this.chatVisible.set(false);
+            this.uiStateService.chatDrawerVisible.set(false);
         }
     }
-    handleGoalCompleted(event) {
+    async handleGoalCompleted(event = {}) {
         console.log('Goal completed:', event);
         const lesson = this.lesson();
-        const dummy = { id: lesson.id, goalCompleted: true, score: 100, status: 'finished', lastAccess: new Date() };
-        this.lessonService.saveTakenLesson(dummy);
+        const takenLesson = { id: lesson.id, goalCompleted: true, score: 100, status: 'finished', lastAccess: new Date() };
+        const res = await this.lessonsService.saveTakenLesson(takenLesson);
+        if (res) {
+            // this.lessonsMemStateService.updateUserState(res);
+        }
         this.toastrService.success({ subtitle: '¡Has completado la lección! , pero puedes seguir conversando', title: '¡Muy bien, guardaremos tu progreso!' });
     }
     onChatMessage(event) {
@@ -1311,12 +1407,12 @@ class DCLessonRendererComponent {
                 console.log('Unhandled chat event type:', event.type);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 }, test: { classPropertyName: "test", publicName: "test", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\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(chatVisible()) {\n<p-drawer header=\"Conversation\" [visible]=\"chatVisible()\" (visibleChange)=\"onVisibleChange($event)\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [taskOnUserMessage]=\"evalAgentTask()\"\n    [conversationSettings]=\"conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (sendMessage)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "agentCard", "taskOnUserMessage", "taskOnAssistantMessage", "parseDict"], outputs: ["sendMessage", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$4.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"] }] }); }
+    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: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\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=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"conversationFlow()\"\n    [conversationSettings]=\"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: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\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(chatVisible()) {\n<p-drawer header=\"Conversation\" [visible]=\"chatVisible()\" (visibleChange)=\"onVisibleChange($event)\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [taskOnUserMessage]=\"evalAgentTask()\"\n    [conversationSettings]=\"conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (sendMessage)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"] }]
+            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\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=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"conversationFlow()\"\n    [conversationSettings]=\"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"] }]
         }], ctorParameters: () => [], propDecorators: { wordClicked: [{
                 type: Output
             }], dynamicLesson: [{
@@ -1327,13 +1423,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class LessonNotionService {
     constructor() {
         this.#notionService = inject(NOTION_SERVICE_TOKEN);
-        this.#lessonService = inject(LESSONS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         // Keep track of loading state specific to Notion operations
-        this.isLoading = signal(false);
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     }
     #notionService;
-    #lessonService;
     #toastService;
     /**
      * Extracts the Notion Page ID from a URL.
@@ -1367,14 +1462,17 @@ class LessonNotionService {
         }
         const updatedLesson = {
             ...lesson,
-            extras: {
-                ...(lesson.extras || {}),
-                notionPageId: notionPageId,
+            extensions: {
+                ...(lesson.extensions || {}),
+                extras: {
+                    ...(lesson.extensions?.['extras'] || {}),
+                    notionPageId: notionPageId,
+                },
             },
         };
         this.isLoading.set(true);
         try {
-            const savedLesson = await this.#lessonService.postLesson(updatedLesson);
+            const savedLesson = await this.lessonsService.postLesson(updatedLesson);
             this.#toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion.' });
             return savedLesson;
         }
@@ -1400,10 +1498,10 @@ class LessonNotionService {
         if (!currentLesson)
             return null;
         let notionPageId = null;
-        if (currentLesson.extras?.notionPageId) {
-            const useExisting = confirm(`Ya tenemos el id ${currentLesson.extras.notionPageId} ¿Quieres usar este id para importar?`);
+        if (currentLesson.extensions?.['extras']?.['notionPageId']) {
+            const useExisting = confirm(`Ya tenemos el id ${currentLesson.extensions?.['extras']?.['notionPageId']} ¿Quieres usar este id para importar?`);
             if (useExisting) {
-                notionPageId = currentLesson.extras.notionPageId;
+                notionPageId = currentLesson.extensions?.['extras']?.['notionPageId'];
             }
             else {
                 const inputUrl = prompt('Ingresa la NUEVA URL de Notion para importar (este ID NO se guardará automáticamente si la lección ya existe)');
@@ -1458,7 +1556,7 @@ class LessonNotionService {
     async improveLessonWithNotionAI(lesson) {
         if (!lesson)
             return;
-        const notionId = lesson.extras?.notionPageId;
+        const notionId = lesson.extensions?.['extras']?.['notionPageId'];
         if (!notionId) {
             this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'Enlaza la lección con Notion primero.' });
             return;
@@ -1482,22 +1580,21 @@ class LessonNotionService {
             this.isLoading.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, decorators: [{
             type: Injectable
         }] });
 
 // import { UserDataExchangeService } from '@dataclouder/ngx-agent-cards';
 class LessonUtilsService {
     constructor() {
-        this.#lessonService = inject(LESSONS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         this.#agentService = inject(CONVERSATION_AI_TOKEN);
         this.loadingBarService = inject(LoadingBarService);
     }
-    #lessonService;
     #toastService;
     #agentService;
     /**
@@ -1522,10 +1619,11 @@ class LessonUtilsService {
         lessonSignal.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
-            const updatedMetadata = { ...(currentLesson.metadata ?? {}), banner: imageUploaded };
+            const assets = { ...(currentLesson.assets ?? {}) };
+            assets.banner = imageUploaded;
             return {
                 ...currentLesson,
-                metadata: updatedMetadata,
+                assets,
             };
         });
     }
@@ -1543,9 +1641,9 @@ class LessonUtilsService {
         }
         // No need to save here, component should ensure it's saved before calling.
         try {
-            await this.#lessonService.postGenerateByAI(lessonId);
+            await this.lessonsService.postGenerateByAI(lessonId);
             // Re-fetch the lesson data to get AI updates
-            const updatedLesson = await this.#lessonService.getLesson(lessonId);
+            const updatedLesson = await this.lessonsService.getLesson(lessonId);
             if (updatedLesson) {
                 this.#toastService.success({ title: 'IA completada', subtitle: 'Lección actualizada con IA.' });
                 return updatedLesson;
@@ -1576,7 +1674,7 @@ class LessonUtilsService {
         }
         try {
             this.loadingBarService.showIndeterminate();
-            const textPrompt = this.#lessonService.getPrompts().content(lesson);
+            const textPrompt = this.lessonsService.getPrompts().content(lesson);
             const messages = [{ content: textPrompt, role: ChatRole.User }];
             const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
             let improvedMarkdown = response.content?.trim() ?? null;
@@ -1628,7 +1726,7 @@ class LessonUtilsService {
                 this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
                 return null;
             }
-            const descriptionPrompt = this.#lessonService.getPrompts().description(lesson);
+            const descriptionPrompt = this.lessonsService.getPrompts().description(lesson);
             const messages = [{ content: descriptionPrompt, role: ChatRole.User }];
             const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
             let generatedDescription = response.content?.trim() ?? null;
@@ -1735,55 +1833,82 @@ class LessonUtilsService {
             dynamicComponents: cleanedDynamicComponents,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root', // Provide globally or in a specific module if preferred
                 }]
         }] });
 
+class DynamicComponentsBuilderService {
+    #dialogService = inject(DialogService);
+    #toastService = inject(TOAST_ALERTS_TOKEN);
+    #dynamicComponentsService = inject(DynamicComponentsService);
+    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 DCLessonComponentAdderComponent {
     constructor() {
         // Services
-        this.#dialogService = inject(DialogService);
-        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
         this.componentAdded = new EventEmitter(); // Changed Output name and type
         // Expose enum to the template
         this.lessonComponentEnum = LessonComponentEnum;
     }
     // Services
-    #dialogService;
-    #toastService;
-    // Moved logic from DCLessonEditorComponent
+    #dynamicComponentsBuilderService;
+    // Logic to open component builder, now utilizing DynamicComponentsBuilderService
     openComponentBuilder(type) {
-        const componentToBuild = LessonComponentBuilders[type];
-        if (!componentToBuild) {
-            console.error(`No component builder found for type: ${type}`);
-            this.#toastService.error({ title: 'Error', subtitle: `Componente desconocido: ${type}` });
-            return;
+        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}`);
         }
-        const dialogRef = this.#dialogService.open(componentToBuild, {
-            width: '80vw',
-            header: 'Agregar componente',
-            closable: true,
-        });
-        // 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
-            }
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonComponentAdderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded" }, 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)=\"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  <!-- 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    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" }, 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)=\"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: i2$3.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: "19.2.4", ngImport: i0, type: DCLessonComponentAdderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, 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)=\"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  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n" }]
+            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)=\"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
             }] } });
@@ -1791,8 +1916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class DCLessonMetadataEditorComponent {
     constructor() {
         // Use signal for input lesson data
-        this.lesson = signal(undefined); // The lesson data itself
-        this.isLoadingLesson = signal(false); // Shared loading state
+        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // The lesson data itself
+        this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : [])); // Shared loading state
         // Outputs for actions
         this.saveRequest = new EventEmitter();
         this.importNotionRequest = new EventEmitter();
@@ -1803,7 +1928,7 @@ class DCLessonMetadataEditorComponent {
         // Injected Services
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
-        this.#lessonService = inject(LESSONS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.#turndownService = new TurndownService(); // Instantiate TurndownService
     }
     // Removed generateAIRequest Output as it's handled internally now
@@ -1812,7 +1937,6 @@ class DCLessonMetadataEditorComponent {
     // Injected Services
     #lessonUtilsService;
     #toastService;
-    #lessonService;
     #turndownService; // Instantiate TurndownService
     // Method to handle property changes for ROOT properties (e.g., level)
     onRootPropertyChange(property, value) {
@@ -1820,24 +1944,15 @@ class DCLessonMetadataEditorComponent {
             if (!current)
                 return undefined;
             // Avoid updating metadata directly here
-            if (property === 'metadata') {
-                console.warn('Direct metadata updates should use onMetadataPropertyChange');
-                return current;
-            }
+            // if (property === 'metadata') {
+            //   console.warn('Direct metadata updates should use onMetadataPropertyChange');
+            //   return current;
+            // }
             return { ...current, [property]: value };
         });
         // Emit removed - signal is updated directly above.
         // this.propertyChange.emit({ propertyPath: property, value });
     }
-    // Method to handle property changes for METADATA properties
-    onMetadataPropertyChange(property, value) {
-        this.lesson.update((current) => {
-            if (!current)
-                return undefined;
-            const updatedMetadata = { ...(current.metadata ?? {}), [property]: value };
-            return { ...current, metadata: updatedMetadata };
-        });
-    }
     // Method to handle property changes for APP EXTENSION properties
     onAppExtensionPropChange(property, value) {
         this.lesson.update((current) => {
@@ -1846,8 +1961,24 @@ class DCLessonMetadataEditorComponent {
             // Ensure appExtension exists, initialize if not
             // Convert value to number specifically for 'level'
             const finalValue = property === 'level' ? Number(value) : value;
-            const updatedAppExtension = { ...(current.appExtension ?? {}), [property]: finalValue };
-            return { ...current, appExtension: updatedAppExtension };
+            const updatedAppExtension = { ...(current.extensions ?? {}), [property]: finalValue };
+            return { ...current, extensions: updatedAppExtension };
+        });
+    }
+    onManageablePropertyChange(property, value) {
+        this.lesson.update((current) => {
+            if (!current)
+                return undefined;
+            const updatedManageable = { ...(current.manageable ?? {}), [property]: value };
+            return { ...current, manageable: updatedManageable };
+        });
+    }
+    onAuditablePropertyChange(property, value) {
+        this.lesson.update((current) => {
+            if (!current)
+                return undefined;
+            const updatedAuditable = { ...(current.auditable ?? {}), [property]: value };
+            return { ...current, auditable: updatedAuditable };
         });
     }
     // Methods to emit action requests
@@ -1883,7 +2014,7 @@ class DCLessonMetadataEditorComponent {
             else {
                 // Clean orphaned and Save before Improve
                 const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
-                const savedLesson = await this.#lessonService.postLesson(lessonToSave);
+                const savedLesson = await this.lessonsService.postLesson(lessonToSave);
                 if (!savedLesson) {
                     this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudo guardar antes de generar con IA.' });
                     throw new Error('Failed to save before AI generation');
@@ -1946,7 +2077,7 @@ class DCLessonMetadataEditorComponent {
             // Ensure lesson() is not undefined before saving
             const lessonToSave = this.lesson();
             if (lessonToSave) {
-                await this.#lessonService.postLesson(lessonToSave);
+                await this.lessonsService.postLesson(lessonToSave);
                 this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
             }
             else {
@@ -1976,32 +2107,35 @@ class DCLessonMetadataEditorComponent {
         }
         const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
         if (generatedDescription) {
-            // Use the new method for metadata properties
-            this.onMetadataPropertyChange('description', generatedDescription);
+            this.lessonForm.controls['description'].setValue(generatedDescription);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.metadata?.title\"\n        (ngModelChange)=\"onMetadataPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.metadata?.description\"\n          (ngModelChange)=\"onMetadataPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.metadata?.prompt\"\n        (ngModelChange)=\"onMetadataPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.metadata?.isPublished\"\n          (ngModelChange)=\"onMetadataPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.appExtension?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.appExtension) {\n      <div>\n        {{ currentLesson.appExtension?.['baseLang'] | flagEmoji }} -> {{ currentLesson.appExtension?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.appExtension?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.appExtension?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: // Added TooltipModule
+    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: "17.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { lesson: "lesson", lessonForm: "lessonForm", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div [formGroup]=\"lessonForm\">\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input pInputText style=\"width: 100%\" formControlName=\"title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" formControlName=\"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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.auditable?.prompt\"\n        (ngModelChange)=\"onAuditablePropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.manageable?.status === 'published'\"\n          (ngModelChange)=\"onManageablePropertyChange('status', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.extensions?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.extensions) {\n      <div>\n        {{ currentLesson.extensions?.['baseLang'] | flagEmoji }} -> {{ currentLesson.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.extensions?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.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: TooltipModule }, { kind: "directive", type: i2$3.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 Pipe
+                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"] }, { kind: "pipe", type: // Added TooltipModule
                 FlagLanguagePipe, name: "flagEmoji" }, { kind: "pipe", type: // Added Pipe
-                LangDescTranslationPipe, name: "langDesc" }, { kind: "ngmodule", type: // Added Pipe
-                InputGroupModule }, { kind: "component", type: i5$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] }); }
+                LangDescTranslationPipe, name: "langDesc" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-metadata-editor', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ButtonModule,
                         InputTextModule,
+                        ReactiveFormsModule,
                         TooltipModule, // Added TooltipModule
                         FlagLanguagePipe, // Added Pipe
                         LangDescTranslationPipe, // Added Pipe
                         InputGroupModule,
                         DividerModule,
-                    ], template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.metadata?.title\"\n        (ngModelChange)=\"onMetadataPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.metadata?.description\"\n          (ngModelChange)=\"onMetadataPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.metadata?.prompt\"\n        (ngModelChange)=\"onMetadataPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.metadata?.isPublished\"\n          (ngModelChange)=\"onMetadataPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.appExtension?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.appExtension) {\n      <div>\n        {{ currentLesson.appExtension?.['baseLang'] | flagEmoji }} -> {{ currentLesson.appExtension?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.appExtension?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.appExtension?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
+                    ], template: "@if (lesson(); as currentLesson) {\n<div [formGroup]=\"lessonForm\">\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input pInputText style=\"width: 100%\" formControlName=\"title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" formControlName=\"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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.auditable?.prompt\"\n        (ngModelChange)=\"onAuditablePropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.manageable?.status === 'published'\"\n          (ngModelChange)=\"onManageablePropertyChange('status', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.extensions?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.extensions) {\n      <div>\n        {{ currentLesson.extensions?.['baseLang'] | flagEmoji }} -> {{ currentLesson.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.extensions?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
         }], propDecorators: { lesson: [{
                 type: Input,
                 args: [{ required: true }]
+            }], lessonForm: [{
+                type: Input,
+                args: [{ required: true }]
             }], isLoadingLesson: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2013,152 +2147,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }] } });
 
-// Define placeholder endpoints - these should be configured appropriately
-const LESSONS_BASE_PATH = 'api/lesson'; // Example base path
-class DefaultLessonsService {
-    constructor() {
-        this.httpCoreService = inject(HttpCoreService);
-        // --- Endpoint Definitions (Hardcoded as requested) ---
-        this.endpoints = {
-            queryLessons: `${LESSONS_BASE_PATH}/query`,
-            getLesson: (id) => `${LESSONS_BASE_PATH}/${id}`,
-            saveLesson: `api/user/saveLesson`,
-            updateLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming PUT to /lessons/:id
-            deleteLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming DELETE to /lessons/:id
-            generateLesson: `${LESSONS_BASE_PATH}/generate`, // Placeholder
-            generateByAI: `${LESSONS_BASE_PATH}/generate-ai`, // Placeholder
-            improveMDWithAI: `${LESSONS_BASE_PATH}/improve-markdown-ai`, // Placeholder
-            QueryLessons: 'api/lesson/query',
-            Lesson: 'api/lesson',
-            SaveLesson: 'api/lesson-polilan',
-            GetPublicLessons: 'api/lesson/publicLessons',
-            GetUnpublishedLessons: 'api/lesson/unpublished',
-            TakenLesson: 'api/lesson/taken',
-            DeleteLesson: 'api/lesson',
-            Base: 'api/lesson',
-            GenerateBanner: 'api/lesson/generate-banner',
-        };
-    }
-    saveTakenLesson(lesson) {
-        // Not sure how to implement this yet.
-        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
-    }
-    // --- Method Implementations ---
-    async getLessons(paginator) {
-        // Assuming paginator is the body for a POST request based on the example
-        return this.httpCoreService.post(this.endpoints.queryLessons, paginator || {});
-    }
-    async getLesson(id) {
-        return this.httpCoreService.get(this.endpoints.getLesson(id));
-    }
-    async postLesson(lesson) {
-        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
-    }
-    async updateLesson(lesson) {
-        if (!lesson._id) {
-            throw new Error('Lesson ID is required for update.');
-        }
-        // Assuming _id is the identifier
-        return this.httpCoreService.put(this.endpoints.updateLesson(lesson._id), lesson);
-    }
-    async deleteLesson(id) {
-        return this.httpCoreService.delete(this.endpoints.deleteLesson(id));
-    }
-    async generateLesson(lesson) {
-        // This endpoint might need specific data or structure
-        return this.httpCoreService.post(this.endpoints.generateLesson, lesson);
-    }
-    async postGenerateByAI(id) {
-        return this.httpCoreService.post(this.endpoints.generateByAI, { id });
-    }
-    async postImproveMDWithAI(lessonId, markdownText) {
-        return this.httpCoreService.post(this.endpoints.improveMDWithAI, { id: lessonId, markdown: markdownText });
-    }
-    extractTextFromHtml(html) {
-        // Copied from src/app/core/data-services/lessons.service.ts
-        const r1 = new RegExp('~(.+?)~', 'g');
-        const lessonHtml = html.replace(r1, (_matching, jsonCoded) => {
-            try {
-                const data = JSON.parse(jsonCoded);
-                return `<span>${data?.settings?.text || ''}</span>`; // Added default empty string
-            }
-            catch (e) {
-                console.error('Error parsing JSON in extractTextFromHtml:', jsonCoded, e);
-                return ''; // Return empty string on error
-            }
-        });
-        // Remove HTML tags
-        let text = lessonHtml.replace(/<[^>]*>/g, ' ');
-        // Remove style and script content
-        text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ' ');
-        text = text.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ' ');
-        // Decode HTML entities
-        text = text.replace(/&nbsp;/g, ' ');
-        text = text.replace(/&/g, '&');
-        text = text.replace(/</g, '<');
-        text = text.replace(/>/g, '>');
-        // Remove extra whitespace
-        text = text.replace(/\s+/g, ' ').trim();
-        return text;
-    }
-    generateBanner(prompt, lessonId) {
-        return this.httpCoreService.post(this.endpoints.GenerateBanner, { prompt, lessonId });
-    }
-    getPrompts() {
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class DCLessonEditorComponent {
     // Services
     #activatedRoute; // Re-inject as it's needed for navigation
     #lessonNotionService;
     #lessonUtilsService;
     #router;
-    #lessonService;
     #toastService;
     #loadingBarService;
+    #formBuilder;
     constructor() {
         // Services
         this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
         this.#lessonNotionService = inject(LessonNotionService);
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#router = inject(Router);
-        this.#lessonService = inject(LESSONS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         this.#loadingBarService = inject(LoadingBarService);
         this.defaultLessonsService = inject(DefaultLessonsService);
         this.promptService = inject(PromptService);
         this.ngxVertexService = inject(NgxVertexService);
         this.cdr = inject(ChangeDetectorRef);
+        this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
+        this.#formBuilder = inject(FormBuilder);
         // Signals States
         this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
-        this.lesson = signal(undefined); // Initialize as undefined
-        this.isLoadingLesson = signal(false);
+        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : []));
+        this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : []));
         // Computed Signals
         this.coverImageUrl = computed(() => {
             // Priority Order 1 Metadata Banner, 2 Banner, 3 Media First Images, 4 Default Banner TODO: reveme banner after migration to Content
             const currentLesson = this.lesson();
-            if (currentLesson?.metadata?.banner?.url) {
-                return currentLesson.metadata.banner.url;
-            }
-            else if (currentLesson?.banner?.url) {
-                return currentLesson.banner.url;
+            if (currentLesson?.assets?.banner?.url) {
+                return currentLesson.assets.banner.url;
             }
             else if (currentLesson?.media?.images?.find((img) => img.type === 'cover')) {
                 // 3 Media First Images
                 return currentLesson.media.images.find((img) => img.type === 'cover')?.url;
             }
-            return '/assets/images/default_banner.webp';
-        });
+            return '/assets/defaults/images/default_banner.webp';
+        }, ...(ngDevMode ? [{ debugName: "coverImageUrl" }] : []));
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
             const currentLesson = this.lesson();
@@ -2166,7 +2195,7 @@ class DCLessonEditorComponent {
                 return Object.values(currentLesson.dynamicComponents);
             }
             return []; // Return empty array if no lesson or no dynamic components
-        });
+        }, ...(ngDevMode ? [{ debugName: "dynamicComponentsArray" }] : []));
         // States
         this.components = {}; // Current Dynamic components
         this.editor = BalloonEditor;
@@ -2177,6 +2206,10 @@ class DCLessonEditorComponent {
             cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
         };
         this.promptsVisible = false;
+        this.lessonForm = this.#formBuilder.group({
+            title: [''],
+            description: [''],
+        });
         // Effect to fetch lesson data when ID changes
         effect(async () => {
             const id = this.lessonId();
@@ -2184,9 +2217,10 @@ class DCLessonEditorComponent {
             if (id) {
                 this.isLoadingLesson.set(true); // Start loading
                 try {
-                    const fetchedLesson = await this.#lessonService.getLesson(id);
+                    const fetchedLesson = await this.lessonsService.getLesson(id);
                     if (fetchedLesson) {
                         this.lesson.set(fetchedLesson);
+                        this.lessonForm.patchValue(fetchedLesson, { emitEvent: false });
                     }
                     else {
                         this.lesson.set(undefined); // Reset if not found
@@ -2211,6 +2245,13 @@ class DCLessonEditorComponent {
                 this.isLoadingLesson.set(false); // Ensure loading is off
             }
         });
+        this.lessonForm.valueChanges.subscribe((value) => {
+            this.lesson.update((current) => {
+                if (!current)
+                    return undefined;
+                return { ...current, ...value };
+            });
+        });
     }
     /**
      * Updates a specific property on the lesson signal.
@@ -2226,6 +2267,13 @@ class DCLessonEditorComponent {
             return { ...currentLesson, [property]: value };
         });
     }
+    onAssetsChange(updatedAssets) {
+        this.lesson.update((currentLesson) => {
+            if (!currentLesson)
+                return undefined;
+            return { ...currentLesson, assets: updatedAssets };
+        });
+    }
     onTagRemove(tag) {
         this.lesson.update((currentLesson) => {
             if (!currentLesson)
@@ -2263,9 +2311,10 @@ class DCLessonEditorComponent {
         this.isLoadingLesson.set(true); // Indicate saving
         try {
             // Use the cleaned lesson object for saving
-            const savedLesson = await this.#lessonService.postLesson(lessonToSave);
+            const savedLesson = await this.lessonsService.postLesson(lessonToSave);
             const currentId = this.lessonId();
             if (!currentId) {
+                // No se como guardar los extras aunt
                 // It was a new lesson, now it has an ID. Navigate.
                 this.#toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
                 // The effect should automatically fetch the lesson again after navigation due to paramMap change.
@@ -2361,7 +2410,7 @@ class DCLessonEditorComponent {
     }
     async generateBanner() {
         this.#toastService.info({ title: 'Generando prompt de sugerencia', subtitle: 'Por favor, espera' });
-        const prompt = this.#lessonService.getPrompts().banner(this.lesson());
+        const prompt = this.lessonsService.getPrompts().banner(this.lesson());
         const geminiRes = await this.ngxVertexService.generateText([{ role: ChatRoleVertex.User, content: prompt }]);
         this.promptService
             .openPrompt({
@@ -2376,7 +2425,8 @@ class DCLessonEditorComponent {
                 this.#loadingBarService.showIndeterminate();
                 this.defaultLessonsService.generateBanner(promptResult, this.lessonId()).then((result) => {
                     if (result) {
-                        this.updateLessonProperty('banner', result.banner);
+                        alert('Revisar como actualizar el banner');
+                        // this.updateLessonProperty('banner', (result as any).banner);
                     }
                     this.#loadingBarService.successAndHide();
                 });
@@ -2394,17 +2444,22 @@ class DCLessonEditorComponent {
     }
     showPrompts() {
         this.promptsVisible = true;
-        const promptsFn = this.#lessonService.getPrompts();
+        const promptsFn = this.lessonsService.getPrompts();
         this.prompts = { banner: promptsFn.banner(this.lesson()), content: promptsFn.content(this.lesson()), description: promptsFn.description(this.lesson()) };
         console.log(this.prompts);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<div>\n  <h4>Aqui estan los prompts</h4>\n</div>\n\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\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}\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"] }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "test"], 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: InputTextModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$2.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "component", type: // Add the component adder here
-                DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "ngmodule", type: // Add the metadata editor here
-                DialogModule }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    editComponent(comp) {
+        console.log('Edit component:', comp);
+        this.dynamicComponentsBuilderService.openComponentBuilder(comp.component, comp).onClose.subscribe((result) => {
+            this.onComponentAdded(result);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<!-- <div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div> -->\n\n<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader [assets]=\"lesson()?.assets\" storagePath=\"lessons/{{ lesson()?.id }}\" (assetsChange)=\"onAssetsChange($event)\"></assets-loader>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"lesson()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"lesson()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-viewer [data]=\"lesson()?.manageable\"></dc-manageable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"lesson()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"lesson()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<!-- <dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [lessonForm]=\"lessonForm\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor> -->\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('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\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\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}\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"] }, { 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: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$2.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: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$3.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"] }, { kind: "ngmodule", type: // Add the metadata editor here
+                DialogModule }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: DcExtensionsViewerComponent, selector: "dc-extensions-viewer", inputs: ["data"] }, { kind: "component", type: DcLearnableViewerComponent, selector: "dc-learnable-viewer", inputs: ["data"] }, { kind: "component", type: DcAuditableViewerComponent, selector: "dc-auditable-viewer", inputs: ["data"] }, { kind: "component", type: DcManageableViewerComponent, selector: "dc-manageable-viewer", inputs: ["data"] }, { kind: "component", type: DcReactionsViewerComponent, selector: "dc-reactions-viewer", inputs: ["data"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-editor', standalone: true, imports: [
                         ButtonModule,
@@ -2413,12 +2468,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         DCLessonRendererComponent,
                         FormsModule,
                         InputTextModule,
+                        ReactiveFormsModule,
                         SplitterModule,
                         TooltipModule,
                         DCLessonComponentAdderComponent, // Add the component adder here
                         DCLessonMetadataEditorComponent, // Add the metadata editor here
                         DialogModule,
-                    ], providers: [LessonNotionService], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<div>\n  <h4>Aqui estan los prompts</h4>\n</div>\n\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\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}\n"] }]
+                        DcExtensionsViewerComponent,
+                        DcLearnableViewerComponent,
+                        DcAuditableViewerComponent,
+                        DcManageableViewerComponent,
+                        DcReactionsViewerComponent,
+                        AssetsLoaderComponent,
+                    ], providers: [LessonNotionService], template: "<!-- <div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div> -->\n\n<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader [assets]=\"lesson()?.assets\" storagePath=\"lessons/{{ lesson()?.id }}\" (assetsChange)=\"onAssetsChange($event)\"></assets-loader>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"lesson()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"lesson()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-viewer [data]=\"lesson()?.manageable\"></dc-manageable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"lesson()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"lesson()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<!-- <dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [lessonForm]=\"lessonForm\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor> -->\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('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\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ViewContainerRef }]
@@ -2432,10 +2494,10 @@ class LessonDynamicComponent {
     constructor() {
         this.settings = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LessonDynamicComponent, isStandalone: true, selector: "app-lesson-component", inputs: { settings: "settings" }, ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: LessonDynamicComponent, isStandalone: true, selector: "app-lesson-component", inputs: { settings: "settings" }, ngImport: i0, template: '<div>no template</div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonDynamicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonDynamicComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-lesson-component',
@@ -2446,6 +2508,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+const Endpoints = {
+    courses: 'api/courses',
+};
+class CoursesService {
+    constructor() {
+        this.httpCoreService = inject(HttpCoreService);
+    }
+    // Not sure how to implement this yet.
+    getCourses() {
+        return this.httpCoreService.get(Endpoints.courses);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CoursesAdminComponent {
+    constructor() {
+        this.httpCoreService = inject(HttpCoreService);
+    }
+    async ngOnInit() {
+        const courses = await this.httpCoreService.get('courses');
+        console.log(courses);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesAdminComponent, isStandalone: true, selector: "ngx-courses-admin", ngImport: i0, template: "<p>welcome to courses creation</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesAdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-courses-admin', standalone: true, template: "<p>welcome to courses creation</p>\n" }]
+        }] });
+
+class CourseService extends EntityCommunicationService {
+    constructor() {
+        super('courses');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class CourseListComponent extends PaginationBase {
+    constructor() {
+        super(...arguments);
+        // Services
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.courseService = inject(CourseService);
+        this.cdr = inject(ChangeDetectorRef);
+        // Inputs
+        this.viewType = 'card';
+        this.onlyView = input(true, ...(ngDevMode ? [{ debugName: "onlyView" }] : []));
+        this.onSelect = output();
+        // States
+        this.courses = signal([], ...(ngDevMode ? [{ debugName: "courses" }] : []));
+        this.columns = ['name', 'description', 'updatedAt', 'image'];
+        this.filterBarOptions = { showActions: true, showCreateButton: true, showViewButton: true };
+    }
+    getCustomButtons(item) {
+        return [
+            {
+                tooltipOptions: { tooltipLabel: 'Ver detalles', tooltipPosition: 'bottom' },
+                icon: 'pi pi-eye',
+                command: () => this.doAction({ item, action: 'view' }),
+            },
+            {
+                label: 'Editar',
+                icon: 'pi pi-pencil',
+                command: () => this.doAction({ item, action: 'edit' }),
+            },
+            {
+                label: 'Eliminar',
+                icon: 'pi pi-trash',
+                command: () => this.doAction({ item, action: 'delete' }),
+            },
+        ];
+    }
+    async ngOnInit() {
+        this.filterConfig.returnProps = { _id: 1, id: 1, name: 1, description: 1, updatedAt: 1, image: 1 };
+        this.filterConfig.filters = { targetLang: 'de', baseLang: 'es' };
+        const response = await this.courseService.query(this.filterConfig);
+        this.courses.set(response.rows);
+        this.cdr.detectChanges();
+        console.log(this.courses(), this.viewType);
+        this.cdr.detectChanges();
+    }
+    loadData() {
+        throw new Error('Method not implemented.');
+    }
+    onNew() {
+        console.log('onNew');
+        this.router.navigate(['./edit'], { relativeTo: this.route });
+    }
+    toggleView() {
+        this.viewType = this.viewType === 'card' ? 'table' : 'card';
+        console.log(this.viewType, this.courses());
+        this.cdr.detectChanges();
+    }
+    selectItem(course) {
+        console.log('onSelect');
+        this.onSelect.emit(course);
+    }
+    async doAction(actionEvent) {
+        const { item, action } = actionEvent;
+        if (action == 'changeView') {
+            this.toggleView();
+        }
+        const id = item.id || item._id;
+        switch (action) {
+            case 'view':
+                this.router.navigate(['./details', id], { relativeTo: this.route });
+                break;
+            case 'delete':
+                const areYouSure = confirm('¿Estás seguro de querer eliminar este origen?');
+                if (areYouSure) {
+                    await this.courseService.remove(id);
+                    this.courses.set(this.courses().filter((course) => course._id !== id));
+                    this.toastService.success({
+                        title: 'Origen eliminado',
+                        subtitle: 'El origen ha sido eliminado correctamente',
+                    });
+                    this.cdr.detectChanges();
+                }
+                break;
+            case 'edit':
+                this.router.navigate(['./edit', id], { relativeTo: this.route });
+                break;
+        }
+    }
+    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 [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\n        />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\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-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.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"], outputs: ["onFilterAction", "onChangeSort", "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$2.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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-course-list', imports: [
+                        CardModule,
+                        ButtonModule,
+                        DCFilterBarComponent,
+                        SpeedDialModule,
+                        DatePipe,
+                        SlicePipe,
+                        PaginatorModule,
+                        RouterModule,
+                        TableModule,
+                        QuickTableComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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 [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\n        />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\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-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"] }]
+        }], propDecorators: { viewType: [{
+                type: Input
+            }] } });
+
+class CourseDetailComponent {
+    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: "14.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", ngImport: i0, template: `<p>course-detail works!</p>`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-course-detail', imports: [], template: `<p>course-detail works!</p>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }] });
+
+class CourseFormComponent extends EntityBaseFormComponent {
+    constructor() {
+        super(...arguments);
+        this.entityCommunicationService = inject(CourseService);
+        this.fb = inject(FormBuilder);
+        this.languageOptions = getSupportedLanguageOptions('en');
+        this.form = this.fb.group({
+            name: ['', Validators.required],
+            description: [''],
+            image: [{}],
+            targetLang: ['', Validators.required],
+            baseLang: ['', Validators.required],
+        });
+        this.onSave = output();
+        this.storageImgSettings = {
+            path: `courses`,
+            cropSettings: { aspectRatio: AspectType.Square, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 700 },
+        };
+        this.extraFields = [
+            { key: 'title', type: 'input', props: { label: 'Title', placeholder: 'Title', required: false } },
+            { key: 'content', type: 'textarea', props: { label: 'Content', placeholder: 'Content', required: false } },
+        ];
+    }
+    patchForm(entity) {
+        this.form.patchValue(entity);
+    }
+    async save() {
+        const result = await super.save();
+        if (result) {
+            this.onSave.emit(result);
+            if (this.toastService) {
+                this.toastService.success({ title: 'Course', subtitle: 'Data was saved' });
+            }
+        }
+        return result;
+    }
+    handleImageUpload(event) {
+        this.form.patchValue({ image: event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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 style=\"display: flex; justify-content: flex-end\">\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: i3$1.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.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: i2$3.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: FormlyModule }, { kind: "ngmodule", type: DialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-source-form', imports: [
+                        ReactiveFormsModule,
+                        CardModule,
+                        TextareaModule,
+                        ButtonModule,
+                        SelectModule,
+                        InputTextModule,
+                        ChipModule,
+                        TooltipModule,
+                        CropperComponentModal,
+                        FormlyModule,
+                        DialogModule,
+                        CourseListComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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 style=\"display: flex; justify-content: flex-end\">\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"] }]
+        }] });
+
+const COURSES_ROUTES = [
+    {
+        path: '',
+        component: CoursesComponent,
+        children: [
+            {
+                path: '',
+                component: CourseListComponent,
+            },
+            {
+                path: 'details/:id',
+                component: CourseDetailComponent,
+            },
+            {
+                path: 'edit',
+                component: CourseFormComponent,
+            },
+            {
+                path: 'edit/:id',
+                component: CourseFormComponent,
+            },
+        ],
+    },
+];
+
+class CoursesComponent {
+    static { this.routes = COURSES_ROUTES; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesComponent, isStandalone: true, selector: "app-courses", ngImport: i0, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-courses', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"] }]
+        }] });
+
 /*
  * Public API Surface of lessons
  */
@@ -2454,5 +2779,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComponentBuilder, ComponentWithForm, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
+export { ComponentBuilder, ComponentWithForm, CourseDetailComponent, CourseFormComponent, CourseListComponent, CourseService, CoursesAdminComponent, CoursesComponent, CoursesService, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, DynamicComponentBuilders, DynamicComponents, DynamicComponentsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map