@dataclouder/ngx-lessons 0.0.29 → 0.0.31

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,47 +1,49 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ChangeDetectionStrategy, InjectionToken, Pipe, EventEmitter, Output, Inject, ViewChildren, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, signal, InjectionToken, Pipe, EventEmitter, Output, ViewChildren, Inject, inject, Injectable, input, Renderer2, ViewContainerRef, computed, effect, ViewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule, Validators, UntypedFormGroup } from '@angular/forms';
-import * as i2$3 from '@angular/common';
-import { NgFor, NgIf, CommonModule, DatePipe, NgComponentOutlet, KeyValuePipe } from '@angular/common';
+import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule, Validators, FormGroup } from '@angular/forms';
 import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i3 from 'primeng/button';
+import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i5 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
+import { nanoid } from 'nanoid';
 import * as i2 from 'primeng/dynamicdialog';
-import * as i2$1 from 'primeng/dropdown';
+import { DialogService } from 'primeng/dynamicdialog';
+import * as i2$1 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i3$2 from 'primeng/paginator';
+import { NgxTtsComponent } from '@dataclouder/ngx-tts';
+import * as i2$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i1$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i5$1 from '@dataclouder/ngx-core';
+import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, JsonPipe } from '@angular/common';
+import * as i1$2 from '@angular/router';
+import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+import * as i4$1 from '@dataclouder/ngx-core';
 import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import { PopoverModule } from 'primeng/popover';
 import * as i2$2 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i3$1 from 'primeng/card';
+import * as i3 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 i4$2 from '@ckeditor/ckeditor5-angular';
+import * as i3$1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i8 from 'primeng/splitter';
+import * as i5$1 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i9 from 'primeng/tooltip';
+import * as i2$5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { AspectType, ResolutionType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import * as i2$4 from '@dataclouder/ngx-agent-cards';
-import { ConversationType, TextEngines, CONVERSATION_AI_TOKEN, DCChatComponent } from '@dataclouder/ngx-agent-cards';
-import * as i4$1 from 'primeng/drawer';
+import { ResolutionType, AspectType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
+import { TextEngines, ConversationType, DCChatComponent } from '@dataclouder/ngx-agent-cards';
+import * as i2$4 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
-import * as i6 from 'primeng/api';
+import * as i2$6 from 'primeng/api';
 
 class ComponentBuilder {
-    constructor(formBuilder, 
-    // protected toastrService: ToastService, // protected ref: NbDialogRef<ComponentBuilder>,
-    ref) {
+    constructor(formBuilder, ref) {
         this.formBuilder = formBuilder;
         this.ref = ref;
         // Sobreescribir si es necesario
@@ -74,25 +76,30 @@ class ComponentBuilder {
                 delete data[key];
             }
         });
-        const id = Math.random().toString(36).substring(7);
-        const code = { id: id, component: this.questionType, settings: { ...data } };
-        return `~${JSON.stringify(code)}~`;
+        const code = { component: this.questionType, settings: { ...data } };
+        return code;
     }
     showCode() {
         const code = this.getCode();
-        alert(code);
+        const stringCode = `~${JSON.stringify(code)}~`;
+        alert(stringCode);
     }
-    async copyToClipboard() {
+    getComponentData() {
         const code = this.getCode();
-        await navigator.clipboard.writeText(code);
-        // this.toastrService.info('Control + V para pegar', 'Se copió al portapapeles');
-        // this.ref.close();
-        this.ref.close(code);
+        const id = nanoid().replace(/-/g, '_');
+        code.id = id;
+        return { str: `~${JSON.stringify(code)}~`, obj: code };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", 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.1.1", type: ComponentBuilder, isStandalone: true, selector: "app-component-builder", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    // TODO: for now copyToClipboard is the that that closes modal and return data.
+    async copyToClipboard() {
+        const data = this.getComponentData();
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ComponentBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentBuilder, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-component-builder',
@@ -113,10 +120,10 @@ class ComponentWithForm {
     validate() {
         // TODO: generic method to evaluate
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ComponentWithForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: ComponentWithForm, isStandalone: true, selector: "app-component-form", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentWithForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ComponentWithForm, isStandalone: true, selector: "app-component-form", ngImport: i0, template: '<div>no template</div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ComponentWithForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ComponentWithForm, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-component-form',
@@ -152,12 +159,12 @@ class SelectorComponent extends ComponentWithForm {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: SelectorComponent, isStandalone: true, selector: "app-selector", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<p-dropdown [class]=\"status\" placeholder=\"Selecciona\" [options]=\"config.settings.options\" [formControl]=\"control\"\r\n  [showClear]=\"true\"></p-dropdown>", 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: DropdownModule }, { kind: "component", type: i2$1.Dropdown, selector: "p-dropdown", 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", "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"] }] }); }
+    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.1.1", ngImport: i0, type: SelectorComponent, decorators: [{
+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, DropdownModule], template: "<p-dropdown [class]=\"status\" placeholder=\"Selecciona\" [options]=\"config.settings.options\" [formControl]=\"control\"\r\n  [showClear]=\"true\"></p-dropdown>", styles: ["::ng-deep .comp-selector button{min-width:80px}.warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"] }]
+            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
             }] } });
@@ -203,12 +210,12 @@ class SelectorBuilderComponent extends ComponentBuilder {
     get optionsForm() {
         return this.formGroup.get('options');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SelectorBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\r\n  </div>\r\n\r\n  <div>\r\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\r\n    <app-selector [config]=\"sampleConfig\"></app-selector>\r\n  </div>\r\n\r\n  <hr />\r\n\r\n  <div>\r\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\r\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\r\n      <br />\r\n\r\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\r\n\r\n      <br />\r\n      <input\r\n        class=\"form-input\"\r\n        type=\"text\"\r\n        pInputText\r\n        fullWidth\r\n        formControlName=\"explanation\"\r\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\r\n\r\n      <hr />\r\n      <h6>Opciones</h6>\r\n\r\n      <div class=\"form-group\" formArrayName=\"options\">\r\n        <div\r\n          style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\r\n          *ngFor=\"let item of optionsForm.controls; let i = index\">\r\n          <div>\r\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\r\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\r\n    </form>\r\n\r\n    <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\r\n\r\n    <div *ngIf=\"isRendered\">\r\n      <!-- TODO:  probably i need to pass some params -->\r\n      <app-selector></app-selector>\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3.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"] }] }); }
+    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.1.1", ngImport: i0, type: SelectorBuilderComponent, decorators: [{
+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, NgFor, NgIf, SelectorComponent, InputTextModule, ButtonModule, MessageModule], template: "<div>\r\n  <div>\r\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\r\n  </div>\r\n\r\n  <div>\r\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\r\n    <app-selector [config]=\"sampleConfig\"></app-selector>\r\n  </div>\r\n\r\n  <hr />\r\n\r\n  <div>\r\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\r\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\r\n      <br />\r\n\r\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\r\n\r\n      <br />\r\n      <input\r\n        class=\"form-input\"\r\n        type=\"text\"\r\n        pInputText\r\n        fullWidth\r\n        formControlName=\"explanation\"\r\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\r\n\r\n      <hr />\r\n      <h6>Opciones</h6>\r\n\r\n      <div class=\"form-group\" formArrayName=\"options\">\r\n        <div\r\n          style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\r\n          *ngFor=\"let item of optionsForm.controls; let i = index\">\r\n          <div>\r\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\r\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\r\n    </form>\r\n\r\n    <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\r\n\r\n    <div *ngIf=\"isRendered\">\r\n      <!-- TODO:  probably i need to pass some params -->\r\n      <app-selector></app-selector>\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
+            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 {
@@ -221,10 +228,10 @@ class TextWriterBuiderComponent extends ComponentBuilder {
         this.formGroup = this.formBuilder.group({ response: ['', Validators.required], hint: [], explanation: [] });
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", 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.1.1", 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: i3.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"] }] }); }
+    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.1.1", ngImport: i0, type: TextWriterBuiderComponent, decorators: [{
+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 }] });
@@ -264,10 +271,10 @@ class TextWriterComponent extends ComponentWithForm {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TextWriterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: TextWriterComponent, isStandalone: true, selector: "app-text-writer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<input [class]=\"this.status\" pInputText [formControl]=\"control\" fieldSize=\"small\" type=\"text\" placeholder=\"Respuesta\"\n    [size]=\"size\" />\n\n<!-- [ngClass]=\"{ 'selected-radio': 'true']}\" -->", styles: [".warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TextWriterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextWriterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-writer', standalone: true, imports: [FormsModule, ReactiveFormsModule, InputTextModule], template: "<input [class]=\"this.status\" pInputText [formControl]=\"control\" fieldSize=\"small\" type=\"text\" placeholder=\"Respuesta\"\n    [size]=\"size\" />\n\n<!-- [ngClass]=\"{ 'selected-radio': 'true']}\" -->", styles: [".warning{border-color:#f0ad4e}.danger{border-color:#e1211b}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -284,12 +291,12 @@ class TranslationSwitcherBuilderComponent extends ComponentBuilder {
     }
     // 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.1.1", 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.1.1", 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: CommonModule }, { 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: i3.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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslationSwitcherBuilderComponent, decorators: [{
+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: [CommonModule, 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"] }]
+            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 {
@@ -308,16 +315,77 @@ class TranslationSwitcherComponent {
             this.visibleText = this.config.settings.text;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslationSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: TranslationSwitcherComponent, isStandalone: true, selector: "app-translation-switcher", inputs: { config: "config" }, ngImport: i0, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TranslationSwitcherComponent, isStandalone: true, selector: "app-translation-switcher", inputs: { config: "config" }, ngImport: i0, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslationSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslationSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-translation-switcher', standalone: true, imports: [CommonModule, ButtonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'app-translation-switcher', standalone: true, imports: [ButtonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<button\n  pButton\n  style=\"padding: 0px 2px\"\n  severity=\"help\"\n  size=\"small\"\n  (click)=\"switchTranslation()\"\n  [label]=\"visibleText\"\n  [text]=\"true\"\n  [rounded]=\"true\"></button>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
 
+class SpeakerBuilderComponent extends ComponentBuilder {
+    constructor() {
+        super(...arguments);
+        this.tts = signal(undefined);
+    }
+    handleTtsGenerated(event) {
+        console.log('TTS generated:', event);
+        this.tts.set(event);
+    }
+    // Update return type and add settings object
+    getCode() {
+        const ttsValue = this.tts();
+        if (!ttsValue) {
+            // Handle the case where tts is undefined, maybe throw an error or return a default config
+            console.error('TTS data is not generated yet.');
+            // Depending on requirements, you might return a default/empty config or throw
+            return { component: this.questionType, inputs: {} }; // Example: return empty inputs
+        }
+        const code = {
+            component: this.questionType,
+            inputs: { tts: ttsValue },
+        };
+        return code;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SpeakerBuilderComponent, isStandalone: true, selector: "app-speaker-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <lib-ngx-tts (ttsGenerated)=\"handleTtsGenerated($event)\"></lib-ngx-tts>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: NgxTtsComponent, selector: "lib-ngx-tts", inputs: ["path"], outputs: ["ttsGenerated"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-speaker-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule, DropdownModule, NgxTtsComponent], template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <lib-ngx-tts (ttsGenerated)=\"handleTtsGenerated($event)\"></lib-ngx-tts>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n" }]
+        }] });
+
+// ❌ can use this until i copy services to this lib
+// import { CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
+class SpeakerComponent {
+    ngOnInit() {
+        // throw new Error('Method not implemented.');
+    }
+    //   voiceOptions = VoiceOptions;
+    //   constructor(private speachService: SpeechService, private audioService: AudioService) {}
+    //   ngOnInit(): void {}
+    speach() {
+        console.log('should speech but will do in next version');
+        //   if (this.config.audio) {
+        //     this.audioService.playAudio(this.config.audio.url);
+        //   } else {
+        //     this.speachService.speach(this.config.settings.text);
+        //   }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts" }, ngImport: i0, template: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeakerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-speaker', standalone: true, imports: [ButtonModule], template: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], tts: [{
+                type: Input
+            }] } });
+
 var LessonComponentEnum;
 (function (LessonComponentEnum) {
     LessonComponentEnum["Selector"] = "selector";
@@ -329,7 +397,7 @@ var LessonComponentEnum;
 })(LessonComponentEnum || (LessonComponentEnum = {}));
 const LessonComponentBuilders = {
     [LessonComponentEnum.Selector]: SelectorBuilderComponent,
-    // [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
     [LessonComponentEnum.TextWriter]: TextWriterBuiderComponent,
     // [LessonComponentEnum.VerbSummary]: VerbSummaryBuilderComponent,
     // [LessonComponentEnum.WordSummary]: WordSummaryBuilderComponent,
@@ -337,7 +405,7 @@ const LessonComponentBuilders = {
 };
 const LessonComponents = {
     [LessonComponentEnum.Selector]: SelectorComponent,
-    // [LessonComponentEnum.Speaker]: SpeakerComponent,
+    [LessonComponentEnum.Speaker]: SpeakerComponent,
     [LessonComponentEnum.TextWriter]: TextWriterComponent,
     // [LessonComponentEnum.VerbSummary]: VerbSummaryComponent,
     // [LessonComponentEnum.WordSummary]: WordSummaryComponent,
@@ -362,6 +430,16 @@ function provideLessonsService(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,
@@ -394,10 +472,10 @@ class LangDescTranslationPipe {
             return LangCodeDescription[value];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LangDescTranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: LangDescTranslationPipe, isStandalone: true, name: "langDesc" }); }
+    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.1.1", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'langDesc',
@@ -425,10 +503,10 @@ class FlagLanguagePipe {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FlagLanguagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: FlagLanguagePipe, isStandalone: true, name: "flagEmoji" }); }
+    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.1.1", ngImport: i0, type: FlagLanguagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FlagLanguagePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'flagEmoji',
@@ -460,18 +538,14 @@ var NotionExportType;
 var EventCard;
 (function (EventCard) {
     EventCard["Edit"] = "edit";
-    EventCard["Remove"] = "remove";
-    EventCard["Take"] = "take";
+    EventCard["Delete"] = "delete";
+    EventCard["Select"] = "select";
     EventCard["Qr"] = "qr";
 })(EventCard || (EventCard = {}));
 class DcLessonCardComponent {
     constructor() {
-        this.isAdmin = true;
-        // TODO: i think i can refactor this to create actions, so only one event emitting actions.
-        this.take = new EventEmitter();
-        this.edit = new EventEmitter();
-        this.remove = new EventEmitter();
-        this.qr = new EventEmitter();
+        this.showOptions = true;
+        this.onAction = new EventEmitter();
         this.coverUrl = 'assets/background/default-background.webp';
         this.eventType = EventCard;
         this.items = [
@@ -486,14 +560,14 @@ class DcLessonCardComponent {
                 label: 'Eliminar',
                 icon: 'pi pi-trash',
                 command: () => {
-                    this.eventCard(EventCard.Remove);
+                    this.eventCard(EventCard.Delete);
                 },
             },
             {
                 label: 'Tomar lección',
                 icon: 'pi pi-play',
                 command: () => {
-                    this.eventCard(EventCard.Take);
+                    this.eventCard(EventCard.Select);
                 },
             },
         ];
@@ -506,36 +580,30 @@ class DcLessonCardComponent {
     eventCard(eventType) {
         switch (eventType) {
             case EventCard.Edit:
-                this.edit.emit(this.lesson);
+                this.onAction.emit({ action: 'edit', item: this.lesson });
                 break;
-            case EventCard.Remove:
-                this.remove.emit(this.lesson);
+            case EventCard.Delete:
+                this.onAction.emit({ action: 'delete', item: this.lesson });
                 break;
-            case EventCard.Take:
-                this.take.emit(this.lesson);
+            case EventCard.Select:
+                this.onAction.emit({ action: 'select', item: this.lesson });
                 break;
             case EventCard.Qr:
-                this.qr.emit(this.lesson);
+                this.onAction.emit({ action: 'qr', item: this.lesson });
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", isAdmin: "isAdmin" }, outputs: { take: "take", edit: "edit", remove: "remove", qr: "qr" }, ngImport: i0, template: "<div class=\"card-container\">\r\n  <p-speeddial\r\n    class=\"dial-button\"\r\n    [model]=\"items\"\r\n    [radius]=\"70\"\r\n    type=\"quarter-circle\"\r\n    direction=\"down-left\"\r\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n  <p-card>\r\n    <div class=\"lesson-card\">\r\n      <div class=\"photo\">\r\n        <img [src]=\"coverUrl\" alt=\"\" />\r\n      </div>\r\n\r\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\r\n\r\n      <div class=\"description\">\r\n        <h1>{{ lesson.title }}</h1>\r\n        <p>{{ lesson.description }}</p>\r\n        <div class=\"card-footer\">\r\n          <div class=\"status-tags\">\r\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\r\n            <span *ngIf=\"lesson.taken?.status == 'passed'\" class=\"status-tag success\">Tomada</span>\r\n            <span *ngIf=\"lesson.taken?.status == 'failed'\" class=\"status-tag danger\">Fallida</span>\r\n          </div>\r\n\r\n          <div class=\"actions\">\r\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Take)\" severity=\"primary\"> </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\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}.description{position:relative;z-index:2;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0006,#000c);height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] }); }
+    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" }, 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\">\n        <div class=\"photo\">\n          <img [src]=\"coverUrl\" alt=\"\" />\n        </div>\n\n        <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n        <div class=\"description\">\n          <h1>{{ lesson.title }}</h1>\n          <p>{{ lesson.description }}</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                <span class=\"status-tag success\">Tomada</span>\n              }\n              @if (lesson.taken?.status == 'failed') {\n                <span class=\"status-tag danger\">Fallida</span>\n              }\n            </div>\n\n            <div class=\"actions\">\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}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcLessonCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule], template: "<div class=\"card-container\">\r\n  <p-speeddial\r\n    class=\"dial-button\"\r\n    [model]=\"items\"\r\n    [radius]=\"70\"\r\n    type=\"quarter-circle\"\r\n    direction=\"down-left\"\r\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n  <p-card>\r\n    <div class=\"lesson-card\">\r\n      <div class=\"photo\">\r\n        <img [src]=\"coverUrl\" alt=\"\" />\r\n      </div>\r\n\r\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\r\n\r\n      <div class=\"description\">\r\n        <h1>{{ lesson.title }}</h1>\r\n        <p>{{ lesson.description }}</p>\r\n        <div class=\"card-footer\">\r\n          <div class=\"status-tags\">\r\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\r\n            <span *ngIf=\"lesson.taken?.status == 'passed'\" class=\"status-tag success\">Tomada</span>\r\n            <span *ngIf=\"lesson.taken?.status == 'failed'\" class=\"status-tag danger\">Fallida</span>\r\n          </div>\r\n\r\n          <div class=\"actions\">\r\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Take)\" severity=\"primary\"> </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\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}.description{position:relative;z-index:2;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0006,#000c);height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\n"] }]
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule], 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\">\n        <div class=\"photo\">\n          <img [src]=\"coverUrl\" alt=\"\" />\n        </div>\n\n        <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n        <div class=\"description\">\n          <h1>{{ lesson.title }}</h1>\n          <p>{{ lesson.description }}</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                <span class=\"status-tag success\">Tomada</span>\n              }\n              @if (lesson.taken?.status == 'failed') {\n                <span class=\"status-tag danger\">Fallida</span>\n              }\n            </div>\n\n            <div class=\"actions\">\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}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\n"] }]
         }], propDecorators: { lesson: [{
                 type: Input
-            }], isAdmin: [{
+            }], showOptions: [{
                 type: Input
-            }], take: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], qr: [{
+            }], onAction: [{
                 type: Output
             }] } });
 
@@ -559,15 +627,10 @@ class DCLessonListComponent extends PaginationBase {
         this.route = route;
         this.lessonsService = lessonsService;
         this.toastrService = toastrService;
-        this.isAdmin = false;
+        this.showOptions = true;
         this.customFilters = [];
-        this.viewType = 'card';
-        this.actions = TableViewActions;
-        this.onTakeLesson = new EventEmitter();
-        this.onEditLesson = new EventEmitter();
-        this.onRemoveLesson = new EventEmitter();
-        this.qr = new EventEmitter();
-        this.onNewLesson = new EventEmitter();
+        this.viewType = 'cards';
+        // readonly actions = input<MenuItem[]>(TableViewActions);
         this.columns = tableViewColumns;
         this.cardComponent = null;
         this.cardEventSubs = [];
@@ -586,14 +649,8 @@ class DCLessonListComponent extends PaginationBase {
     subscribeToCardEvents() {
         this.outlets.forEach((outlet) => {
             const instance = outlet.componentInstance;
-            this.cardEventSubs.push(instance.take.subscribe((lesson) => {
-                this.takeLesson(lesson);
-            }), instance.edit.subscribe((lesson) => {
-                this.editLesson(lesson);
-            }), instance.remove.subscribe((lesson) => {
-                this.removeLesson(lesson);
-            }), instance.qr.subscribe((lesson) => {
-                this.generateQR(lesson);
+            this.cardEventSubs.push(instance.onAction.subscribe((lesson) => {
+                this.doOrEmitAction(lesson);
             }));
         });
     }
@@ -622,23 +679,10 @@ class DCLessonListComponent extends PaginationBase {
             this.cdr.detectChanges();
         }
     }
-    goToLessonDetails(id) {
-        // this.router.navigate([`${RouteNames.App}/${RouteNames.LessonsV2}/details/${id}`]);
-        alert('TODO: goToLessonDetails');
-    }
     search(searchText) {
         this.filterConfig['text'] = searchText;
         this.getPaginatedLessons(this.filterConfig);
     }
-    generateQR(lesson) {
-        this.qr.emit(lesson);
-    }
-    takeLesson(lesson) {
-        this.onTakeLesson.emit(lesson);
-    }
-    editLesson(lesson) {
-        this.onEditLesson.emit(lesson);
-    }
     removeLesson(lesson) {
         const response = confirm('¿Estás seguro de querer eliminar esta lección?');
         if (response) {
@@ -649,30 +693,44 @@ class DCLessonListComponent extends PaginationBase {
         }
     }
     newLesson() {
-        this.onNewLesson.emit();
+        this.onAction.emit({ action: 'new' });
     }
-    filterChanged(filters) {
-        console.log('filterChanged in dc-lesson-list', filters);
-        this.filterConfig = filters;
-        this.filterConfig.returnProps = returnProperties;
-        this.getPaginatedLessons(this.filterConfig);
+    applyFilterBarEvent(filterEvent) {
+        if (filterEvent.action == 'changeView') {
+            this.viewType = this.viewType === 'table' ? 'cards' : 'table';
+            return;
+        }
+        else {
+            console.log('filterChanged in dc-lesson-list', filterEvent);
+            this.filterConfig = filterEvent.item;
+            this.filterConfig.returnProps = returnProperties;
+            this.getPaginatedLessons(this.filterConfig);
+        }
     }
     loadData() {
         return this.getPaginatedLessons(this.filterConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: LESSONS_TOKEN }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { isAdmin: "isAdmin", customCardComponent: "customCardComponent", customFilters: "customFilters", viewType: "viewType", actions: "actions" }, outputs: { onTakeLesson: "onTakeLesson", onEditLesson: "onEditLesson", onRemoveLesson: "onRemoveLesson", qr: "qr", onNewLesson: "onNewLesson" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" [actions]=\"actions\" (onAction)=\"doAction($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      isAdmin: isAdmin\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:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters", "items"], outputs: ["onAction", "onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$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: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
+    doOrEmitAction(actionEvent) {
+        if (actionEvent.action === 'delete') {
+            this.removeLesson(actionEvent.item);
+        }
+        else {
+            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:1rem;flex:1;overflow-y:auto;min-height:0}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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonListComponent, decorators: [{
+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: [CommonModule, RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" [actions]=\"actions\" (onAction)=\"doAction($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      isAdmin: isAdmin\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:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: LessonsAbstractService, decorators: [{
+            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:1rem;flex:1;overflow-y:auto;min-height:0}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: i5$1.ToastAlertsAbstractService, decorators: [{
+                }] }, { type: i4$1.ToastAlertsAbstractService, decorators: [{
                     type: Inject,
                     args: [TOAST_ALERTS_TOKEN]
-                }] }], propDecorators: { isAdmin: [{
+                }] }], propDecorators: { showOptions: [{
                 type: Input
             }], customCardComponent: [{
                 type: Input
@@ -680,34 +738,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                 type: Input
             }], viewType: [{
                 type: Input
-            }], actions: [{
-                type: Input
-            }], onTakeLesson: [{
-                type: Output
-            }], onEditLesson: [{
-                type: Output
-            }], onRemoveLesson: [{
-                type: Output
-            }], qr: [{
-                type: Output
-            }], onNewLesson: [{
-                type: Output
             }], outlets: [{
                 type: ViewChildren,
                 args: ['outlet']
             }] } });
 
 class DCLessonFormComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DCLessonFormComponent, isStandalone: true, selector: "dc-lesson-form", ngImport: i0, template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DCLessonFormComponent, isStandalone: true, selector: "dc-lesson-form", ngImport: i0, template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-form', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"] }]
+            args: [{ selector: 'dc-lesson-form', standalone: true, imports: [ReactiveFormsModule], template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"] }]
         }] });
 
-// TODO: i need strategy to create prompt dinamically dpending on user language and level.
-const DefaultLessonAgentCard = {
+// Re-define or import constants if they are not exported from the component file
+const DEFAULT_LESSON_AGENT_CARD = {
     conversationSettings: {
         conversationType: ConversationType.General,
         textEngine: TextEngines.SimpleText,
@@ -723,105 +769,270 @@ const DefaultLessonAgentCard = {
     },
     model: { provider: 'google' },
 };
+function getDefaultLessonEvaluatorAgentCard(lessonText) {
+    return {
+        expectedResponseType: `interface EvalResult {
+      score: number;                       // Score of the user's response 0 to 3
+      feedback: string;                    // Feedback of the user's understanding of the conversation
+    }`,
+        messages: [],
+        model: { id: 'gpt-4o-mini', provider: 'openai' },
+        sources: [lessonText],
+        task: `User is reading a taking a lesson, now their are having a conversation,
+    you have to evaluate the current conversation, and give a feedback of the user understanding of the lesson,
+    this is the lesson:  ${lessonText}`,
+    };
+}
+class LessonAIService {
+    // TODO: Inject the application-level UserService
+    // private readonly userService = inject(UserService);
+    constructor() {
+        this.lessonService = inject(LESSONS_TOKEN);
+    }
+    /**
+     * Generates the necessary agent cards for a lesson chat session.
+     * @param lesson The lesson data.
+     * @returns An object containing the master agent card and the evaluator agent card.
+     */
+    async generateAgentCards(lesson) {
+        // TODO: Implement the logic moved from DCLessonRendererComponent.startAI here
+        // 1. Get user data using the injected UserService
+        // 2. Extract lesson text using lessonService
+        // 3. Build prompts (scenario, userInformationPrompt)
+        // 4. Configure and return the agent cards
+        alert('AI User data fetching needs refactoring into this service.');
+        // Placeholder for user data - replace with actual service call
+        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 agent cards.');
+            // Handle error appropriately - maybe return null or throw?
+            return null;
+        }
+        const lessonText = this.lessonService.extractTextFromHtml(lesson.textCoded);
+        const scenario = `The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson.
+Ask friendly questions throughout the conversation and help them learn English. Here is the lesson text the user just read:
+${lessonText}
+In your next reply, start by greeting the user, asking something about the lesson, and then continue the conversation.`;
+        const targetLevel = parseInt(user.languageProgress[user.settings.targetLanguage]?.level ?? '1');
+        const langTargetDesc = LangCodeDescription[user.settings.targetLanguage] ?? user.settings.targetLanguage;
+        const langBaseDesc = LangCodeDescription[user.settings.baseLanguage] ?? user.settings.baseLanguage;
+        let userInformationPrompt = `
+User information: user name is ${user.personalData.firstname} ${user.personalData.lastname}, their native language is ${langBaseDesc},
+and right now is learning ${langTargetDesc}, their current level is ${targetLevel} out of 5.`;
+        if (targetLevel <= 2) {
+            userInformationPrompt += `\nUser is a beginner in ${langTargetDesc}, always reply mainly in ${langBaseDesc}, but during the conversation use simple words and phrases in ${langTargetDesc} to help them learn.`;
+        }
+        // Create a deep copy of the default card to avoid modifying the constant
+        const masterAgent = JSON.parse(JSON.stringify(DEFAULT_LESSON_AGENT_CARD));
+        masterAgent.characterCard.data.scenario = scenario;
+        masterAgent.characterCard.data.post_history_instructions += `\n${userInformationPrompt}`;
+        const evaluatorAgent = getDefaultLessonEvaluatorAgentCard(lessonText);
+        return { masterAgent, evaluatorAgent };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Or provide appropriately if it's library-specific
+                }]
+        }], ctorParameters: () => [] });
+
 class DCLessonRendererComponent {
-    constructor(renderer, viewContainerRef, activatedRoute, toastrService, lessonService, agentCardsService, conversationBuilder) {
-        this.renderer = renderer;
-        this.viewContainerRef = viewContainerRef;
-        this.activatedRoute = activatedRoute;
-        this.toastrService = toastrService;
-        this.lessonService = lessonService;
-        this.agentCardsService = agentCardsService;
-        this.conversationBuilder = conversationBuilder;
-        this.lessonId = this.activatedRoute.snapshot.paramMap.get('id');
-        this.dataText = `<h1>Nueva lección </h1> <p> Texto aquí</p>`;
+    constructor() {
+        // --- Signal Inputs ---
+        this.lessonInput = input(); // Input signal for lesson object
+        this.lessonIdInput = input(); // Input signal for lesson ID
+        this.test = input(false);
+        // --- Injected Services (using inject function) ---
+        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
+        // --- State Signals ---
+        this.lesson = signal(undefined); // Internal lesson state signal
+        this.chatVisible = signal(false); // Signal for chat visibility
+        this.agentMasterLesson = signal(undefined); // Signal for agent card
+        this.evaluatorAgentCard = signal(undefined); // Signal for evaluator card
+        // --- Computed Signals ---
+        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url); // Computed signal for imageCover
+        // --- Properties ---
         this.components = {};
-        this.mainForm = new UntypedFormGroup({});
-        this.chatVisible = false;
-    }
-    ngOnInit() {
-        this.initLesson();
-    }
-    async initLesson() {
-        await this.getLessonIfId();
-        this.renderLesson();
+        this.mainForm = new FormGroup({});
+        // Effect to fetch lesson data if ID is provided and lesson object isn't
+        effect(async () => {
+            const lessonInput = this.lessonInput();
+            const lessonId = this.lessonIdInput();
+            if (lessonInput) {
+                this.lesson.set(lessonInput); // Use input lesson directly
+            }
+            else if (lessonId && !this.lesson()) {
+                // Fetch only if ID exists and internal lesson is not set
+                console.log(`Fetching lesson with ID: ${lessonId}`);
+                try {
+                    // Consider adding a loading state signal here
+                    const fetchedLesson = await this.lessonService.getLesson(lessonId);
+                    this.lesson.set(fetchedLesson);
+                    console.log('Fetched lesson:', fetchedLesson);
+                }
+                catch (error) {
+                    console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
+                    this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
+                    this.lesson.set(undefined); // Reset lesson on error
+                }
+                finally {
+                    // Reset loading state signal here
+                }
+            }
+            else if (!lessonInput && !lessonId) {
+                // Handle case where neither input is provided, maybe clear the lesson?
+                this.lesson.set(undefined);
+            }
+        }, { allowSignalWrites: true }); // Allow signal writes inside effect
+        // Effect to render the lesson whenever the lesson signal changes
+        effect(() => {
+            const currentLesson = this.lesson();
+            if (currentLesson) {
+                this._renderLesson(currentLesson);
+            }
+            else {
+                // Clear previous rendering if lesson becomes undefined
+                this._clearLessonRendering();
+            }
+        });
     }
-    async getLessonIfId() {
-        if (this.lesson) {
-            return;
-        }
-        if (!this.lessonId) {
-            return;
+    // --- Rendering Logic ---
+    _clearLessonRendering() {
+        // Destroy previously created dynamic components
+        Object.values(this.components).forEach((compRef) => compRef.destroy());
+        this.components = {};
+        // Clear the form
+        this.mainForm = new FormGroup({});
+        // Clear the HTML content
+        if (this.dynamicLesson?.nativeElement) {
+            this.dynamicLesson.nativeElement.innerHTML = '';
         }
-        this.dataText = `<h1>Cargando </h1> <p>...</p>`;
-        this.lesson = await this.lessonService.getLesson(this.lessonId);
-        console.log('lesson', this.lesson);
-    }
-    renderLesson() {
-        this.imageCover = this.lesson.media?.images?.find((img) => img.type === 'cover')?.url;
-        console.log('imageCover', this.imageCover);
-        // Pasos para renderizar,
-        // 0) Usar la expresión regular para  sustitur los componentes por un span con un id
-        // 1) En el mismo proceso de remplazar se contruyen dinamicamente los componentes
-        // 2) Agregar componentes al DOM en su respectivo spanid
-        // TODO Optimización, es posible agregar el componente al DOM  en el mismo paso en que se crea el span?
+    }
+    _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;
+        // 2) Aggregate form controls from created components
+        this._aggregateFormControls(this.components);
+        // 3) Set the innerHTML of the target element
+        this.dynamicLesson.nativeElement.innerHTML = htmlContent;
+        // 4) Inject the component views into the DOM
+        this._injectComponentsIntoDom(this.components);
+    }
+    _parseAndCreateComponents(lessonData) {
         const r1 = new RegExp('~(.+?)~', 'g');
         let count = 0;
-        this.components = {}; //Si se destruye la lección, se destruyen todos los componentes dinamicis? tODO necesito reiniciar?
-        const lessonHtml = this.lesson.textCoded.replace(r1, (_matching, jsonCoded) => {
+        const createdComponents = {};
+        const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
             const componentName = `dynamicComp${count}`;
             count++;
-            const componentRef = this.createComponentReferenceWithJson(jsonCoded);
+            const componentRef = this._createComponentReferenceWithJson(jsonCoded, lessonData);
             if (!componentRef) {
-                return null;
+                console.error(`Failed to create component for: ${jsonCoded}`);
+                return '<!-- component creation failed -->'; // Placeholder in HTML
             }
-            this.components[componentName] = componentRef;
-            if (componentRef.instance.control) {
-                // Algunos componentes tienen formularios, estos se copian en mainForm como un unico control
-                this.mainForm.addControl(componentName, componentRef.instance.control);
-                this.mainForm.get(componentName).setValidators([Validators.required]);
+            createdComponents[componentName] = componentRef;
+            return `<span id="${componentName}"></span>`; // Return span placeholder
+        });
+        return { htmlContent, components: createdComponents };
+    }
+    _aggregateFormControls(components) {
+        const newFormControls = {};
+        Object.entries(components).forEach(([name, componentRef]) => {
+            // Check if the instance has a control property that is a FormControl
+            if (componentRef.instance?.control instanceof FormControl) {
+                newFormControls[name] = componentRef.instance.control;
+                // Add required validator (consider making this configurable via component config?)
+                newFormControls[name].addValidators(Validators.required);
+            }
+        });
+        this.mainForm = new FormGroup(newFormControls); // Create the typed FormGroup
+    }
+    _injectComponentsIntoDom(components) {
+        Object.entries(components).forEach(([name, componentRef]) => {
+            const elementRef = document.getElementById(name); // Find the placeholder span
+            if (elementRef) {
+                this._addComponentToNode(componentRef, elementRef);
+            }
+            else {
+                console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
             }
-            return `<span id="${componentName}"></span>`;
         });
-        this.dynamicLesson.nativeElement.innerHTML = lessonHtml;
-        for (let compName of Object.keys(this.components)) {
-            // Interpolar componentes dentro del lugar correspondiente
-            const elementRef = document.getElementById(compName);
-            this.addComponentToNode(this.components[compName], elementRef);
-        }
     }
-    addComponentToNode(componentRef, nodeDOM) {
+    _addComponentToNode(componentRef, nodeDOM) {
         this.renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
     }
-    createComponentReferenceWithJson(json) {
-        const lessonCodedConfig = JSON.parse(json);
-        let componentConfig;
-        if (this.lesson.components && lessonCodedConfig.id) {
-            // TODO: retomar, Creo que esta linea es para reutilziar los componentes por id, pero si no tiene,
-            componentConfig = this.lesson.components.find((comp) => comp.id === lessonCodedConfig.id);
-        }
-        const LessonClass = getLessonComponentClass(lessonCodedConfig.component);
-        if (!LessonClass) {
-            console.error('No existe este componente, revisa el codigo insertado' + json);
-            // throw new Error('No existe este com revisa el codigo insertado');
-            return null;
+    _createComponentReferenceWithJson(json, currentLesson) {
+        try {
+            let lessonCodedConfig = JSON.parse(json);
+            debugger;
+            // Attempt to find pre-configured component data in the lesson object by ID
+            if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
+                const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
+                if (foundConfig) {
+                    // Merge configurations: Start with coded, override/add with found lesson config
+                    lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
+                }
+            }
+            const LessonClass = getLessonComponentClass(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
+            }
+            // Create component instance
+            const componentRef = this.viewContainerRef.createComponent(LessonClass);
+            if (lessonCodedConfig.inputs) {
+                for (const key in lessonCodedConfig.inputs) {
+                    if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
+                        componentRef.instance[key] = lessonCodedConfig.inputs[key];
+                    }
+                }
+            }
+            // i think i can improve this to pass only settings not all config, Assign the configuration to the component instance
+            // settings data i defined in form interface, config will be all the component data including id and component type
+            if (lessonCodedConfig.settings) {
+                componentRef.instance.config = lessonCodedConfig;
+            }
+            return componentRef;
+        }
+        catch (error) {
+            console.error(`Error processing component JSON: ${json}`, error);
+            return null; // Return null on JSON parsing or other errors
         }
-        const componentRef = this.viewContainerRef.createComponent(LessonClass);
-        componentRef.instance.config = componentConfig || lessonCodedConfig;
-        return componentRef;
     }
+    // --- Evaluation Logic ---
     async evaluateForms() {
+        this.mainForm.markAllAsTouched(); // Mark all controls for validation feedback
         if (!this.mainForm.valid) {
-            for (let controlName of Object.keys(this.mainForm.controls)) {
-                this.components[controlName].instance.validate();
-            }
-            this.toastrService.warn({ subtitle: 'Por favor completa todos los formularios', title: 'Espera' });
+            // Trigger validation feedback on individual components visually if needed
+            Object.keys(this.mainForm.controls).forEach((controlName) => {
+                if (this.components[controlName]?.instance?.validate) {
+                    this.components[controlName].instance.validate(); // Assuming validate method handles visual feedback
+                }
+            });
+            this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
             return;
         }
         const rates = { correct: 0, incorrect: 0, score: 0 };
-        for (let controlName of Object.keys(this.mainForm.controls)) {
-            const instance = this.components[controlName].instance;
-            if (instance instanceof ComponentWithForm) {
-                // TODO: quizá no necesito validar  instanceof ComponentWithForm ya que se garantiza que todo en mainform tiene un control.
+        // Evaluate each component associated with a form control
+        Object.keys(this.mainForm.controls).forEach((controlName) => {
+            const instance = this.components[controlName]?.instance;
+            // Check if the instance has an evaluate method (duck typing is okay here)
+            if (instance && typeof instance.evaluate === 'function') {
                 try {
                     const result = instance.evaluate();
                     if (result) {
@@ -832,350 +1043,830 @@ class DCLessonRendererComponent {
                     }
                 }
                 catch (err) {
-                    console.error('Validation method for instance is failing', instance);
+                    console.error('Error during evaluation for component:', controlName, instance, err);
+                    rates.incorrect++; // Count errors as incorrect
                 }
             }
+        });
+        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;
         }
-        if (this.test) {
+        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
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            console.error('Cannot save result, lesson data is missing.');
+            this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
             return;
         }
-        rates.score = rates.correct / (rates.correct + rates.incorrect);
-        const status = rates.score > 0.7 ? 'passed' : 'failed';
-        const takenLesson = { lessonId: this.lesson.id, status: status, score: rates.score };
-        // TODO: implementar el servicio para guardar la lección tomada
-        // await this.lessonService.saveTakenLesson(takenLesson);
+        const takenLesson = { lessonId: currentLesson.id, status: status, score: rates.score };
+        console.log('Lesson evaluation result:', takenLesson);
+        // TODO: Re-implement saving the taken lesson status via lessonService
+        // try {
+        //   await this.lessonService.saveTakenLesson(takenLesson);
+        //   if (status === 'passed') {
+        //     this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Se guardó tu progreso.`, title: '¡Muy bien!' });
+        //   } else {
+        //     this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
+        //   }
+        // } catch (error) {
+        //   console.error('Failed to save taken lesson', error);
+        //   this.toastrService.error({ subtitle: 'No se pudo guardar tu progreso.', title: 'Error' });
+        // }
         if (status === 'passed') {
-            this.toastrService.success({ subtitle: 'Aprobaste, se guardó tu calificación', title: 'Muy bien' });
+            this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
         }
         else {
-            this.toastrService.warn({ subtitle: 'Revisa tus respuestas', title: 'Algunas preguntas no son correctas' });
+            this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
         }
     }
+    // --- AI Chat Logic ---
     async startAI() {
-        // TODO: para refactorizar y utilizar las lecciones en otro componente, voy a necesitar pasar esto al servicio abstracto asi cada aplicación lo implementa.
-        const lessonText = this.lessonService.extractTextFromHtml(this.lesson.textCoded);
-        const scenario = `The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson. 
-    Ask friendly questions throughout the conversation and help them learn English. Here is the lesson text the user just read:
-    ${lessonText}
-    In your next reply, start by greeting the user, asking something about the lesson, and then continue the conversation.`;
-        // const user = this.userService.getUserSnapshot();
-        alert('i need to fix this, need to find a way to pass user throug the service not the library, i think i already started something.');
-        const user = {};
-        const targetLevel = parseInt(user.languageProgress[user.settings.targetLanguage].level);
-        const langTargetDesc = LangCodeDescription[user.settings.targetLanguage];
-        const langBaseDesc = LangCodeDescription[user.settings.baseLanguage];
-        let userInformationPrompt = `
-    User information: user name is ${user.personalData.firstname} ${user.personalData.lastname}, their native language is ${langBaseDesc}, 
-    and right now is learning ${langTargetDesc}, their current level is ${user.languageProgress[user.settings.targetLanguage].level} out of 5.`;
-        if (targetLevel <= 2) {
-            userInformationPrompt += `\nUser is a beginner in english, always reply in ${langBaseDesc}, but during the conversation use simple words in ${langTargetDesc}`;
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            console.error('Cannot start AI without a lesson.');
+            this.toastrService.error({ subtitle: 'Lesson data not available.', title: 'Cannot Start Chat' });
+            return;
+        }
+        console.log('Requesting agent cards from LessonAIService...');
+        try {
+            // Call the service to get the agent cards
+            const agentCards = await this.lessonAIService.generateAgentCards(currentLesson);
+            if (agentCards) {
+                this.agentMasterLesson.set(agentCards.masterAgent);
+                this.evaluatorAgentCard.set(agentCards.evaluatorAgent);
+                this.chatVisible.set(true);
+                console.log('Agent cards received and set.');
+            }
+            else {
+                console.error('Failed to generate agent cards (service returned null).');
+                this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
+            }
+        }
+        catch (error) {
+            console.error('Error generating agent cards:', error);
+            this.toastrService.error({ subtitle: 'An error occurred while preparing the AI chat.', title: 'Error' });
         }
-        console.log('lessonText', lessonText);
-        const lessonAgentCard = DefaultLessonAgentCard;
-        lessonAgentCard.characterCard.data.scenario = scenario;
-        lessonAgentCard.characterCard.data.post_history_instructions += `\n${userInformationPrompt}`;
-        this.agentMasterLesson = lessonAgentCard;
-        this.evaluatorAgentCard = this.getDefualtLessonEvaluatorAgentCard(lessonText);
-        this.chatVisible = true;
-    }
-    getDefualtLessonEvaluatorAgentCard(lessonText) {
-        return {
-            expectedResponseType: `interface EvalResult {
-        score: number;                       // Score of the user's response 0 to 3
-        feedback: string;                    // Feedback of the user's understanding of the conversation
-      }`,
-            messages: [],
-            model: { id: 'gpt-4o-mini', provider: 'openai' },
-            sources: [lessonText],
-            task: `User is reading a taking a lesson, now their are having a conversation, 
-      you have to evaluate the current conversation, and give a feedback of the user understanding of the lesson, 
-      this is the lesson:  ${lessonText}`,
-        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$1.ActivatedRoute }, { token: TOAST_ALERTS_TOKEN }, { token: LESSONS_TOKEN }, { token: CONVERSATION_AI_TOKEN }, { token: i2$4.DCConversationPromptBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lesson: "lesson", test: "test" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n  <!-- <div *ngIf=\"lesson\">\r\n     {lesson.title }} \r\n    <br>\r\n    <img [src]=\"imageCover\" alt=\"\">\r\n  </div> -->\r\n\r\n  <div #dynamicLesson class=\"targetclass\">\r\n    <ng-template #target></ng-template>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div style=\"display: flex; gap: 10px\">\r\n  <div *ngIf=\"(mainForm.controls | keyvalue)?.length\">\r\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\r\n  </div>\r\n\r\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\r\n</div>\r\n<br /><br />\r\n\r\n@if(chatVisible) {\r\n<p-drawer header=\"Conversation\" [(visible)]=\"chatVisible\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\r\n  <dc-chat [agentCard]=\"agentMasterLesson\" [evaluatorAgentCard]=\"evaluatorAgentCard\"></dc-chat>\r\n</p-drawer>\r\n}\r\n", styles: [".evaluate{float:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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", "agentCard", "evaluatorAgentCard", "parseDict"], outputs: ["sendMessage"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 } }, 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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [agentCard]=\"agentMasterLesson()\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"></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", "evaluatorAgentCard", "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
+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: [NgIf, KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], template: "<div>\r\n  <!-- <div *ngIf=\"lesson\">\r\n     {lesson.title }} \r\n    <br>\r\n    <img [src]=\"imageCover\" alt=\"\">\r\n  </div> -->\r\n\r\n  <div #dynamicLesson class=\"targetclass\">\r\n    <ng-template #target></ng-template>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div style=\"display: flex; gap: 10px\">\r\n  <div *ngIf=\"(mainForm.controls | keyvalue)?.length\">\r\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\r\n  </div>\r\n\r\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\r\n</div>\r\n<br /><br />\r\n\r\n@if(chatVisible) {\r\n<p-drawer header=\"Conversation\" [(visible)]=\"chatVisible\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\r\n  <dc-chat [agentCard]=\"agentMasterLesson\" [evaluatorAgentCard]=\"evaluatorAgentCard\"></dc-chat>\r\n</p-drawer>\r\n}\r\n", styles: [".evaluate{float:right}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$1.ActivatedRoute }, { type: i5$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: LessonsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [LESSONS_TOKEN]
-                }] }, { type: i2$4.AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i2$4.DCConversationPromptBuilderService }], propDecorators: { lesson: [{
-                type: Input
-            }], test: [{
-                type: Input
-            }], dynamicLesson: [{
+            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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [agentCard]=\"agentMasterLesson()\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dynamicLesson: [{
                 type: ViewChild,
                 args: ['dynamicLesson', { static: true }]
             }] } });
 
-const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 238, 239, 0.31))';
-class DCLessonEditorComponent {
-    constructor(lessonService, toastService, notionService, _activatedRoute, router, cdr, dialogService) {
-        this.lessonService = lessonService;
-        this.toastService = toastService;
-        this.notionService = notionService;
-        this._activatedRoute = _activatedRoute;
-        this.router = router;
-        this.cdr = cdr;
-        this.dialogService = dialogService;
-        this.editor = BalloonEditor;
-        this.coverStorageSettings = {
-            path: 'lessons/covers',
-            fileName: 'cover',
-            cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
-        };
-        this.lessonComponentEnum = LessonComponentEnum;
-        this.lessonId = this._activatedRoute.snapshot.paramMap.get('id');
-        this.lesson = { textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] };
-        this.components = {};
-        this.isRendered = false;
-        this.cover = '';
-        this.isCropperVisible = false;
-        this.isLoadingLesson = false;
+class LessonNotionService {
+    constructor() {
+        this.#notionService = inject(NOTION_SERVICE_TOKEN);
+        this.#lessonService = inject(LESSONS_TOKEN);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        // Keep track of loading state specific to Notion operations
+        this.isLoading = signal(false);
+    }
+    #notionService;
+    #lessonService;
+    #toastService;
+    /**
+     * Extracts the Notion Page ID from a URL.
+     * @param url The Notion page URL.
+     * @returns The extracted page ID or null if invalid.
+     */
+    extractNotionPageId(url) {
+        const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
+        const match = url.match(notionIdRegex);
+        const notionId = match ? match[0] : null;
+        if (!notionId) {
+            this.#toastService.error({
+                title: 'URL inválido',
+                subtitle: 'Por favor ingresa una URL válida de Notion.',
+            });
+            return null;
+        }
+        return notionId;
     }
-    ngOnInit() {
-        this.getLessonIfId();
-        this.items = [
-            {
-                tooltipOptions: { tooltipLabel: 'Reparar con IA: Repara la lección con IA', tooltipPosition: 'bottom' },
-                icon: 'pi pi-magic',
-                command: () => this.generateByAI(),
-            },
-            {
-                tooltipOptions: { tooltipLabel: 'Selector: Agrega un selector con multiples opciones', tooltipPosition: 'bottom' },
-                icon: 'pi pi-caret-down',
-                command: () => this.openComponentBuilder('selector'),
-            },
-            {
-                tooltipOptions: { tooltipLabel: 'Hablar: Para que una palabra o frase sea reproducible', tooltipPosition: 'bottom' },
-                icon: 'pi pi-megaphone',
-                command: () => this.openComponentBuilder('speaker'),
-            },
-            {
-                tooltipOptions: {
-                    tooltipLabel: 'Entrada de texto: Escribe una respuesta en un cuadro de texto',
-                    tooltipPosition: 'bottom',
-                },
-                icon: 'pi pi-pencil',
-                command: () => this.openComponentBuilder('textWriter'),
-            },
-            {
-                tooltipOptions: { tooltipLabel: 'Verbo: Para ver datos de un verbo', tooltipPosition: 'bottom' },
-                icon: 'pi pi-eye',
-                command: () => this.openComponentBuilder('verbSummary'),
-            },
-            {
-                tooltipOptions: { tooltipLabel: 'Palabra: Para ver datos de una palabra', tooltipPosition: 'bottom' },
-                icon: 'pi pi-file-word',
-                command: () => this.openComponentBuilder('wordSummary'),
+    /**
+     * Links an existing lesson with a Notion page ID by updating the lesson's extras.
+     * @param lesson The current lesson data.
+     * @param notionPageId The Notion page ID to link.
+     * @returns The updated lesson data from the backend or undefined on failure.
+     */
+    async linkLessonWithNotion(lesson, notionPageId) {
+        if (!lesson || !lesson.id) {
+            // Ensure lesson exists and has an ID
+            this.#toastService.warn({ title: 'No se puede enlazar', subtitle: 'La lección debe existir y tener un ID.' });
+            return undefined;
+        }
+        const updatedLesson = {
+            ...lesson,
+            extras: {
+                ...(lesson.extras || {}),
+                notionPageId: notionPageId,
             },
-        ];
-    }
-    async getLessonIfId() {
-        if (!this.lessonId) {
-            this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
-            return;
+        };
+        this.isLoading.set(true);
+        try {
+            const savedLesson = await this.#lessonService.postLesson(updatedLesson);
+            this.#toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion.' });
+            return savedLesson;
+        }
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error linking with Notion:', error);
+            this.#toastService.error({ title: 'Error al enlazar', subtitle: 'Ocurrió un error inesperado.' });
+            return undefined;
         }
-        this.lesson = await this.lessonService.getLesson(this.lessonId);
-        console.log('lesson', this.lesson);
-        if (!this.lesson) {
-            this.toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quiza el id es incorrecto' });
+        finally {
+            this.isLoading.set(false);
         }
-        this.togleRender();
-        this.updateCover();
     }
-    updateCover() {
-        const cover = this.lesson.media?.images?.find((img) => img.type === 'cover');
-        if (cover) {
-            this.cover = `${GradientCss}, url('${cover.url}')`;
+    /**
+     * Handles the process of importing lesson content from Notion.
+     * It prompts the user for a URL if necessary, extracts the ID, fetches content,
+     * and potentially links the lesson if it's an existing one.
+     * @param currentLesson The current lesson data (can be a new or existing lesson).
+     * @param lessonId The current lesson ID (null if it's a new lesson).
+     * @returns The fetched HTML content from Notion, or null if the process fails.
+     */
+    async importAndLinkLessonFromNotion(currentLesson, lessonId) {
+        if (!currentLesson)
+            return null;
+        let notionPageId = null;
+        if (currentLesson.extras?.notionPageId) {
+            const useExisting = confirm(`Ya tenemos el id ${currentLesson.extras.notionPageId} ¿Quieres usar este id para importar?`);
+            if (useExisting) {
+                notionPageId = currentLesson.extras.notionPageId;
+            }
+            else {
+                const inputUrl = prompt('Ingresa la NUEVA URL de Notion para importar (este ID NO se guardará automáticamente si la lección ya existe)');
+                if (!inputUrl)
+                    return null; // User cancelled
+                notionPageId = this.extractNotionPageId(inputUrl);
+            }
         }
         else {
-            this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
+            const inputUrl = prompt('Ingresa el URL de Notion para importar la lección (se enlazará si la lección ya existe)');
+            if (!inputUrl)
+                return null; // User cancelled
+            notionPageId = this.extractNotionPageId(inputUrl);
+            // Link automatically only if we got a valid Notion ID AND the lesson already exists (has an ID)
+            if (notionPageId && lessonId) {
+                const linkedLesson = await this.linkLessonWithNotion(currentLesson, notionPageId);
+                if (!linkedLesson) {
+                    // Linking failed, maybe stop the import? Or proceed without linking?
+                    // For now, let's stop.
+                    this.#toastService.error({ title: 'Error de Enlace', subtitle: 'No se pudo enlazar con Notion antes de importar.' });
+                    return null;
+                }
+                // If linking succeeded, the lesson object might have changed, but we proceed with the import using the notionPageId.
+            }
         }
-        this.cdr.detectChanges();
-    }
-    onTagRemove(tag) {
-        this.lesson.tags = this.lesson.tags.filter((text) => text !== tag.text);
-    }
-    onTagAdd(tag) {
-        if (tag.value) {
-            this.lesson.tags.push(tag.value);
+        if (!notionPageId) {
+            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'No se proporcionó un ID de Notion válido para importar.' });
+            return null;
+        }
+        this.isLoading.set(true);
+        try {
+            this.#toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
+            const md = await this.#notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
+            console.log('Imported MD/HTML:', md);
+            this.#toastService.success({ title: 'Contenido Importado', subtitle: 'Contenido de Notion obtenido.' });
+            return md.content; // Return the fetched content
+        }
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error importing from Notion:', error);
+            this.#toastService.error({ title: 'Error de importación', subtitle: 'Ocurrió un error inesperado.' });
+            return null; // Return null on failure
+        }
+        finally {
+            this.isLoading.set(false);
         }
-        tag.input.nativeElement.value = '';
     }
-    async saveLesson(event = null) {
-        if (event) {
-            event.preventDefault();
+    /**
+     * Fetches content from the linked Notion page for AI improvement (placeholder).
+     * @param lesson The current lesson data.
+     */
+    async improveLessonWithNotionAI(lesson) {
+        if (!lesson)
+            return;
+        const notionId = lesson.extras?.notionPageId;
+        if (!notionId) {
+            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'Enlaza la lección con Notion primero.' });
+            return;
         }
-        // TODO: Optimización importante, guardar una lección guarda todos los datos de nuevo,  y no solo los que se modificaron, encontrar una forma de optimizar.
-        const lesson = await this.lessonService.postLesson(this.lesson);
-        if (!this.lessonId) {
-            this.toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
-            this.router.navigate([lesson.id], { relativeTo: this._activatedRoute });
+        this.isLoading.set(true);
+        try {
+            this.#toastService.info({ title: 'Mejorando con IA...', subtitle: 'Obteniendo contenido de Notion.' });
+            const md = await this.#notionService.getPageInSpecificFormat(notionId, NotionExportType.HTML);
+            console.log('Content to improve:', md);
+            // TODO: Add actual AI improvement logic here
+            // e.g., call another service: await this.aiImprovementService.improve(md.content);
+            // Then potentially update the lesson via lessonService or return data
+            this.#toastService.success({ title: 'Contenido Obtenido', subtitle: 'Listo para mejorar con IA (lógica no implementada).' });
         }
-        else {
-            this.toastService.info({ title: 'Se guadarón los cambios en la lección', subtitle: 'Guardado' });
-            this.lesson = lesson;
-            this.validateAudios();
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error improving with AI:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'Ocurrió un error inesperado.' });
+        }
+        finally {
+            this.isLoading.set(false);
         }
-        this.togleRender();
-        return lesson;
     }
-    async validateAudios() {
-        if (!this.lesson.components) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonNotionService, decorators: [{
+            type: Injectable
+        }] });
+
+class LessonUtilsService {
+    #lessonService = inject(LESSONS_TOKEN);
+    #toastService = inject(TOAST_ALERTS_TOKEN);
+    constructor() { }
+    /**
+     * Validates if audios need generation for the given lesson.
+     * Currently logs a placeholder message.
+     * @param lesson The lesson object (or signal) to validate.
+     */
+    validateAudios(lesson) {
+        // Access lesson data directly
+        if (!lesson?.components) {
             return;
         }
-        // al menos un audio sin generar.
-        // agregar más condigciones después
-        // this.lesson.components.forEach((component: SpeakerCompConfiguration) => {
-        //   if (component.component === 'speaker') {
-        //     if (component.settings.voice && !component.audio) {
-        //       // this.toastrService.warn('Se encontraron audios por generar', 'Será rápido');
-        //       // TODO call backend.
-        //       this.lessonService.generateAudiosForLesson(this.lesson.id).then((res) => {
-        //         // this.toastrService.success('Se generaron los audios', 'Listo');
-        //         console.log(res);
-        //       });
-        //       return;
-        //     }
-        //   }
-        // });
+        // Placeholder logic - adapt as needed from original component
+        console.log('Validating audios for lesson:', lesson.id);
+        // Original logic commented out - requires SpeakerCompConfiguration type
+        // const needsGeneration = lesson.components.some((component: any) => // Use 'any' or define SpeakerCompConfiguration
+        //   component.component === 'speaker' && component.settings?.voice && !component.audio
+        // );
+        // if (needsGeneration) {
+        //   this.#toastService.warn({ title: 'Audios por generar', subtitle: 'Se encontraron audios pendientes' });
+        //   // Consider calling generation service here or returning a flag
+        //   // this.#lessonService.generateAudiosForLesson(lesson.id).then(res => { ... });
+        // }
+    }
+    /**
+     * Updates the lesson signal with a new cover image.
+     * @param lessonSignal The signal holding the lesson data.
+     * @param imageUploaded The image data object from the upload event.
+     */
+    uploadCover(lessonSignal, imageUploaded) {
+        // Use 'any' for now, refine if event structure is known
+        const newImage = {
+            type: 'cover',
+            url: imageUploaded?.url,
+            path: imageUploaded?.path,
+            fullPath: imageUploaded?.fullPath,
+            resolutions: imageUploaded?.resolutions ?? [],
+            resolution: imageUploaded?.resolution,
+            bucket: imageUploaded?.bucket,
+            // Add any other required fields from LessonImage or ImgStorageData
+        };
+        lessonSignal.update((currentLesson) => {
+            if (!currentLesson)
+                return undefined;
+            let updatedImages;
+            const existingMedia = currentLesson.media;
+            if (!existingMedia || !existingMedia.images) {
+                updatedImages = [newImage];
+            }
+            else {
+                const filteredImages = existingMedia.images.filter((img) => img.type !== 'cover');
+                const mappedExistingImages = filteredImages.map((img) => ({
+                    type: img.type,
+                    url: img.url,
+                    path: img.path,
+                    fullPath: img.fullPath,
+                    resolutions: img.resolutions ?? [],
+                    resolution: img.resolution,
+                    bucket: img.bucket,
+                }));
+                updatedImages = [...mappedExistingImages, newImage];
+            }
+            return {
+                ...currentLesson,
+                media: {
+                    ...(existingMedia || {}),
+                    images: updatedImages,
+                },
+            };
+        });
+        // Note: Saving the lesson should be triggered from the component after calling this.
+    }
+    /**
+     * Generates lesson content using AI. Assumes the lesson is already saved.
+     * @param lessonId The ID of the lesson to generate content for.
+     * @returns The updated lesson object after AI generation, or null on failure.
+     */
+    async generateByAI(lessonId) {
+        if (!lessonId) {
+            this.#toastService.warn({ title: 'ID Requerido', subtitle: 'Se necesita un ID de lección para usar IA.' });
+            return null;
+        }
+        // No need to save here, component should ensure it's saved before calling.
+        try {
+            await this.#lessonService.postGenerateByAI(lessonId);
+            // Re-fetch the lesson data to get AI updates
+            const updatedLesson = await this.#lessonService.getLesson(lessonId);
+            if (updatedLesson) {
+                this.#toastService.success({ title: 'IA completada', subtitle: 'Lección actualizada con IA.' });
+                return updatedLesson;
+            }
+            else {
+                throw new Error('Failed to fetch lesson after AI generation');
+            }
+        }
+        catch (error) {
+            // Type the error object
+            console.error('Error during AI generation in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la lección con IA.' });
+            return null; // Return null in catch block
+        }
+        // Loading state should be managed by the component calling this service.
+    }
+    /**
+     * Cleans orphaned components from the lesson's dynamicComponents.
+     * An orphaned component is one present in dynamicComponents but its ID is not found in the textCoded HTML.
+     * @param lesson The lesson object to clean.
+     * @returns A new lesson object with orphaned components removed from dynamicComponents.
+     */
+    cleanOrphanedComponents(lesson) {
+        if (!lesson || !lesson.textCoded || !lesson.dynamicComponents) {
+            // Return the original lesson if essential parts are missing
+            return lesson;
+        }
+        const textCoded = lesson.textCoded;
+        const existingComponents = lesson.dynamicComponents;
+        const existingComponentIds = new Set(Object.keys(existingComponents));
+        // Regex to find "id":"<component_id>" within the textCoded string
+        const idRegex = /"id":"([^"]+)"/g;
+        const foundIdsInText = new Set();
+        let match;
+        while ((match = idRegex.exec(textCoded)) !== null) {
+            const potentialId = match[1];
+            // Check if the found ID actually exists in our dynamic components map
+            // This ensures we only count IDs that correspond to known components.
+            if (existingComponentIds.has(potentialId)) {
+                foundIdsInText.add(potentialId);
+            }
+        }
+        const orphanedIds = [];
+        const cleanedDynamicComponents = {};
+        // Iterate through existing component IDs
+        for (const componentId of existingComponentIds) {
+            if (foundIdsInText.has(componentId)) {
+                // Keep the component if its ID was found in the text
+                cleanedDynamicComponents[componentId] = existingComponents[componentId];
+            }
+            else {
+                // Mark as orphaned if not found
+                orphanedIds.push(componentId);
+            }
+        }
+        // Log a warning if any orphaned components were found
+        if (orphanedIds.length > 0) {
+            console.warn(`[LessonUtilsService] Orphaned components detected and will be removed from lesson data (IDs not found in textCoded):`, orphanedIds);
+            this.#toastService.warn({
+                title: 'Componentes Huérfanos Detectados',
+                subtitle: `Se removerán ${orphanedIds.length} componentes no usados del editor.`,
+                // life: 5000, // Removed 'life' property as it might not be supported by ToastData
+            });
+        }
+        // Return a new lesson object with the cleaned components
+        return {
+            ...lesson,
+            dynamicComponents: cleanedDynamicComponents,
+        };
     }
-    togleRender(_event = null) {
-        this.isRendered = false;
-        setTimeout(() => {
-            this.isRendered = true;
-            this.cdr.detectChanges();
-        }, 400);
-        this.cdr.detectChanges();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Provide globally or in a specific module if preferred
+                }]
+        }], ctorParameters: () => [] });
+
+class DCLessonComponentAdderComponent {
+    constructor() {
+        // Services
+        this.#dialogService = inject(DialogService);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.componentAdded = new EventEmitter(); // Changed Output name and type
+        // Expose enum to the template
+        this.lessonComponentEnum = LessonComponentEnum;
     }
+    // Services
+    #dialogService;
+    #toastService;
+    // Moved logic from DCLessonEditorComponent
     openComponentBuilder(type) {
-        return this.dialogService.open(LessonComponentBuilders[type], { width: '550px', header: 'Agregar componente', closable: true }).onClose.pipe();
+        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.#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"] }] }); }
+}
+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" }]
+        }], propDecorators: { componentAdded: [{
+                type: Output
+            }] } });
+
+class DCLessonMetadataEditorComponent {
+    constructor() {
+        // Use signal for input lesson data
+        this.lesson = signal(undefined);
+        this.isLoadingLesson = signal(false);
+        // Outputs for actions
+        this.saveRequest = new EventEmitter();
+        this.importNotionRequest = new EventEmitter();
+        this.improveNotionRequest = new EventEmitter();
+        this.generateAIRequest = new EventEmitter();
+        // Output for property changes
+        this.propertyChange = new EventEmitter();
+    }
+    // Method to emit property changes, called by ngModelChange in the template
+    onPropertyChange(property, value) {
+        this.propertyChange.emit({ property, value });
+    }
+    // Methods to emit action requests
+    emitSaveRequest() {
+        this.saveRequest.emit();
+    }
+    emitImportNotionRequest() {
+        this.importNotionRequest.emit();
+    }
+    emitImproveNotionRequest() {
+        this.improveNotionRequest.emit();
+    }
+    emitGenerateAIRequest() {
+        this.generateAIRequest.emit();
+    }
+    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", generateAIRequest: "generateAIRequest", propertyChange: "propertyChange" }, 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.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.description\"\n        (ngModelChange)=\"onPropertyChange('description', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega una descripci\u00F3n\" />\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.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\"> Generar con IA </p-button>\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.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\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: "pipe", type: // Added TooltipModule
+                FlagLanguagePipe, name: "flagEmoji" }, { kind: "pipe", type: // Added Pipe
+                LangDescTranslationPipe, name: "langDesc" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-metadata-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ButtonModule,
+                        InputTextModule,
+                        TooltipModule, // Added TooltipModule
+                        FlagLanguagePipe, // Added Pipe
+                        LangDescTranslationPipe, // Added Pipe
+                    ], 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.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.description\"\n        (ngModelChange)=\"onPropertyChange('description', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega una descripci\u00F3n\" />\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.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\"> Generar con IA </p-button>\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.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
+        }], propDecorators: { lesson: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isLoadingLesson: [{
+                type: Input,
+                args: [{ required: true }]
+            }], saveRequest: [{
+                type: Output
+            }], importNotionRequest: [{
+                type: Output
+            }], improveNotionRequest: [{
+                type: Output
+            }], generateAIRequest: [{
+                type: Output
+            }], propertyChange: [{
+                type: Output
+            }] } });
+
+const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 238, 239, 0.31))';
+class DCLessonEditorComponent {
+    // Services
+    #activatedRoute; // Re-inject as it's needed for navigation
+    #lessonNotionService;
+    #lessonUtilsService;
+    #router;
+    // Removed #dialogService injection
+    #lessonService;
+    #toastService;
+    constructor() {
+        // Removed Speed Dial Items initialization
+        // Services
+        this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
+        this.#lessonNotionService = inject(LessonNotionService);
+        this.#lessonUtilsService = inject(LessonUtilsService);
+        this.#router = inject(Router);
+        // Removed #dialogService injection
+        this.#lessonService = inject(LESSONS_TOKEN);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        // Signals States
+        this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
+        this.lesson = signal(undefined); // Initialize as undefined
+        this.isCropperVisible = signal(false);
+        this.isLoadingLesson = signal(false);
+        // Removed items signal
+        // Computed Signals
+        this.coverBackground = computed(() => {
+            const currentLesson = this.lesson();
+            const coverImage = currentLesson?.media?.images?.find((img) => img.type === 'cover');
+            const imageUrl = coverImage?.url || '/assets/images/default_banner.webp';
+            return `${GradientCss}, url("${imageUrl}")`;
+        });
+        // Computed signal to get dynamic components as an array for easier iteration in the template
+        this.dynamicComponentsArray = computed(() => {
+            const currentLesson = this.lesson();
+            if (currentLesson?.dynamicComponents) {
+                return Object.values(currentLesson.dynamicComponents);
+            }
+            return []; // Return empty array if no lesson or no dynamic components
+        });
+        // States
+        this.components = {}; // Current Dynamic components
+        this.editor = BalloonEditor;
+        this.lessonComponentEnum = LessonComponentEnum;
+        this.coverStorageSettings = {
+            path: 'lessons/covers',
+            fileName: 'cover',
+            cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
+        };
+        // Effect to fetch lesson data when ID changes
+        effect(async () => {
+            const id = this.lessonId();
+            console.log('Lesson ID Signal:', id);
+            if (id) {
+                this.isLoadingLesson.set(true); // Start loading
+                try {
+                    const fetchedLesson = await this.#lessonService.getLesson(id);
+                    if (fetchedLesson) {
+                        this.lesson.set(fetchedLesson);
+                    }
+                    else {
+                        this.lesson.set(undefined); // Reset if not found
+                        this.#toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quizá el id es incorrecto' });
+                        // Optional: Navigate away or show a specific "not found" state
+                        // this.#router.navigate(['/path/to/lessons']);
+                    }
+                }
+                catch (error) {
+                    console.error('Error fetching lesson:', error);
+                    this.lesson.set(undefined); // Reset on error
+                    this.#toastService.error({ title: 'Error al cargar la lección', subtitle: 'Intenta de nuevo más tarde' });
+                }
+                finally {
+                    this.isLoadingLesson.set(false); // Stop loading
+                }
+            }
+            else {
+                // Handle case for new lesson (ID is null/undefined)
+                this.lesson.set({ textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] }); // Set default new lesson structure
+                this.isLoadingLesson.set(false); // Ensure loading is off
+            }
+        });
+    }
+    /**
+     * Updates a specific property on the lesson signal.
+     * Used for ngModelChange events to simulate two-way binding with signals.
+     * @param property The key of the ILesson property to update.
+     * @param value The new value for the property.
+     */
+    updateLessonProperty(property, value) {
+        this.lesson.update((currentLesson) => {
+            if (!currentLesson)
+                return undefined;
+            return { ...currentLesson, [property]: value };
+        });
+    }
+    onTagRemove(tag) {
+        this.lesson.update((currentLesson) => {
+            if (!currentLesson)
+                return undefined;
+            const updatedTags = currentLesson.tags.filter((text) => text !== tag.text);
+            return { ...currentLesson, tags: updatedTags };
+        });
     }
-    uploadCover(imageUploaded) {
-        const image = { type: 'cover', ...imageUploaded };
-        if (!this.lesson.media) {
-            // puede que no exista media
-            this.lesson.media = {};
-            this.lesson.media.images = [image];
+    onTagAdd(tag) {
+        if (tag.value) {
+            this.lesson.update((currentLesson) => {
+                if (!currentLesson)
+                    return undefined;
+                // Avoid duplicate tags if necessary
+                if (currentLesson.tags.includes(tag.value)) {
+                    return currentLesson;
+                }
+                const updatedTags = [...currentLesson.tags, tag.value];
+                return { ...currentLesson, tags: updatedTags };
+            });
         }
-        else {
-            // solo sustituir el cover si ya existe, como siempre utilizo el mismo nombre, no tengo que eliminar la anterior si actualizo.
-            // const currentCover = this.lesson.media.images.find((img) => img.type === 'cover');
-            this.lesson.media.images = this.lesson.media.images.filter((img) => img.type !== 'cover');
-            this.lesson.media.images.push(image);
+        tag.input.nativeElement.value = ''; // Clear input
+    }
+    async saveLesson(event) {
+        event?.preventDefault();
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            this.#toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
+            return undefined;
+        }
+        // Clean orphaned components before saving
+        const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
+        // TODO: Implement optimization for saving only changed data.
+        // This requires comparing lessonToSave with the initially fetched state.
+        this.isLoadingLesson.set(true); // Indicate saving
+        try {
+            // Use the cleaned lesson object for saving
+            const savedLesson = await this.#lessonService.postLesson(lessonToSave);
+            const currentId = this.lessonId();
+            if (!currentId) {
+                // 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.
+                this.#router.navigate(['../', savedLesson.id], { relativeTo: this.#activatedRoute });
+            }
+            else {
+                // It was an existing lesson, update the signal with the potentially updated data from the backend.
+                this.lesson.set(savedLesson);
+                this.#toastService.info({ title: 'Se guardaron los cambios en la lección', subtitle: 'Guardado' });
+                // Call the service method for validation
+                this.#lessonUtilsService.validateAudios(this.lesson());
+            }
+            return savedLesson;
+        }
+        catch (error) {
+            // Type error
+            console.error('Error saving lesson:', error);
+            this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudieron guardar los cambios' });
+            return undefined;
+        }
+        finally {
+            this.isLoadingLesson.set(false); // Finish saving indication
+        }
+    } // Add missing closing brace for saveLesson
+    // Removed openComponentBuilder method
+    /**
+     * Handles the event emitted when a component is added via the adder component.
+     * @param result The configuration data returned from the component builder dialog. Expected format: { obj: LessonComponentConfiguration }
+     */
+    onComponentAdded(result) {
+        debugger;
+        // Check if result and result.obj.id exist
+        const newComponent = result?.obj;
+        if (newComponent?.id) {
+            console.log('Component builder closed, result received in editor:', newComponent);
+            // // Transform LessonComponentConfiguration to DynamicContentComponent
+            // const dynamicComponentToAdd: DynamicContentComponent = {
+            //   id: componentConfig.id,
+            //   component: componentConfig.component,
+            //   inputs: {
+            //     config: componentConfig, // Pass the original config object as an input named 'config'
+            //     // Add other potential inputs if needed based on component type later
+            //   },
+            // };
+            // Update the lesson signal, adding the transformed component to the dynamicComponents object
+            this.lesson.update((currentLesson) => {
+                if (!currentLesson)
+                    return undefined;
+                // Ensure dynamicComponents object exists, initialize if not
+                const currentDynamicComponents = currentLesson.dynamicComponents || {};
+                // Create the updated dynamicComponents object
+                const updatedDynamicComponents = {
+                    ...currentDynamicComponents,
+                    [newComponent.id]: newComponent, // Use component's id as the key
+                };
+                // Return the updated lesson state
+                return { ...currentLesson, dynamicComponents: updatedDynamicComponents };
+            });
+            // Optionally save the lesson after adding the component
+            // this.saveLesson();
         }
-        this.updateCover();
-        this.saveLesson();
     }
     openCropper() {
-        this.isCropperVisible = true;
+        // Correctly define openCropper
+        this.isCropperVisible.set(true);
     }
+    // isLoadingLesson signal is used directly
     async generateByAI() {
-        this.isLoadingLesson = true;
+        const currentId = this.lessonId();
+        if (!currentId) {
+            this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
+            return;
+        }
+        this.isLoadingLesson.set(true);
         try {
-            await this.saveLesson();
-            await this.lessonService.postGenerateByAI(this.lesson.id);
-            await this.getLessonIfId();
+            // Ensure latest changes are saved before generating
+            const savedLesson = await this.saveLesson();
+            if (!savedLesson) {
+                // Handle save error - toast is shown in saveLesson
+                throw new Error('Failed to save before AI generation');
+            }
+            // Call the service method
+            const updatedLesson = await this.#lessonUtilsService.generateByAI(currentId);
+            if (updatedLesson) {
+                this.lesson.set(updatedLesson); // Update the signal with AI changes from service
+                // Toast success is handled by the service
+            }
+            else {
+                // Toast error is handled by the service
+                throw new Error('AI generation failed or lesson fetch failed after generation.');
+            }
+        }
+        catch (error) {
+            // Type error
+            console.error('Error during AI generation process in component:', error);
+            // Service handles specific AI error toasts, maybe add a general one here if needed
+            // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
         }
         finally {
-            this.isLoadingLesson = false;
+            this.isLoadingLesson.set(false); // Stop loading
         }
     }
-    onImageSelected(event) {
-        console.log(event);
-    }
+    /**
+     * Handles the image upload event, updates the lesson signal via the service, and saves.
+     * @param event The image upload event data.
+     */
     async onImageUploaded(event) {
-        this.uploadCover(event);
-        this.cdr.detectChanges();
-    }
+        // Call the service to update the signal
+        this.#lessonUtilsService.uploadCover(this.lesson, event);
+        // The coverBackground computed signal will update automatically.
+        // Save the lesson after the signal has been updated
+        await this.saveLesson();
+    }
+    /**
+     * Imports lesson content from Notion using the LessonNotionService.
+     */
     async importFromNotion() {
-        let notionPageId;
-        if (this.lesson?.extras?.notionPageId) {
-            const response = confirm(`Ya tenemos el id ${this.lesson.extras?.notionPageId} ¿Quieres usar este id?`);
-            if (!response) {
-                return;
+        // Use the service's loading state or manage locally
+        this.isLoadingLesson.set(true);
+        try {
+            const newContent = await this.#lessonNotionService.importAndLinkLessonFromNotion(this.lesson(), this.lessonId());
+            if (newContent !== null) {
+                // Update the lesson signal's textCoded property
+                this.updateLessonProperty('textCoded', newContent);
+                // Toast success is handled within the service now
             }
-            notionPageId = this.lesson.extras?.notionPageId;
+            // If newContent is null, the service handled errors/toasts
         }
-        else {
-            const response = prompt('Ingresa el url de notion para importar la lección, se guardará este id');
-            if (!response) {
-                return;
-            }
-            notionPageId = this.extractNotionPageId(response);
-            if (!notionPageId)
-                return;
-            this.linkWithNotion(notionPageId);
-        }
-        this.toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
-        const md = await this.notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
-        console.log(md);
-        this.lesson.textCoded = md.content;
-        this.togleRender();
-        this.toastService.success({ title: 'Listo', subtitle: 'La lección se importó correctamente' });
-    }
-    extractNotionPageId(url) {
-        const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
-        const match = url.match(notionIdRegex);
-        const notionId = match ? match[0] : null;
-        if (!notionId) {
-            this.toastService.error({
-                title: 'URL inválido',
-                subtitle: 'Por favor ingresa una URL válida de Notion',
-            });
+        finally {
+            // Ensure loading state is reset regardless of service outcome
+            // If observing service state: this.isLoadingLesson.set(this.#lessonNotionService.isLoading());
+            this.isLoadingLesson.set(false); // Keep local loading for now
         }
-        return notionId;
-    }
-    async linkWithNotion(notionPageId) {
-        const extra = this.lesson.extras || {};
-        extra.notionPageId = notionPageId;
-        await this.lessonService.postLesson({ ...this.lesson, extras: extra });
-        this.toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion' });
     }
+    /**
+     * Calls the LessonNotionService to improve the lesson using AI based on Notion content.
+     */
     async improveNotionWithAI() {
-        const md = await this.notionService.getPageInSpecificFormat(this.lesson.extras.notionPageId, NotionExportType.HTML);
-        console.log(md);
-        // this.lesson.textCoded = md.content;
-        // this.togleRender();
-        // this.toastService.success({ title: 'Listo', subtitle: 'La lección se mejoró con AI' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonEditorComponent, deps: [{ token: LESSONS_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: NOTION_SERVICE_TOKEN }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", 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  <div class=\"header-cover\" [style.background-image]=\"cover\"></div>\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</div>\n\n<br />\n\n<div>\n  <div>\n    <div>\n      <div style=\"display: flex; gap: 10px; padding: 10px\">\n        <p-button label=\"Guardar\" severity=\"primary\" (click)=\"saveLesson()\" />\n\n        <p-button label=\"Previsualizar\" severity=\"secondary\" (click)=\"togleRender()\" />\n        <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"importFromNotion()\" />\n        <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"improveNotionWithAI()\" />\n      </div>\n\n      <div>\n        <input pInputText style=\"width: 100%\" [(ngModel)]=\"lesson.title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n      </div>\n      <div style=\"margin-top: 4px\">\n        <input pInputText style=\"width: 100%\" [(ngModel)]=\"lesson.description\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n      </div>\n\n      <div style=\"display: flex; align-items: center\">\n        <br />\n        <br />\n        <input pInputText style=\"flex: auto\" [(ngModel)]=\"lesson.prompt\" type=\"text\" placeholder=\"Prompt\" />\n        <p-button severity=\"primary\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\"> Generar </p-button>\n      </div>\n\n      <div>\n        <label class=\"checkbox-container\">\n          <input type=\"checkbox\" [(ngModel)]=\"lesson.isPublished\" title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n          <span class=\"checkmark\"></span>\n          Lecci\u00F3n publicada\n        </label>\n        <br />\n\n        <input pInputText [(ngModel)]=\"lesson.level\" type=\"number\" placeholder=\"Level\" />\n      </div>\n\n      <div>\n        {{ lesson.baseLang | flagEmoji }} -> {{ lesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de {{ lesson.baseLang | langDesc : 'es' }} que aprenden\n        {{ lesson.targetLang | langDesc : 'es' }}\n      </div>\n    </div>\n  </div>\n\n  <hr />\n  <span>Componentes: </span>\n  <div style=\"display: flex; gap: 10px\">\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\" pTooltip=\"Agrega un selector con multiples opciones\">\n      Selector\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\" pTooltip=\"Para que una palabra o frase sea reproducible\">\n      Speaker\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\" pTooltip=\"Escribe una respuesta en un cuadro de texto\">\n      Text\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\" pTooltip=\"Muestra la informaci\u00F3n de un verbo\"> Text </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\" pTooltip=\"Muestra la informaci\u00F3n de un verbo\"> Verb </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\" pTooltip=\"Muestra la informaci\u00F3n de una palabra\">\n      Palabra\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\" pTooltip=\"Muestra el texto pero al pica cambia de idioma\">\n      Traducci\u00F3n\n    </p-button>\n  </div>\n\n  <hr />\n\n  <p-splitter [style]=\"{ height: '80vh' }\" styleClass=\"mb-8\">\n    <ng-template pTemplate>\n      <ckeditor\n        (keydown.control.s)=\"saveLesson($event)\"\n        (keydown.control.space)=\"togleRender($event)\"\n        class=\"text-editor\"\n        [editor]=\"editor\"\n        [(ngModel)]=\"lesson.textCoded\">\n      </ckeditor>\n    </ng-template>\n\n    <ng-template pTemplate>\n      @if (isRendered) {\n      <dc-lesson-renderer class=\"text-editor\" [lesson]=\"lesson\" [test]=\"true\"></dc-lesson-renderer>\n      }\n    </ng-template>\n  </p-splitter>\n\n  <div class=\"float-button\">\n    <p-speeddial [model]=\"items\" [radius]=\"120\" type=\"quarter-circle\" direction=\"up-left\" />\n\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</div>\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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: 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: CKEditorModule }, { kind: "component", type: i4$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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i8.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lesson", "test"] }, { kind: "pipe", type: LangDescTranslationPipe, name: "langDesc" }, { kind: "pipe", type: FlagLanguagePipe, name: "flagEmoji" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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"] }] }); }
+        await this.#lessonNotionService.improveLessonWithNotionAI(this.lesson());
+    }
+    showComponentDetails(data) {
+        alert('showComponentDetails' + JSON.stringify(data));
+    }
+    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  <div class=\"header-cover\" [style.background-image]=\"coverBackground()\"></div>\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</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  (generateAIRequest)=\"generateByAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\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' }\" styleClass=\"mb-8\">\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", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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"] }, { 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: 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: 
+                // Removed SpeedDialModule
+                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", "generateAIRequest", "propertyChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-editor', standalone: true, imports: [
-                        FormsModule,
+                        ButtonModule,
                         CKEditorModule,
                         CropperComponentModal,
-                        ButtonModule,
+                        DCLessonRendererComponent,
+                        FormsModule,
                         InputTextModule,
                         SplitterModule,
-                        DCLessonRendererComponent,
-                        LangDescTranslationPipe,
-                        FlagLanguagePipe,
                         TooltipModule,
-                        SpeedDialModule,
-                    ], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <div class=\"header-cover\" [style.background-image]=\"cover\"></div>\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</div>\n\n<br />\n\n<div>\n  <div>\n    <div>\n      <div style=\"display: flex; gap: 10px; padding: 10px\">\n        <p-button label=\"Guardar\" severity=\"primary\" (click)=\"saveLesson()\" />\n\n        <p-button label=\"Previsualizar\" severity=\"secondary\" (click)=\"togleRender()\" />\n        <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"importFromNotion()\" />\n        <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"improveNotionWithAI()\" />\n      </div>\n\n      <div>\n        <input pInputText style=\"width: 100%\" [(ngModel)]=\"lesson.title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n      </div>\n      <div style=\"margin-top: 4px\">\n        <input pInputText style=\"width: 100%\" [(ngModel)]=\"lesson.description\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n      </div>\n\n      <div style=\"display: flex; align-items: center\">\n        <br />\n        <br />\n        <input pInputText style=\"flex: auto\" [(ngModel)]=\"lesson.prompt\" type=\"text\" placeholder=\"Prompt\" />\n        <p-button severity=\"primary\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\"> Generar </p-button>\n      </div>\n\n      <div>\n        <label class=\"checkbox-container\">\n          <input type=\"checkbox\" [(ngModel)]=\"lesson.isPublished\" title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n          <span class=\"checkmark\"></span>\n          Lecci\u00F3n publicada\n        </label>\n        <br />\n\n        <input pInputText [(ngModel)]=\"lesson.level\" type=\"number\" placeholder=\"Level\" />\n      </div>\n\n      <div>\n        {{ lesson.baseLang | flagEmoji }} -> {{ lesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de {{ lesson.baseLang | langDesc : 'es' }} que aprenden\n        {{ lesson.targetLang | langDesc : 'es' }}\n      </div>\n    </div>\n  </div>\n\n  <hr />\n  <span>Componentes: </span>\n  <div style=\"display: flex; gap: 10px\">\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\" pTooltip=\"Agrega un selector con multiples opciones\">\n      Selector\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\" pTooltip=\"Para que una palabra o frase sea reproducible\">\n      Speaker\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\" pTooltip=\"Escribe una respuesta en un cuadro de texto\">\n      Text\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\" pTooltip=\"Muestra la informaci\u00F3n de un verbo\"> Text </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\" pTooltip=\"Muestra la informaci\u00F3n de un verbo\"> Verb </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\" pTooltip=\"Muestra la informaci\u00F3n de una palabra\">\n      Palabra\n    </p-button>\n    <p-button severity=\"info\" (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\" pTooltip=\"Muestra el texto pero al pica cambia de idioma\">\n      Traducci\u00F3n\n    </p-button>\n  </div>\n\n  <hr />\n\n  <p-splitter [style]=\"{ height: '80vh' }\" styleClass=\"mb-8\">\n    <ng-template pTemplate>\n      <ckeditor\n        (keydown.control.s)=\"saveLesson($event)\"\n        (keydown.control.space)=\"togleRender($event)\"\n        class=\"text-editor\"\n        [editor]=\"editor\"\n        [(ngModel)]=\"lesson.textCoded\">\n      </ckeditor>\n    </ng-template>\n\n    <ng-template pTemplate>\n      @if (isRendered) {\n      <dc-lesson-renderer class=\"text-editor\" [lesson]=\"lesson\" [test]=\"true\"></dc-lesson-renderer>\n      }\n    </ng-template>\n  </p-splitter>\n\n  <div class=\"float-button\">\n    <p-speeddial [model]=\"items\" [radius]=\"120\" type=\"quarter-circle\" direction=\"up-left\" />\n\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</div>\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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: () => [{ type: LessonsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [LESSONS_TOKEN]
-                }] }, { type: i5$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: NotionAbstractService, decorators: [{
-                    type: Inject,
-                    args: [NOTION_SERVICE_TOKEN]
-                }] }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: i2.DialogService }], propDecorators: { target: [{
+                        // Removed SpeedDialModule
+                        DCLessonComponentAdderComponent, // Add the component adder here
+                        DCLessonMetadataEditorComponent, // Add the metadata editor here
+                        JsonPipe,
+                    ], providers: [LessonNotionService], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <div class=\"header-cover\" [style.background-image]=\"coverBackground()\"></div>\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</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  (generateAIRequest)=\"generateByAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\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' }\" styleClass=\"mb-8\">\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", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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 }]
             }], dhtml: [{
@@ -1188,10 +1879,10 @@ class LessonDynamicComponent {
     constructor() {
         this.settings = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LessonDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: LessonDynamicComponent, isStandalone: true, selector: "app-lesson-component", inputs: { settings: "settings" }, ngImport: i0, template: '<div>no template</div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LessonDynamicComponent, isStandalone: true, selector: "app-lesson-component", inputs: { settings: "settings" }, ngImport: i0, template: '<div>no template</div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LessonDynamicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonDynamicComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-lesson-component',