@dataclouder/ngx-lessons 0.1.2 → 0.1.3

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,68 +1,245 @@
 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, ChangeDetectorRef, ViewChildren, Injectable, input, Renderer2, ViewContainerRef, computed, effect, ViewChild, output } from '@angular/core';
+import * as i1$2 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
+import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, SlicePipe } from '@angular/common';
+import * as i1$3 from '@angular/router';
+import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService, HttpCoreService, PromptService } 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 { 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 { NgxTtsComponent, getRandomQuickVoice } from '@dataclouder/ngx-tts';
+import * as i4 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import * as i2 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
 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 { 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 i6 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 { TextEngines, ConversationType, USER_DATA_EXCHANGE, ChatRole, EvalResultStringDefinition, 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 * as i6$1 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$3 from 'primeng/api';
+import * as i3$3 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import { ChipModule } from 'primeng/chip';
+import { FormlyModule } from '@ngx-formly/core';
+import { TableModule } from 'primeng/table';
+
+// import { LangCodeDescription, LangCodeDescriptionEs } from '../components/lesson-mini-components/components/lessons.clases';
+// 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: "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 '🇫🇷';
+        }
+        else if (lang === 'it') {
+            return '🇮🇹';
+        }
+        else if (lang === 'pt') {
+            return '🇧🇷';
+        }
+        else {
+            return '';
+        }
+    }
+    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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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 +264,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 +274,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,8 +289,8 @@ 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: "19.2.4", ngImport: i0, type: ComponentBuilder, deps: [], 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", 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: [{
             type: Component,
@@ -116,7 +298,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     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: "19.2.4", ngImport: i0, type: TextWriterBuiderComponent, deps: null, 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: i3.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"] }]
+        }] });
 
 class ComponentWithForm {
     constructor() {
@@ -142,111 +341,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();
@@ -283,7 +377,7 @@ 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.ɵ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: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterComponent, decorators: [{
             type: Component,
@@ -293,22 +387,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: "19.2.4", ngImport: i0, type: TranslationSwitcherBuilderComponent, deps: null, 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: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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() {
@@ -339,6 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class SpeakerBuilderComponent extends ComponentBuilder {
     constructor() {
         super(...arguments);
+        this.componentName = 'Speaker';
         this.tts = signal(undefined);
     }
     handleTtsGenerated(event) {
@@ -397,234 +487,133 @@ 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" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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,
-        },
-    ];
+    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.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"] }] }); }
 }
-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:
+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
+            }] } });
 
-- 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}
+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: "19.2.4", ngImport: i0, type: SelectorBuilderComponent, deps: null, 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: i3.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: 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: "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"] }]
+        }] });
 
-  `,
-        model: { id: 'gemini-2.5-flash-preview-04-17', provider: 'google' },
-    };
+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];
+}
+const LESSONS_TOKEN = new InjectionToken('Lessons Service');
+class LessonsAbstractService {
+}
+// my-service.provider.ts
+function provideLessonsService(serviceImplementation) {
+    return [
+        {
+            provide: LESSONS_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
 
 var EventCard;
 (function (EventCard) {
@@ -665,7 +654,6 @@ class DcLessonCardComponent {
         ];
     }
     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';
     }
@@ -686,7 +674,7 @@ class DcLessonCardComponent {
         }
     }
     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.ɵ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$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: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
@@ -714,16 +702,15 @@ const TableViewActions = [
 ];
 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;
+    constructor() {
+        super(...arguments);
         this.showOptions = true;
         this.customFilters = [];
         this.viewType = 'cards';
+        // Injected Services
+        this.cdr = inject(ChangeDetectorRef);
+        this.lessonsService = inject(LESSONS_TOKEN);
+        this.toastrService = inject(TOAST_ALERTS_TOKEN);
         this.columns = tableViewColumns;
         this.cardComponent = null;
         this.cardEventSubs = [];
@@ -733,6 +720,8 @@ class DCLessonListComponent extends PaginationBase {
     ngOnInit() {
         this.filterConfig.returnProps = returnProperties;
         this.cardComponent = this.customCardComponent || DcLessonCardComponent;
+        // TODO: i think show options is for admin, but refactor to add ListFilterBarOptions
+        this.filterBarOptions = { showCreateButton: this.showOptions, showViewButton: this.showOptions, showActions: this.showOptions };
         this.getPaginatedLessons(this.filterConfig);
     }
     subscribeDinamicInstantToEvents() {
@@ -811,19 +800,13 @@ class DCLessonListComponent extends PaginationBase {
             this.onAction.emit(actionEvent);
         }
     }
-    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: "19.2.4", ngImport: i0, type: DCLessonListComponent, deps: null, 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\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"newLesson()\"></dc-filter-bar>\n@if(viewType === 'table') {\n\n<app-quick-table [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n\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: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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: [{
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"newLesson()\"></dc-filter-bar>\n@if(viewType === 'table') {\n\n<app-quick-table [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n\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"] }]
+        }], propDecorators: { showOptions: [{
                 type: Input
             }], customCardComponent: [{
                 type: Input
@@ -870,10 +853,6 @@ 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) {
     return {
         expectedResponseType: `interface EvalResult {
@@ -930,20 +909,15 @@ ${userInformationPrompt}`;
      * @param lesson The lesson data.
      * @returns An IConversationSettings object configured for the lesson scenario.
      */
-    async generateConversationSettingsForLesson(lesson) {
+    async generateConversationSettingsForLesson(lesson, settings) {
         // 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 baseLang = this.userService.getUserDataExchange()?.baseLang || 'en';
         const lessonText = this.lessonService.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,
@@ -955,6 +929,7 @@ ${userInformationPrompt}`;
             autoStart: true,
             messages: [initialMessage],
             model: { provider: 'google' },
+            voice: getRandomQuickVoice(baseLang || 'en', 'female'),
         };
         return conversationSettings;
     }
@@ -994,23 +969,57 @@ 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: "19.2.4", ngImport: i0, type: DynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicComponentsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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.settings = input();
         // --- 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.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);
         // --- State Signals ---
         this.lesson = signal(undefined); // Internal lesson state signal
         this.chatVisible = signal(false); // Signal for chat visibility
@@ -1018,6 +1027,7 @@ class DCLessonRendererComponent {
         this.evaluatorAgentCard = signal(undefined); // Signal for evaluator card
         this.conversationSettings = signal(undefined);
         this.evalAgentTask = signal(undefined); // Signal for evaluator card
+        this.backgroundTasks = {};
         // --- Computed Signals ---
         this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url); // Computed signal for imageCover
         // --- Properties ---
@@ -1080,6 +1090,11 @@ class DCLessonRendererComponent {
             }
         });
     }
+    ngOnInit() {
+        this.backgroundTasks = {
+            [ConversationEvents.OnUserMessage]: this.evalAgentTask(),
+        };
+    }
     // --- Rendering Logic ---
     _clearLessonRendering() {
         // Destroy previously created dynamic components
@@ -1095,7 +1110,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 +1123,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 +1175,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 +1235,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,7 +1276,7 @@ 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);
@@ -1312,11 +1319,11 @@ class DCLessonRendererComponent {
         }
     }
     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.ɵ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 }, 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(chatVisible()) {\n<p-drawer header=\"Conversation\" [visible]=\"chatVisible()\" (visibleChange)=\"onVisibleChange($event)\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [backgroundTasks]=\"backgroundTasks\"\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", "backgroundTasks", "taskOnUserMessage", "taskOnAssistantMessage", "parseDict"], outputs: ["sendMessage", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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(chatVisible()) {\n<p-drawer header=\"Conversation\" [visible]=\"chatVisible()\" (visibleChange)=\"onVisibleChange($event)\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [backgroundTasks]=\"backgroundTasks\"\n    [conversationSettings]=\"conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (sendMessage)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"] }]
         }], ctorParameters: () => [], propDecorators: { wordClicked: [{
                 type: Output
             }], dynamicLesson: [{
@@ -1745,45 +1752,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+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: "19.2.4", ngImport: i0, type: DynamicComponentsBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicComponentsBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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.ɵ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  <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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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
             }] } });
@@ -1981,10 +2015,10 @@ class DCLessonMetadataEditorComponent {
         }
     }
     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.ɵ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: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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
                 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"] }] }); }
+                InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
             type: Component,
@@ -2139,6 +2173,7 @@ class DCLessonEditorComponent {
         this.promptService = inject(PromptService);
         this.ngxVertexService = inject(NgxVertexService);
         this.cdr = inject(ChangeDetectorRef);
+        this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
         // Signals States
         this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
         this.lesson = signal(undefined); // Initialize as undefined
@@ -2266,6 +2301,7 @@ class DCLessonEditorComponent {
             const savedLesson = await this.#lessonService.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.
@@ -2399,8 +2435,14 @@ class DCLessonEditorComponent {
         console.log(this.prompts);
         this.cdr.markForCheck();
     }
+    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: "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
+    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\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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$3.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: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { 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: SplitterModule }, { kind: "component", type: i5$1.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: i6.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"] }] }); }
 }
@@ -2418,7 +2460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         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"] }]
+                    ], 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\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 }]
@@ -2446,6 +2488,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+const Endpoints$1 = {
+    courses: 'api/courses',
+};
+class CoursesService {
+    constructor() {
+        this.httpCoreService = inject(HttpCoreService);
+    }
+    // Not sure how to implement this yet.
+    getCourses() {
+        return this.httpCoreService.get(Endpoints$1.courses);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CoursesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CoursesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", ngImport: i0, type: CoursesAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "19.2.4", ngImport: i0, type: CoursesAdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-courses-admin', standalone: true, template: "<p>welcome to courses creation</p>\n" }]
+        }] });
+
+class CoursesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CoursesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "19.2.4", 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"] }]
+        }] });
+
+class CourseDetailComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "19.2.4", 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"] }]
+        }] });
+
+const server = 'primary';
+// TODO add your own end points
+const Endpoints = {
+    Courses: {
+        Courses: 'api/courses',
+        CoursesFiltered: 'api/courses/query',
+    },
+};
+class CourseService {
+    constructor() {
+        this.httpService = inject(HttpCoreService);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+    }
+    async getCourses() {
+        try {
+            const response = await this.httpService.get(Endpoints.Courses.Courses, server);
+            this.toastService.success({ title: 'Se han encontrado generics', subtitle: 'Mostrando información' });
+            return response;
+        }
+        catch (error) {
+            this.toastService.warn({ title: 'Error fetching generics', subtitle: 'Showing Default Data' });
+            // return RemoveSimpleDataExample;
+            return [];
+        }
+    }
+    async getFilteredCourses(filter) {
+        return this.httpService.post(Endpoints.Courses.CoursesFiltered, filter, server);
+    }
+    async getCourse(id) {
+        return this.httpService.get(`${Endpoints.Courses.Courses}/${id}`);
+    }
+    async saveCourse(course) {
+        return this.httpService.post(Endpoints.Courses.Courses, course);
+    }
+    async deleteCourse(id) {
+        return this.httpService.delete(`${Endpoints.Courses.Courses}/${id}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CourseListComponent extends PaginationBase {
+    constructor() {
+        super(...arguments);
+        // Services
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.sourceService = inject(CourseService);
+        this.cdr = inject(ChangeDetectorRef);
+        // Inputs
+        this.viewType = 'card';
+        this.onlyView = input(true);
+        this.onSelect = output();
+        // States
+        this.courses = signal([]);
+        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 };
+        const response = await this.sourceService.getFilteredCourses(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();
+        }
+        switch (action) {
+            case 'view':
+                this.router.navigate(['./details', item.id], { relativeTo: this.route });
+                break;
+            case 'delete':
+                const areYouSure = confirm('¿Estás seguro de querer eliminar este origen?');
+                if (areYouSure) {
+                    const id = item.id || item._id;
+                    await this.sourceService.deleteCourse(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', item.id], { relativeTo: this.route });
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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      </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      [first]=\"paginatorFirst\"\n      [rows]=\"paginatorRows\"\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", "autofocus", "fluid", "buttonProps"], 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.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: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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      </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      [first]=\"paginatorFirst\"\n      [rows]=\"paginatorRows\"\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 CourseFormComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.fb = inject(FormBuilder);
+        this.router = inject(Router);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
+        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 } },
+        ];
+        this.courseForm = this.fb.group({
+            name: ['', Validators.required],
+            description: [''],
+            image: [{}],
+        });
+        this.course = null;
+        this.courseId = this.route.snapshot.params['id'];
+    }
+    async ngOnInit() {
+        if (this.courseId) {
+            this.course = await this.courseService.getCourse(this.courseId);
+            if (this.course) {
+                this.courseForm.patchValue(this.course);
+            }
+        }
+    }
+    async save() {
+        if (this.courseForm.valid) {
+            const course = { ...this.course, ...this.courseForm.value };
+            const result = await this.courseService.saveCourse(course);
+            if (!this.courseId) {
+                this.router.navigate([result.id], { relativeTo: this.route });
+            }
+            this.toastService.success({ title: 'Origen guardado', subtitle: 'El origen ha sido guardado correctamente' });
+        }
+    }
+    handleImageUpload(event) {
+        // this.genericForm.patchValue({ image: event });
+        alert('Image uploaded');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CourseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"courseId ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"courseForm\">\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]=\"!courseForm.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]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: DropdownModule }, { 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: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: 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: "19.2.4", ngImport: i0, type: CourseFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-source-form', imports: [
+                        ReactiveFormsModule,
+                        CardModule,
+                        TextareaModule,
+                        DropdownModule,
+                        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]=\"courseId ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"courseForm\">\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]=\"!courseForm.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"] }]
+        }] });
+
 /*
  * Public API Surface of lessons
  */
@@ -2454,5 +2773,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, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map