@dataclouder/ngx-lessons 0.0.26

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -0,0 +1,1194 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, InjectionToken, Pipe, EventEmitter, Output, Inject, ViewChildren, ViewChild, ViewContainerRef } 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 * as i4 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i5 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import * as i2 from 'primeng/dynamicdialog';
+import * as i2$1 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i3$1 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 { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent } from '@dataclouder/ngx-core';
+import { PopoverModule } from 'primeng/popover';
+import * as i2$2 from 'primeng/speeddial';
+import { SpeedDialModule } from 'primeng/speeddial';
+import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
+import * as i4$2 from '@ckeditor/ckeditor5-angular';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import * as i8 from 'primeng/splitter';
+import { SplitterModule } from 'primeng/splitter';
+import * as i9 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 { DrawerModule } from 'primeng/drawer';
+import * as i6 from 'primeng/api';
+
+class ComponentBuilder {
+    constructor(formBuilder, 
+    // protected toastrService: ToastService, // protected ref: NbDialogRef<ComponentBuilder>,
+    ref) {
+        this.formBuilder = formBuilder;
+        this.ref = ref;
+        // Sobreescribir si es necesario
+        // public formGroup = this.formBuilder.group<LessonCompSettings>({});
+        this.formGroup = this.formBuilder.group({
+            response: new FormControl(null),
+            responses: new FormControl(null),
+            options: this.formBuilder.array([]),
+            text: new FormControl(null),
+            hint: new FormControl(null),
+            explanation: new FormControl(null),
+        });
+    }
+    // Every component knows its type by comparing agains LessonComponentBuilders
+    get questionType() {
+        const self = this;
+        const name = Object.keys(LessonComponentBuilders).find((componentName) => {
+            const componentClass = LessonComponentBuilders[componentName];
+            if (self instanceof componentClass) {
+                return componentName;
+            }
+        });
+        return name;
+    }
+    getCode() {
+        const data = this.formGroup.value;
+        // Deleting null values
+        Object.keys(data).forEach((key) => {
+            if (data[key] === null) {
+                delete data[key];
+            }
+        });
+        const id = Math.random().toString(36).substring(7);
+        const code = { id: id, component: this.questionType, settings: { ...data } };
+        return `~${JSON.stringify(code)}~`;
+    }
+    showCode() {
+        const code = this.getCode();
+        alert(code);
+    }
+    async copyToClipboard() {
+        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);
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ComponentBuilder, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-component-builder',
+                    template: '<div>no template</div>',
+                }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
+
+class ComponentWithForm {
+    constructor() {
+        // @Input() settings: LessonCompSettings;
+        this.control = new UntypedFormControl();
+    }
+    ngOnInit() {
+        this.control.valueChanges.subscribe(() => {
+            this.status = 'basic';
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ComponentWithForm, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-component-form',
+                    template: '<div>no template</div>',
+                }]
+        }] });
+
+class SelectorComponent extends ComponentWithForm {
+    constructor() {
+        super();
+        this.isFilled = false;
+    }
+    evaluate() {
+        let result;
+        if (this.control.value == null) {
+            result = null;
+        }
+        else {
+            result = this.control.value?.toLowerCase().trim() === this.config.settings.response.toLowerCase().trim();
+        }
+        if (result) {
+            this.status = 'success';
+        }
+        else {
+            this.status = 'danger';
+        }
+        this.isFilled = true;
+        return result;
+    }
+    validate() {
+        if (this.control.invalid) {
+            this.status = 'warning';
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SelectorBuilderComponent extends ComponentBuilder {
+    constructor(formBuilder, 
+    // protected override toastrService: ToastService,
+    ref) {
+        super(formBuilder, null);
+        this.formBuilder = formBuilder;
+        this.ref = ref;
+        this.sampleConfig = {
+            id: '1',
+            component: LessonComponentEnum.Selector,
+            settings: {
+                options: ['fourteen ninety-two', 'fourteen ninety-six', 'fifteen ninety-one'],
+                response: 'fourteen ninety-two',
+                hint: 'Pista para la respuesta',
+                explanation: 'Explicación de la respuesta',
+                responses: 'Opción 1, Opción 2, Opción 3',
+                text: 'Texto de la pregunta',
+            },
+        };
+    }
+    // public formGroup = this.formBuilder.group({
+    //   options: this.formBuilder.array([]),
+    //   response: ['', Validators.required],
+    //   hint: [],
+    //   explanation: [],
+    // });
+    ngOnInit() {
+        this.formGroup.get('response');
+    }
+    //TODO Probablemente estos 3 pueden irse a una clase abstracta
+    pushControlToFormArray(controlName) {
+        this.formGroup.controls.options.push(this.formBuilder.control(''));
+        // (this.formGroup.get(controlName) as UntypedFormArray).push(this.formBuilder.control(''));
+        console.log(this.formGroup.controls.options);
+    }
+    deleteFormArrayByIndex(controlName, index) {
+        this.formGroup.get(controlName).removeAt(index);
+    }
+    get optionsForm() {
+        return this.formGroup.get('options');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
+
+class TextWriterBuiderComponent extends ComponentBuilder {
+    constructor(formBuilder, 
+    // protected override toastrService: ToastService,
+    ref) {
+        super(formBuilder, null);
+        this.formBuilder = formBuilder;
+        this.ref = ref;
+        this.formGroup = this.formBuilder.group({ response: ['', Validators.required], hint: [], explanation: [] });
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TextWriterBuiderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-writer-buider', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule], template: "<div>\r\n  <div>\r\n    <h5>Constructor de formulario con texto</h5>\r\n  </div>\r\n\r\n  <div>\r\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\r\n      <input pInputText type=\"text\" nbInput fullWidth formControlName=\"response\" placeholder=\"Respuesta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"\" nbInput fullWidth formControlName=\"hint\"\r\n        placeholder=\"Escribe una pista para esta pregunta\" />\r\n\r\n      <input pInputText class=\"form-input\" type=\"text\" nbInput fullWidth formControlName=\"explanation\"\r\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\r\n    </form>\r\n  </div>\r\n\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\"\r\n      [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\"\r\n      severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.DynamicDialogRef }] });
+
+class TextWriterComponent extends ComponentWithForm {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.size = this.getSize();
+    }
+    getSize() {
+        return this.config.settings.response.length < 20 ? this.config.settings.response.length : 20;
+    }
+    evaluate() {
+        let result;
+        if (this.control.value == null) {
+            result = null;
+        }
+        else {
+            result = this.control.value.toLowerCase().trim() == this.config.settings.response.toLowerCase().trim();
+        }
+        if (result) {
+            this.status = 'success';
+        }
+        else {
+            this.status = 'danger';
+            this.hint = this.config.settings.explanation;
+        }
+        return result;
+    }
+    validate() {
+        if (this.control.invalid) {
+            this.status = 'warning';
+            this.hint = this.config.settings.hint;
+        }
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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: [{
+                type: Input
+            }] } });
+
+class TranslationSwitcherBuilderComponent extends ComponentBuilder {
+    constructor(formBuilder, 
+    // protected override toastrService: ToastService,
+    ref) {
+        super(formBuilder, null);
+        this.formBuilder = formBuilder;
+        this.ref = ref;
+    }
+    // Este componente reutiliza completamente el form del padre y todos los métodos
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DynamicDialogRef }] });
+
+class TranslationSwitcherComponent {
+    constructor() {
+        this.visibleText = '';
+    }
+    ngOnInit() {
+        this.visibleText = this.config.settings.text;
+        console.log('config', this.config);
+    }
+    switchTranslation() {
+        if (this.visibleText === this.config.settings.text) {
+            this.visibleText = this.config.settings.response;
+        }
+        else {
+            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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+var LessonComponentEnum;
+(function (LessonComponentEnum) {
+    LessonComponentEnum["Selector"] = "selector";
+    LessonComponentEnum["Speaker"] = "speaker";
+    LessonComponentEnum["TextWriter"] = "textWriter";
+    LessonComponentEnum["VerbSummary"] = "verbSummary";
+    LessonComponentEnum["WordSummary"] = "wordSummary";
+    LessonComponentEnum["TranslationSwitcher"] = "translationSwitcher";
+})(LessonComponentEnum || (LessonComponentEnum = {}));
+const LessonComponentBuilders = {
+    [LessonComponentEnum.Selector]: SelectorBuilderComponent,
+    // [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+    [LessonComponentEnum.TextWriter]: TextWriterBuiderComponent,
+    // [LessonComponentEnum.VerbSummary]: VerbSummaryBuilderComponent,
+    // [LessonComponentEnum.WordSummary]: WordSummaryBuilderComponent,
+    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherBuilderComponent,
+};
+const LessonComponents = {
+    [LessonComponentEnum.Selector]: SelectorComponent,
+    // [LessonComponentEnum.Speaker]: SpeakerComponent,
+    [LessonComponentEnum.TextWriter]: TextWriterComponent,
+    // [LessonComponentEnum.VerbSummary]: VerbSummaryComponent,
+    // [LessonComponentEnum.WordSummary]: WordSummaryComponent,
+    [LessonComponentEnum.TranslationSwitcher]: TranslationSwitcherComponent,
+};
+function getLessonComponentClass(type) {
+    return LessonComponents[type];
+}
+// nuevs
+// import { UntypedFormControl } from '@angular/forms';
+// import { LessonComponents } from '../models/lessons.class';
+const LESSONS_TOKEN = new InjectionToken('Lessons Service');
+// Think on someway of getting the toast alerts service
+class LessonsAbstractService {
+}
+// my-service.provider.ts
+function provideLessonsService(serviceImplementation) {
+    return [
+        {
+            provide: LESSONS_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+// export const LessonComponents = {
+//   [LessonComponentEnum.Selector]: 1,
+//   [LessonComponentEnum.Speaker]: 2,
+//   [LessonComponentEnum.TextWriter]: 3,
+//   [LessonComponentEnum.VerbSummary]: 4,
+//   [LessonComponentEnum.WordSummary]: 5,
+//   [LessonComponentEnum.TranslationSwitcher]: 6,
+// }
+const LangCodeDescription = {
+    es: 'Spanish',
+    en: 'English',
+    it: 'Italian',
+    pt: 'Portuguese',
+    fr: 'French',
+};
+const LangCodeDescriptionEs = {
+    es: 'Español',
+    en: 'Inglés',
+    it: 'Italiano',
+    pt: 'Portugués',
+    fr: 'Frances',
+};
+
+class LangDescTranslationPipe {
+    transform(value, lang) {
+        if (lang === 'es') {
+            return LangCodeDescriptionEs[value];
+        }
+        else {
+            return LangCodeDescription[value];
+        }
+    }
+    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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'langDesc',
+                    standalone: true,
+                }]
+        }] });
+class FlagLanguagePipe {
+    transform(lang) {
+        if (lang === 'en') {
+            return '🇺🇸';
+        }
+        else if (lang === 'es') {
+            return '🇲🇽';
+        }
+        else if (lang === 'fr') {
+            return '🇫🇷';
+        }
+        else if (lang === 'it') {
+            return '🇮🇹';
+        }
+        else if (lang === 'pt') {
+            return '🇧🇷';
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FlagLanguagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'flagEmoji',
+                    standalone: true,
+                }]
+        }] });
+
+// NOTE: what to do? IAgent Deponds on ngx-agent-cards but lessons don't
+// import { IAgentCard } from '@dataclouder/ngx-agent-cards';
+const NOTION_SERVICE_TOKEN = new InjectionToken('notion.service');
+class NotionAbstractService {
+}
+function provideNotionService(serviceImplementation) {
+    return [
+        {
+            provide: NOTION_SERVICE_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+var NotionExportType;
+(function (NotionExportType) {
+    NotionExportType["HTML"] = "html";
+    NotionExportType["MARKDOWN"] = "markdown";
+    NotionExportType["PLAIN_TEXT"] = "plain_text";
+    NotionExportType["SIMPLE_BLOCKS"] = "simple_blocks";
+})(NotionExportType || (NotionExportType = {}));
+
+var EventCard;
+(function (EventCard) {
+    EventCard["Edit"] = "edit";
+    EventCard["Remove"] = "remove";
+    EventCard["Take"] = "take";
+    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.coverUrl = 'assets/background/default-background.webp';
+        this.eventType = EventCard;
+        this.items = [
+            {
+                label: 'Editar',
+                icon: 'pi pi-pencil',
+                command: () => {
+                    this.eventCard(EventCard.Edit);
+                },
+            },
+            {
+                label: 'Eliminar',
+                icon: 'pi pi-trash',
+                command: () => {
+                    this.eventCard(EventCard.Remove);
+                },
+            },
+            {
+                label: 'Tomar lección',
+                icon: 'pi pi-play',
+                command: () => {
+                    this.eventCard(EventCard.Take);
+                },
+            },
+        ];
+    }
+    ngOnInit() {
+        if (this.lesson?.media?.images[0]?.url) {
+            this.coverUrl = this.lesson.media.images[0].url;
+        }
+    }
+    eventCard(eventType) {
+        switch (eventType) {
+            case EventCard.Edit:
+                this.edit.emit(this.lesson);
+                break;
+            case EventCard.Remove:
+                this.remove.emit(this.lesson);
+                break;
+            case EventCard.Take:
+                this.take.emit(this.lesson);
+                break;
+            case EventCard.Qr:
+                this.qr.emit(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  <div class=\"blog-card\">\r\n    <div class=\"meta\">\r\n      <div class=\"photo\" [style.backgroundImage]=\"'url(' + coverUrl + ')'\"></div>\r\n      <ul class=\"details\">\r\n        <li class=\"author\">\r\n          <a>{{ lesson.authorEmail }}</a>\r\n        </li>\r\n        <li class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</li>\r\n        <li class=\"tags\">\r\n          <ul>\r\n            <li *ngFor=\"let tag of lesson.tags\">\r\n              <a>{{ tag }}</a>\r\n            </li>\r\n          </ul>\r\n        </li>\r\n      </ul>\r\n    </div>\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</div>\r\n", styles: [".card-container{position:relative}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.blog-card{position:relative;display:flex;flex-direction:row;background:#fff;background:#ffffff1a;border-radius:12px;box-shadow:0 0 20px var(--primary-color);margin:1rem;overflow:hidden;transition:all .3s ease}.blog-card:hover{box-shadow:0 5px 15px #00000080;transform:translateY(-2px)}.blog-card:hover:before{opacity:1;box-shadow:0 0 15px var(--blue-color)}.blog-card .meta{position:relative;flex:1;max-width:300px}.blog-card .meta .photo{position:absolute;inset:0;background-size:cover;background-position:center}.blog-card .meta .photo:before{content:\"\";position:absolute;inset:0;background:#0000004d}.blog-card .meta .details{position:relative;z-index:1;list-style:none;padding:1rem;color:#fff}.blog-card .meta .details li{margin-bottom:.5rem}.blog-card .meta .details li.author a{color:#fff;font-weight:700}.blog-card .meta .details li.date{font-size:.9rem;opacity:.8}.blog-card .meta .details li.tags ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.blog-card .meta .details li.tags ul li a{color:#fff;font-size:.8rem;opacity:.8}.blog-card .description{flex:2;padding:1.5rem;background:#fff}.blog-card .description h1{margin:0 0 1rem;font-size:1.5rem;color:#333}.blog-card .description p{color:#666;line-height:1.5;margin-bottom:1rem}.blog-card .description .card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.blog-card .description .card-footer .status-tags{display:flex;gap:.5rem}.blog-card .description .card-footer .status-tags .level-tag{background:#e0e7ff;color:#4338ca;padding:.3rem .8rem;border-radius:4px;font-size:.9rem}.blog-card .description .card-footer .status-tags .status-tag{padding:.3rem .8rem;border-radius:4px;font-size:.9rem}.blog-card .description .card-footer .status-tags .status-tag.success{background:#dcfce7;color:#166534}.blog-card .description .card-footer .status-tags .status-tag.danger{background:#fee2e2;color:#991b1b}.blog-card .description .card-footer .actions{display:flex;align-items:center;gap:1rem}.blog-card .description .card-footer .actions .admin-actions{display:flex;gap:.5rem}.blog-card .description .card-footer .actions .admin-actions .icon-button{background:none;border:none;padding:.5rem;cursor:pointer;border-radius:4px;transition:background .2s}.blog-card .description .card-footer .actions .admin-actions .icon-button.edit{color:#4338ca}.blog-card .description .card-footer .actions .admin-actions .icon-button.edit:hover{background:#e0e7ff}.blog-card .description .card-footer .actions .admin-actions .icon-button.delete{color:#dc2626}.blog-card .description .card-footer .actions .admin-actions .icon-button.delete:hover{background:#fee2e2}.blog-card .description .card-footer .actions .take-lesson{background:#4338ca;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background .2s}.blog-card .description .card-footer .actions .take-lesson:hover{background:#3730a3}@media (max-width: 768px){.blog-card{flex-direction:column}.blog-card .meta{max-width:100%;min-height:200px}}span[class^=p-]{position:absolute;top:10px;right:10px;cursor:pointer;z-index:30}.blog-card.glow-effect:before{content:\"\";position:absolute;inset:-5px;border-radius:12px;background:#ffffff1a;z-index:-2;transition:all .3s ease;opacity:.5;box-shadow:0 0 45px #007bffb0}.blog-card.glow-effect:hover:before{opacity:1;box-shadow:0 0 60px #007bffcc}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcLessonCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule], 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  <div class=\"blog-card\">\r\n    <div class=\"meta\">\r\n      <div class=\"photo\" [style.backgroundImage]=\"'url(' + coverUrl + ')'\"></div>\r\n      <ul class=\"details\">\r\n        <li class=\"author\">\r\n          <a>{{ lesson.authorEmail }}</a>\r\n        </li>\r\n        <li class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</li>\r\n        <li class=\"tags\">\r\n          <ul>\r\n            <li *ngFor=\"let tag of lesson.tags\">\r\n              <a>{{ tag }}</a>\r\n            </li>\r\n          </ul>\r\n        </li>\r\n      </ul>\r\n    </div>\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</div>\r\n", styles: [".card-container{position:relative}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.blog-card{position:relative;display:flex;flex-direction:row;background:#fff;background:#ffffff1a;border-radius:12px;box-shadow:0 0 20px var(--primary-color);margin:1rem;overflow:hidden;transition:all .3s ease}.blog-card:hover{box-shadow:0 5px 15px #00000080;transform:translateY(-2px)}.blog-card:hover:before{opacity:1;box-shadow:0 0 15px var(--blue-color)}.blog-card .meta{position:relative;flex:1;max-width:300px}.blog-card .meta .photo{position:absolute;inset:0;background-size:cover;background-position:center}.blog-card .meta .photo:before{content:\"\";position:absolute;inset:0;background:#0000004d}.blog-card .meta .details{position:relative;z-index:1;list-style:none;padding:1rem;color:#fff}.blog-card .meta .details li{margin-bottom:.5rem}.blog-card .meta .details li.author a{color:#fff;font-weight:700}.blog-card .meta .details li.date{font-size:.9rem;opacity:.8}.blog-card .meta .details li.tags ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.blog-card .meta .details li.tags ul li a{color:#fff;font-size:.8rem;opacity:.8}.blog-card .description{flex:2;padding:1.5rem;background:#fff}.blog-card .description h1{margin:0 0 1rem;font-size:1.5rem;color:#333}.blog-card .description p{color:#666;line-height:1.5;margin-bottom:1rem}.blog-card .description .card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.blog-card .description .card-footer .status-tags{display:flex;gap:.5rem}.blog-card .description .card-footer .status-tags .level-tag{background:#e0e7ff;color:#4338ca;padding:.3rem .8rem;border-radius:4px;font-size:.9rem}.blog-card .description .card-footer .status-tags .status-tag{padding:.3rem .8rem;border-radius:4px;font-size:.9rem}.blog-card .description .card-footer .status-tags .status-tag.success{background:#dcfce7;color:#166534}.blog-card .description .card-footer .status-tags .status-tag.danger{background:#fee2e2;color:#991b1b}.blog-card .description .card-footer .actions{display:flex;align-items:center;gap:1rem}.blog-card .description .card-footer .actions .admin-actions{display:flex;gap:.5rem}.blog-card .description .card-footer .actions .admin-actions .icon-button{background:none;border:none;padding:.5rem;cursor:pointer;border-radius:4px;transition:background .2s}.blog-card .description .card-footer .actions .admin-actions .icon-button.edit{color:#4338ca}.blog-card .description .card-footer .actions .admin-actions .icon-button.edit:hover{background:#e0e7ff}.blog-card .description .card-footer .actions .admin-actions .icon-button.delete{color:#dc2626}.blog-card .description .card-footer .actions .admin-actions .icon-button.delete:hover{background:#fee2e2}.blog-card .description .card-footer .actions .take-lesson{background:#4338ca;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background .2s}.blog-card .description .card-footer .actions .take-lesson:hover{background:#3730a3}@media (max-width: 768px){.blog-card{flex-direction:column}.blog-card .meta{max-width:100%;min-height:200px}}span[class^=p-]{position:absolute;top:10px;right:10px;cursor:pointer;z-index:30}.blog-card.glow-effect:before{content:\"\";position:absolute;inset:-5px;border-radius:12px;background:#ffffff1a;z-index:-2;transition:all .3s ease;opacity:.5;box-shadow:0 0 45px #007bffb0}.blog-card.glow-effect:hover:before{opacity:1;box-shadow:0 0 60px #007bffcc}\n"] }]
+        }], propDecorators: { lesson: [{
+                type: Input
+            }], isAdmin: [{
+                type: Input
+            }], take: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], qr: [{
+                type: Output
+            }] } });
+
+const returnProperties = { id: 1, title: 1, assets: 1 };
+class DCLessonListComponent extends PaginationBase {
+    constructor(cdr, router, route, lessonsService, toastrService) {
+        super(route, router);
+        this.cdr = cdr;
+        this.router = router;
+        this.route = route;
+        this.lessonsService = lessonsService;
+        this.toastrService = toastrService;
+        this.isAdmin = false;
+        this.customFilters = [];
+        this.onTakeLesson = new EventEmitter();
+        this.onEditLesson = new EventEmitter();
+        this.onRemoveLesson = new EventEmitter();
+        this.qr = new EventEmitter();
+        this.onNewLesson = new EventEmitter();
+        this.cardComponent = null;
+        this.cardEventSubs = [];
+        this.lessons = [];
+        this.isLoadingLessons = false;
+    }
+    ngOnInit() {
+        this.filterConfig.returnProps = returnProperties;
+        this.cardComponent = this.customCardComponent || DcLessonCardComponent;
+        this.getPaginatedLessons(this.filterConfig);
+    }
+    subscribeDinamicInstantToEvents() {
+        this.clearcardEventSubs();
+        this.subscribeToCardEvents();
+    }
+    subscribeToCardEvents() {
+        this.outlets.forEach((outlet) => {
+            const instance = outlet.componentInstance;
+            this.cardEventSubs.push(instance.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);
+            }));
+        });
+    }
+    clearcardEventSubs() {
+        this.cardEventSubs.forEach((sub) => sub.unsubscribe());
+        this.cardEventSubs = [];
+    }
+    ngOnDestroy() {
+        this.clearcardEventSubs();
+    }
+    async getPaginatedLessons(paginator) {
+        try {
+            this.lessons = null;
+            this.isLoadingLessons = true;
+            this.cdr.detectChanges();
+            const lessons = await this.lessonsService.getLessons(paginator);
+            this.lessons = lessons['rows'] || lessons;
+            this.totalRecords = lessons['count'] || this.lessons.length;
+            console.log('lessons', lessons);
+            setTimeout(() => {
+                this.subscribeDinamicInstantToEvents();
+            });
+        }
+        finally {
+            this.isLoadingLessons = false;
+            this.cdr.detectChanges();
+        }
+    }
+    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) {
+            this.lessonsService.deleteLesson(lesson._id);
+            this.lessons = this.lessons.filter((l) => l._id !== lesson._id);
+            this.cdr.detectChanges();
+            this.toastrService.success({ title: 'Adios a la lección', subtitle: 'La lección ha sido eliminada correctamente' });
+        }
+    }
+    newLesson() {
+        this.onNewLesson.emit();
+    }
+    filterChanged(filters) {
+        console.log('filterChanged in dc-lesson-list', filters);
+        this.filterConfig = filters;
+        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" }, 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<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<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"], outputs: ["onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$1.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [CommonModule, RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\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<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: [{
+                    type: Inject,
+                    args: [LESSONS_TOKEN]
+                }] }, { type: i5$1.ToastAlertsAbstractService, decorators: [{
+                    type: Inject,
+                    args: [TOAST_ALERTS_TOKEN]
+                }] }], propDecorators: { isAdmin: [{
+                type: Input
+            }], customCardComponent: [{
+                type: Input
+            }], customFilters: [{
+                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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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"] }]
+        }] });
+
+// TODO: i need strategy to create prompt dinamically dpending on user language and level.
+const DefaultLessonAgentCard = {
+    conversationSettings: {
+        conversationType: ConversationType.General,
+        textEngine: TextEngines.SimpleText,
+        autoStart: true,
+    },
+    characterCard: {
+        data: {
+            name: 'Lesson Master',
+            description: 'You are an AI developed by Polilan Company, you are a lesson master, you are going to help the user to learn english',
+            tags: ['lesson', 'master', 'ai'],
+            post_history_instructions: 'Your reply should be always short, 1 or 2 paragraphs at most, and to the point, and you should ask friendly questions all the time',
+        },
+    },
+    model: { provider: 'google' },
+};
+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>`;
+        this.components = {};
+        this.mainForm = new UntypedFormGroup({});
+        this.chatVisible = false;
+    }
+    ngOnInit() {
+        this.initLesson();
+    }
+    async initLesson() {
+        await this.getLessonIfId();
+        this.renderLesson();
+    }
+    async getLessonIfId() {
+        if (this.lesson) {
+            return;
+        }
+        if (!this.lessonId) {
+            return;
+        }
+        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?
+        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 componentName = `dynamicComp${count}`;
+            count++;
+            const componentRef = this.createComponentReferenceWithJson(jsonCoded);
+            if (!componentRef) {
+                return null;
+            }
+            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]);
+            }
+            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) {
+        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;
+        }
+        const componentRef = this.viewContainerRef.createComponent(LessonClass);
+        componentRef.instance.config = componentConfig || lessonCodedConfig;
+        return componentRef;
+    }
+    async evaluateForms() {
+        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' });
+            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.
+                try {
+                    const result = instance.evaluate();
+                    if (result) {
+                        rates.correct++;
+                    }
+                    else {
+                        rates.incorrect++;
+                    }
+                }
+                catch (err) {
+                    console.error('Validation method for instance is failing', instance);
+                }
+            }
+        }
+        if (this.test) {
+            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);
+        if (status === 'passed') {
+            this.toastrService.success({ subtitle: 'Aprobaste, se guardó tu calificación', title: 'Muy bien' });
+        }
+        else {
+            this.toastrService.warn({ subtitle: 'Revisa tus respuestas', title: 'Algunas preguntas no son correctas' });
+        }
+    }
+    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}`;
+        }
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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: [{
+                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;
+    }
+    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'),
+            },
+        ];
+    }
+    async getLessonIfId() {
+        if (!this.lessonId) {
+            this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
+            return;
+        }
+        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' });
+        }
+        this.togleRender();
+        this.updateCover();
+    }
+    updateCover() {
+        const cover = this.lesson.media?.images?.find((img) => img.type === 'cover');
+        if (cover) {
+            this.cover = `${GradientCss}, url('${cover.url}')`;
+        }
+        else {
+            this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
+        }
+        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);
+        }
+        tag.input.nativeElement.value = '';
+    }
+    async saveLesson(event = null) {
+        if (event) {
+            event.preventDefault();
+        }
+        // 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 });
+        }
+        else {
+            this.toastService.info({ title: 'Se guadarón los cambios en la lección', subtitle: 'Guardado' });
+            this.lesson = lesson;
+            this.validateAudios();
+        }
+        this.togleRender();
+        return lesson;
+    }
+    async validateAudios() {
+        if (!this.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;
+        //     }
+        //   }
+        // });
+    }
+    togleRender(_event = null) {
+        this.isRendered = false;
+        setTimeout(() => {
+            this.isRendered = true;
+            this.cdr.detectChanges();
+        }, 400);
+        this.cdr.detectChanges();
+    }
+    openComponentBuilder(type) {
+        return this.dialogService.open(LessonComponentBuilders[type], { width: '550px', header: 'Agregar componente', closable: true }).onClose.pipe();
+    }
+    uploadCover(imageUploaded) {
+        const image = { type: 'cover', ...imageUploaded };
+        if (!this.lesson.media) {
+            // puede que no exista media
+            this.lesson.media = {};
+            this.lesson.media.images = [image];
+        }
+        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);
+        }
+        this.updateCover();
+        this.saveLesson();
+    }
+    openCropper() {
+        this.isCropperVisible = true;
+    }
+    async generateByAI() {
+        this.isLoadingLesson = true;
+        try {
+            await this.saveLesson();
+            await this.lessonService.postGenerateByAI(this.lesson.id);
+            await this.getLessonIfId();
+        }
+        finally {
+            this.isLoadingLesson = false;
+        }
+    }
+    onImageSelected(event) {
+        console.log(event);
+    }
+    async onImageUploaded(event) {
+        this.uploadCover(event);
+        this.cdr.detectChanges();
+    }
+    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;
+            }
+            notionPageId = this.lesson.extras?.notionPageId;
+        }
+        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',
+            });
+        }
+        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' });
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-editor', standalone: true, imports: [
+                        FormsModule,
+                        CKEditorModule,
+                        CropperComponentModal,
+                        ButtonModule,
+                        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: [{
+                type: ViewChild,
+                args: ['target', { read: ViewContainerRef }]
+            }], dhtml: [{
+                type: ViewChild,
+                args: ['dhtml', { static: true }]
+            }] } });
+
+// This is the base class for all the components that are going to be used in the lessons.
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LessonDynamicComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-lesson-component',
+                    template: '<div>no template</div>',
+                    standalone: true,
+                }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of lessons
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComponentBuilder, ComponentWithForm, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLessonComponentClass, provideLessonsService, provideNotionService };
+//# sourceMappingURL=dataclouder-ngx-lessons.mjs.map