npm - @dataclouder/ngx-lessons - Versions diffs - 0.1.12 → 0.1.14 - Mend

@dataclouder/ngx-lessons 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/dataclouder-ngx-lessons.mjs +32 -33
package/fesm2022/dataclouder-ngx-lessons.mjs.map +1 -1
package/index.d.ts +4 -3
package/package.json +1 -1

package/fesm2022/dataclouder-ngx-lessons.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy
 import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, SlicePipe } from '@angular/common';
 import * as i1$4 from '@angular/router';
 import { RouterModule, ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
-import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, EModelQuality, UiStateService, LoadingBarService, FormUtilsService, EntityBaseFormComponent, PromptService, DcManageableFormComponent, DcLearnableFormComponent, HttpCoreService, PaginationBase, LangDescTranslation, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
+import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, EModelQuality, UiStateService, MobileService, LoadingBarService, FormUtilsService, EntityBaseFormComponent, PromptService, DcManageableFormComponent, DcLearnableFormComponent, HttpCoreService, PaginationBase, LangDescTranslation, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, FormControl, FormArray, FormsModule, ReactiveFormsModule, UntypedFormControl, FormGroup, Validators } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
@@ -42,8 +42,6 @@ import * as i2$2 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
 import { DialogModule } from 'primeng/dialog';
-import TurndownService from 'turndown';
-import { marked } from 'marked';
 import * as i5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import * as i6 from 'primeng/divider';
@@ -59,7 +57,6 @@ import { ToastModule } from 'primeng/toast';
 import * as i3$3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { ChipModule } from 'primeng/chip';
-import { FormlyModule } from '@ngx-formly/core';
 // This pipe should not be here in the lessons, refactor when is posible and remove LangCodeDescription
 const LangCodeDescription = {
@@ -634,11 +631,11 @@ class DcLessonCardComponent {
         this.onAction.emit({ action: eventType, item: this.lesson });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
         }], propDecorators: { lesson: [{
                 type: Input
             }], showOptions: [{
@@ -843,11 +840,11 @@ class DCLessonListComponent extends EntityBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customCardComponent: "customCardComponent", customFilters: "customFilters" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customCardComponent: "customCardComponent", customFilters: "customFilters" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, NgComponentOutlet, QuickTableComponent, PaginatorModule], template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"] }]
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, NgComponentOutlet, QuickTableComponent, PaginatorModule], template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<!-- <p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { customCardComponent: [{
                 type: Input
             }], customFilters: [{
@@ -1142,7 +1139,11 @@ class LessonConversationService {
                     ],
                 },
             ],
-            moodStateEnabled: false,
+            moodState: {
+                enabled: false,
+                useAssetStatesOnly: false,
+                detectableStates: [],
+            },
         });
     }
     async startAI(lesson, settings) {
@@ -1247,6 +1248,7 @@ class DCLessonRendererComponent {
         this.uiStateService = inject(UiStateService);
         this.lessonRendererService = inject(LessonRendererService);
         this.lessonConversationService = inject(LessonConversationService);
+        this.mobileService = inject(MobileService);
         // --- State Signals ---
         this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
         // --- Computed Signals ---
@@ -1392,11 +1394,11 @@ class DCLessonRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule, MarkdownComponent], template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
+            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule, MarkdownComponent], template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { wordClicked: [{
                 type: Output
             }] } });
@@ -1562,10 +1564,13 @@ class LessonNotionService {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 class LessonUtilsService {
@@ -1903,11 +1908,11 @@ class DCLessonMetadataEditorComponent {
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.turndownService = new TurndownService(); // Instantiate TurndownService
     }
     // Injected Services
     #lessonUtilsService;
     #toastService;
+    // private turndownService = new TurndownService(); // Instantiate TurndownService
     ngOnInit() {
         // console.log(this.lesson(), this.form);
     }
@@ -1966,11 +1971,11 @@ class DCLessonMetadataEditorComponent {
                 // Replace encoded JSON with actual text before Markdown conversion
                 const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
                 // Convert the processed HTML (with text instead of JSON) to Markdown
-                const markdownText = this.turndownService.turndown(processedHtmlContent);
+                // const markdownText = this.turndownService.turndown(processedHtmlContent);
                 // Use the updated lesson signal value for AI improvement
-                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, markdownText);
+                // const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, markdownText);
                 // Convert and save the improved content
-                await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
+                // await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
             }
         }
         catch (error) {
@@ -2013,7 +2018,7 @@ class DCLessonMetadataEditorComponent {
     async _convertMarkdownToHtmlAndSave(improvedMarkdown) {
         if (improvedMarkdown) {
             // Convert the improved Markdown back to HTML before setting it
-            const improvedHtml = marked(improvedMarkdown);
+            const improvedHtml = improvedMarkdown;
             // Update the signal directly
             // this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
             // Save the AI-generated content
@@ -2519,7 +2524,7 @@ class CourseListComponent extends PaginationBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: LangDescTranslation, name: "langDesc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: LangDescTranslation, name: "langDesc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, decorators: [{
             type: Component,
@@ -2588,11 +2593,11 @@ class CourseDetailComponent {
         this.course.set(course);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-course-detail', imports: [CommonModule, CardModule, PanelModule, ButtonModule, ProgressSpinnerModule, ToastModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService], template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"] }]
+            args: [{ selector: 'app-course-detail', imports: [CommonModule, CardModule, PanelModule, ButtonModule, ProgressSpinnerModule, ToastModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService], template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"] }]
         }] });
 class CourseFormComponent extends EntityBaseFormComponent {
@@ -2615,29 +2620,23 @@ class CourseFormComponent extends EntityBaseFormComponent {
             path: `courses`,
             cropSettings: { aspectRatio: AspectType.Square, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 700 },
         };
-        this.extraFields = [
-            { key: 'title', type: 'input', props: { label: 'Title', placeholder: 'Title', required: false } },
-            { key: 'content', type: 'textarea', props: { label: 'Content', placeholder: 'Content', required: false } },
-        ];
         effect(() => {
             console.log(this.entity());
         });
     }
     ngOnInit() {
-        this.form.patchValue({ baseLang: this.userService.user()?.['baseLang'] });
-        this.form.patchValue({ targetLang: this.userService.user()?.['targetLang'] });
+        const baseLang = this.userService.user()?.['settings']?.['baseLanguage'];
+        const targetLang = this.userService.user()?.['settings']?.['targetLanguage'];
+        this.form.patchValue({ baseLang });
+        this.form.patchValue({ targetLang });
     }
     patchForm(entity) {
         this.form.patchValue(entity);
     }
     async save() {
-        this.toastService.success({ title: 'Course', subtitle: 'Data was saved' });
         const result = await super.save();
         if (result) {
             this.onSave.emit(result);
-            if (this.toastService) {
-                this.toastService.success({ title: 'Course', subtitle: 'Data was saved' });
-            }
         }
         return result;
     }
@@ -2651,6 +2650,7 @@ class CourseFormComponent extends EntityBaseFormComponent {
             this.loadingBarService.showIndeterminate();
             const course = await this.entityCommunicationService.generateLanguageCourse(baseLang, targetLang, this.entity()?.id);
             this.form.patchValue(course);
+            this.entity.set(course);
             if (this.toastService) {
                 this.toastService.success({ title: 'Course Generated', subtitle: 'Course content has been generated successfully.' });
             }
@@ -2658,7 +2658,7 @@ class CourseFormComponent extends EntityBaseFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, decorators: [{
             type: Component,
@@ -2672,7 +2672,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         ChipModule,
                         TooltipModule,
                         CropperComponentModal,
-                        FormlyModule,
                         DialogModule,
                         MessageModule,
                         RouterLink,