@dataclouder/ngx-lessons 0.0.30 → 0.0.31

package/src/lib/components/dc-lessons/dc-lesson-editor/dc-lesson-editor.component.ts

@@ -1,34 +1,43 @@
-import { ChangeDetectorRef, Component, ComponentRef, ElementRef, Inject, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, ComponentRef, ElementRef, computed, effect, inject, signal, ViewChild, ViewContainerRef } from '@angular/core';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { map } from 'rxjs';
 
 import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 // PrimeNG
-import { DialogService } from 'primeng/dynamicdialog';
-import { SpeedDialModule } from 'primeng/speeddial';
+// Removed DialogService, DynamicDialogRef, SpeedDialModule, MenuItem
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
 import { SplitterModule } from 'primeng/splitter';
 import { TooltipModule } from 'primeng/tooltip';
 // Dataclouder
-import { AspectType, CropImageSettings, CropperComponentModal, ResolutionType, StorageImageSettings } from '@dataclouder/ngx-cloud-storage';
+import { AspectType, CropperComponentModal, ResolutionType, StorageImageSettings } from '@dataclouder/ngx-cloud-storage';
 import { TOAST_ALERTS_TOKEN, ToastAlertsAbstractService } from '@dataclouder/ngx-core';
 
 import { DCLessonRendererComponent } from '../dc-lesson-renderer/dc-lesson-renderer.component';
+// Added DynamicContentComponent to the import below
 import {
   LessonComponentEnum,
   LessonImage,
   ILesson,
   LessonComponentInterface,
   LESSONS_TOKEN,
-  LessonsAbstractService,
+  DynamicContentComponent,
+  LessonComponentConfiguration,
 } from '../../lesson-mini-components/components/lessons.clases';
 import { LessonComponentBuilders } from '../../lesson-mini-components/components/lessons.clases';
 import { FlagLanguagePipe, LangDescTranslationPipe } from '../../../models/lessons.pipes';
-import { NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType } from '../../../models/notion.models';
-import { MenuItem } from 'primeng/api';
+// Notion types might still be needed if passed/returned, but token injection removed
+import { NotionExportType } from '../../../models/notion.models';
+// Removed MenuItem import
+import { LessonNotionService } from '../../../services/lesson-notion.service';
+import { LessonUtilsService } from '../../../services/lesson-utils.service'; // Import the new utils service
+import { DCLessonComponentAdderComponent } from '../dc-lesson-component-adder/dc-lesson-component-adder.component'; // Import the component adder
+import { DCLessonMetadataEditorComponent } from '../dc-lesson-metadata-editor/dc-lesson-metadata-editor.component'; // Import the metadata editor
+import { ComponentBuildData } from '../../lesson-mini-components/components/ComponentBuilder';
+import { JsonPipe } from '@angular/common';
 
 const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 238, 239, 0.31))';
 
@@ -38,281 +47,310 @@ const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 2
   styleUrls: ['./dc-lesson-editor.component.css'],
   standalone: true,
   imports: [
-    FormsModule,
+    ButtonModule,
     CKEditorModule,
     CropperComponentModal,
-    ButtonModule,
+    DCLessonRendererComponent,
+    FormsModule,
     InputTextModule,
     SplitterModule,
-    DCLessonRendererComponent,
-    LangDescTranslationPipe,
-    FlagLanguagePipe,
     TooltipModule,
-    SpeedDialModule,
+    // Removed SpeedDialModule
+    DCLessonComponentAdderComponent, // Add the component adder here
+    DCLessonMetadataEditorComponent, // Add the metadata editor here
+    JsonPipe,
   ],
+  providers: [LessonNotionService], // Provide the service here
 })
-export class DCLessonEditorComponent implements OnInit {
-  // public get activatedRoute(): ActivatedRoute {
-  //   return this._activatedRoute;
-  // }
-  // public set activatedRoute(value: ActivatedRoute) {
-  //   this._activatedRoute = value;
-  // }
+export class DCLessonEditorComponent {
+  // Services
+  #activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
+  #lessonNotionService = inject(LessonNotionService);
+  #lessonUtilsService = inject(LessonUtilsService);
+  #router = inject(Router);
+  // Removed #dialogService injection
+  #lessonService = inject(LESSONS_TOKEN);
+  #toastService = inject(TOAST_ALERTS_TOKEN);
+  // ViewChild
   @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
   @ViewChild('dhtml', { static: true }) dhtml: ElementRef;
+  // Signals States
+  readonly lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params: ParamMap) => params.get('id'))));
+  lesson = signal<ILesson | undefined>(undefined); // Initialize as undefined
+  isCropperVisible = signal(false);
+  isLoadingLesson = signal(false);
+  // Removed items signal
+  // Computed Signals
+  coverBackground = computed(() => {
+    const currentLesson = this.lesson();
+    const coverImage = currentLesson?.media?.images?.find((img: any) => img.type === 'cover') as LessonImage | undefined;
+    const imageUrl = coverImage?.url || '/assets/images/default_banner.webp';
+    return `${GradientCss}, url("${imageUrl}")`;
+  });
+
+  // Computed signal to get dynamic components as an array for easier iteration in the template
+  readonly dynamicComponentsArray = computed(() => {
+    const currentLesson = this.lesson();
+    if (currentLesson?.dynamicComponents) {
+      return Object.values(currentLesson.dynamicComponents);
+    }
+    return []; // Return empty array if no lesson or no dynamic components
+  });
 
+  // States
+  public components: { [key: string]: ComponentRef<LessonComponentInterface> } = {}; // Current Dynamic components
   public editor = BalloonEditor;
+  public lessonComponentEnum = LessonComponentEnum;
+
   public coverStorageSettings: StorageImageSettings = {
     path: 'lessons/covers',
     fileName: 'cover',
     cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
   };
 
-  public lessonComponentEnum = LessonComponentEnum;
-  public lessonId: string = this._activatedRoute.snapshot.paramMap.get('id');
-  public lesson: any = { textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] };
-  public components: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
-  public isRendered: boolean = false;
-  public cover: string = '';
-  public isCropperVisible = false;
-  public items: MenuItem[];
-
-  constructor(
-    @Inject(LESSONS_TOKEN) private lessonService: LessonsAbstractService,
-    @Inject(TOAST_ALERTS_TOKEN) private toastService: ToastAlertsAbstractService,
-    @Inject(NOTION_SERVICE_TOKEN) private notionService: NotionAbstractService,
-    private _activatedRoute: ActivatedRoute,
-    private router: Router,
-    private cdr: ChangeDetectorRef,
-    private dialogService: DialogService,
-  ) {}
-
-  ngOnInit(): void {
-    this.getLessonIfId();
-
-    this.items = [
-      {
-        tooltipOptions: { tooltipLabel: 'Reparar con IA: Repara la lección con IA', tooltipPosition: 'bottom' },
-        icon: 'pi pi-magic',
-        command: () => this.generateByAI(),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Selector: Agrega un selector con multiples opciones', tooltipPosition: 'bottom' },
-        icon: 'pi pi-caret-down',
-        command: () => this.openComponentBuilder('selector'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Hablar: Para que una palabra o frase sea reproducible', tooltipPosition: 'bottom' },
-        icon: 'pi pi-megaphone',
-        command: () => this.openComponentBuilder('speaker'),
-      },
-      {
-        tooltipOptions: {
-          tooltipLabel: 'Entrada de texto: Escribe una respuesta en un cuadro de texto',
-          tooltipPosition: 'bottom',
-        },
-        icon: 'pi pi-pencil',
-        command: () => this.openComponentBuilder('textWriter'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Verbo: Para ver datos de un verbo', tooltipPosition: 'bottom' },
-        icon: 'pi pi-eye',
-        command: () => this.openComponentBuilder('verbSummary'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Palabra: Para ver datos de una palabra', tooltipPosition: 'bottom' },
-        icon: 'pi pi-file-word',
-        command: () => this.openComponentBuilder('wordSummary'),
-      },
-    ];
-  }
-
-  public async getLessonIfId(): Promise<void> {
-    if (!this.lessonId) {
-      this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
-      return;
-    }
-    this.lesson = await this.lessonService.getLesson(this.lessonId);
-    console.log('lesson', this.lesson);
-    if (!this.lesson) {
-      this.toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quiza el id es incorrecto' });
-    }
-    this.togleRender();
-    this.updateCover();
+  constructor() {
+    // Removed Speed Dial Items initialization
+
+    // Effect to fetch lesson data when ID changes
+    effect(async () => {
+      const id = this.lessonId();
+      console.log('Lesson ID Signal:', id);
+      if (id) {
+        this.isLoadingLesson.set(true); // Start loading
+        try {
+          const fetchedLesson = await this.#lessonService.getLesson(id);
+          if (fetchedLesson) {
+            this.lesson.set(fetchedLesson);
+          } else {
+            this.lesson.set(undefined); // Reset if not found
+            this.#toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quizá el id es incorrecto' });
+            // Optional: Navigate away or show a specific "not found" state
+            // this.#router.navigate(['/path/to/lessons']);
+          }
+        } catch (error) {
+          console.error('Error fetching lesson:', error);
+          this.lesson.set(undefined); // Reset on error
+          this.#toastService.error({ title: 'Error al cargar la lección', subtitle: 'Intenta de nuevo más tarde' });
+        } finally {
+          this.isLoadingLesson.set(false); // Stop loading
+        }
+      } else {
+        // Handle case for new lesson (ID is null/undefined)
+        this.lesson.set({ textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] } as ILesson); // Set default new lesson structure
+        this.isLoadingLesson.set(false); // Ensure loading is off
+      }
+    });
   }
 
-  public updateCover(): void {
-    const cover: LessonImage = this.lesson.media?.images?.find((img) => img.type === 'cover');
-    if (cover) {
-      this.cover = `${GradientCss}, url('${cover.url}')`;
-    } else {
-      this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
-    }
-    this.cdr.detectChanges();
+  /**
+   * Updates a specific property on the lesson signal.
+   * Used for ngModelChange events to simulate two-way binding with signals.
+   * @param property The key of the ILesson property to update.
+   * @param value The new value for the property.
+   */
+  public updateLessonProperty<K extends keyof ILesson>(property: K, value: ILesson[K]): void {
+    this.lesson.update((currentLesson) => {
+      if (!currentLesson) return undefined;
+      return { ...currentLesson, [property]: value };
+    });
   }
 
   public onTagRemove(tag: any): void {
-    this.lesson.tags = this.lesson.tags.filter((text) => text !== tag.text);
+    this.lesson.update((currentLesson) => {
+      if (!currentLesson) return undefined;
+      const updatedTags = currentLesson.tags.filter((text: string) => text !== tag.text);
+      return { ...currentLesson, tags: updatedTags };
+    });
   }
 
   public onTagAdd(tag: { value: string; input: any }): void {
     if (tag.value) {
-      this.lesson.tags.push(tag.value);
+      this.lesson.update((currentLesson) => {
+        if (!currentLesson) return undefined;
+        // Avoid duplicate tags if necessary
+        if (currentLesson.tags.includes(tag.value)) {
+          return currentLesson;
+        }
+        const updatedTags = [...currentLesson.tags, tag.value];
+        return { ...currentLesson, tags: updatedTags };
+      });
     }
-    tag.input.nativeElement.value = '';
+    tag.input.nativeElement.value = ''; // Clear input
   }
 
-  public async saveLesson(event: Event = null): Promise<ILesson> {
-    if (event) {
-      event.preventDefault();
-    }
-    // TODO: Optimización importante, guardar una lección guarda todos los datos de nuevo,  y no solo los que se modificaron, encontrar una forma de optimizar.
-    const lesson = await this.lessonService.postLesson(this.lesson);
-    if (!this.lessonId) {
-      this.toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
-      this.router.navigate([lesson.id], { relativeTo: this._activatedRoute });
-    } else {
-      this.toastService.info({ title: 'Se guadarón los cambios en la lección', subtitle: 'Guardado' });
-      this.lesson = lesson;
-      this.validateAudios();
+  public async saveLesson(event?: Event): Promise<ILesson | undefined> {
+    event?.preventDefault();
+
+    const currentLesson = this.lesson();
+    if (!currentLesson) {
+      this.#toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
+      return undefined;
     }
 
-    this.togleRender();
-    return lesson;
-  }
+    // Clean orphaned components before saving
+    const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
 
-  public async validateAudios() {
-    if (!this.lesson.components) {
-      return;
+    // TODO: Implement optimization for saving only changed data.
+    // This requires comparing lessonToSave with the initially fetched state.
+    this.isLoadingLesson.set(true); // Indicate saving
+    try {
+      // Use the cleaned lesson object for saving
+      const savedLesson = await this.#lessonService.postLesson(lessonToSave);
+      const currentId = this.lessonId();
+
+      if (!currentId) {
+        // It was a new lesson, now it has an ID. Navigate.
+        this.#toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
+        // The effect should automatically fetch the lesson again after navigation due to paramMap change.
+        this.#router.navigate(['../', savedLesson.id], { relativeTo: this.#activatedRoute });
+      } else {
+        // It was an existing lesson, update the signal with the potentially updated data from the backend.
+        this.lesson.set(savedLesson);
+        this.#toastService.info({ title: 'Se guardaron los cambios en la lección', subtitle: 'Guardado' });
+        // Call the service method for validation
+        this.#lessonUtilsService.validateAudios(this.lesson());
+      }
+      return savedLesson;
+    } catch (error: any) {
+      // Type error
+      console.error('Error saving lesson:', error);
+      this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudieron guardar los cambios' });
+      return undefined;
+    } finally {
+      this.isLoadingLesson.set(false); // Finish saving indication
     }
-    // al menos un audio sin generar.
-    // agregar más condigciones después
-    // this.lesson.components.forEach((component: SpeakerCompConfiguration) => {
-    //   if (component.component === 'speaker') {
-    //     if (component.settings.voice && !component.audio) {
-    //       // this.toastrService.warn('Se encontraron audios por generar', 'Será rápido');
-    //       // TODO call backend.
-    //       this.lessonService.generateAudiosForLesson(this.lesson.id).then((res) => {
-    //         // this.toastrService.success('Se generaron los audios', 'Listo');
-    //         console.log(res);
-    //       });
-    //       return;
-    //     }
-    //   }
-    // });
-  }
+  } // Add missing closing brace for saveLesson
+
+  // Removed openComponentBuilder method
+
+  /**
+   * Handles the event emitted when a component is added via the adder component.
+   * @param result The configuration data returned from the component builder dialog. Expected format: { obj: LessonComponentConfiguration }
+   */
+  public onComponentAdded(result: ComponentBuildData): void {
+    debugger;
+    // Check if result and result.obj.id exist
+    const newComponent = result?.obj;
+    if (newComponent?.id) {
+      console.log('Component builder closed, result received in editor:', newComponent);
+
+      // // Transform LessonComponentConfiguration to DynamicContentComponent
+      // const dynamicComponentToAdd: DynamicContentComponent = {
+      //   id: componentConfig.id,
+      //   component: componentConfig.component,
+      //   inputs: {
+      //     config: componentConfig, // Pass the original config object as an input named 'config'
+      //     // Add other potential inputs if needed based on component type later
+      //   },
+      // };
+
+      // Update the lesson signal, adding the transformed component to the dynamicComponents object
+      this.lesson.update((currentLesson: any) => {
+        if (!currentLesson) return undefined;
+
+        // Ensure dynamicComponents object exists, initialize if not
+        const currentDynamicComponents = currentLesson.dynamicComponents || {};
+
+        // Create the updated dynamicComponents object
+        const updatedDynamicComponents: Record<string, LessonComponentConfiguration<any>> = {
+          ...currentDynamicComponents,
+          [newComponent.id]: newComponent, // Use component's id as the key
+        };
+
+        // Return the updated lesson state
+        return { ...currentLesson, dynamicComponents: updatedDynamicComponents };
+      });
 
-  public togleRender(_event: any = null): void {
-    this.isRendered = false;
-    setTimeout(() => {
-      this.isRendered = true;
-      this.cdr.detectChanges();
-    }, 400);
-    this.cdr.detectChanges();
+      // Optionally save the lesson after adding the component
+      // this.saveLesson();
+    }
   }
 
-  public openComponentBuilder(type: string): Observable<any> {
-    return this.dialogService.open(LessonComponentBuilders[type], { width: '550px', header: 'Agregar componente', closable: true }).onClose.pipe();
+  public openCropper(): void {
+    // Correctly define openCropper
+    this.isCropperVisible.set(true);
   }
 
-  public uploadCover(imageUploaded: any) {
-    const image = { type: 'cover', ...imageUploaded };
-
-    if (!this.lesson.media) {
-      // puede que no exista media
-      this.lesson.media = {};
-      this.lesson.media.images = [image];
-    } else {
-      // solo sustituir el cover si ya existe, como siempre utilizo el mismo nombre, no tengo que eliminar la anterior si actualizo.
-      // const currentCover = this.lesson.media.images.find((img) => img.type === 'cover');
+  // isLoadingLesson signal is used directly
 
-      this.lesson.media.images = this.lesson.media.images.filter((img) => img.type !== 'cover');
-      this.lesson.media.images.push(image);
+  public async generateByAI(): Promise<void> {
+    const currentId = this.lessonId();
+    if (!currentId) {
+      this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
+      return;
     }
-    this.updateCover();
-    this.saveLesson();
-  }
 
-  openCropper() {
-    this.isCropperVisible = true;
-  }
-
-  isLoadingLesson = false;
-  public async generateByAI() {
-    this.isLoadingLesson = true;
+    this.isLoadingLesson.set(true);
     try {
-      await this.saveLesson();
-      await this.lessonService.postGenerateByAI(this.lesson.id);
-      await this.getLessonIfId();
+      // Ensure latest changes are saved before generating
+      const savedLesson = await this.saveLesson();
+      if (!savedLesson) {
+        // Handle save error - toast is shown in saveLesson
+        throw new Error('Failed to save before AI generation');
+      }
+
+      // Call the service method
+      const updatedLesson = await this.#lessonUtilsService.generateByAI(currentId);
+
+      if (updatedLesson) {
+        this.lesson.set(updatedLesson); // Update the signal with AI changes from service
+        // Toast success is handled by the service
+      } else {
+        // Toast error is handled by the service
+        throw new Error('AI generation failed or lesson fetch failed after generation.');
+      }
+    } catch (error: any) {
+      // Type error
+      console.error('Error during AI generation process in component:', error);
+      // Service handles specific AI error toasts, maybe add a general one here if needed
+      // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
     } finally {
-      this.isLoadingLesson = false;
+      this.isLoadingLesson.set(false); // Stop loading
     }
   }
 
-  public onImageSelected(event: any) {
-    console.log(event);
+  /**
+   * Handles the image upload event, updates the lesson signal via the service, and saves.
+   * @param event The image upload event data.
+   */
+  public async onImageUploaded(event: any): Promise<void> {
+    // Call the service to update the signal
+    this.#lessonUtilsService.uploadCover(this.lesson, event);
+    // The coverBackground computed signal will update automatically.
+    // Save the lesson after the signal has been updated
+    await this.saveLesson();
   }
 
-  public async onImageUploaded(event: any) {
-    this.uploadCover(event);
-    this.cdr.detectChanges();
-  }
+  /**
+   * Imports lesson content from Notion using the LessonNotionService.
+   */
+  public async importFromNotion(): Promise<void> {
+    // Use the service's loading state or manage locally
+    this.isLoadingLesson.set(true);
+    try {
+      const newContent = await this.#lessonNotionService.importAndLinkLessonFromNotion(this.lesson(), this.lessonId());
 
-  public async importFromNotion() {
-    let notionPageId: string;
-    if (this.lesson?.extras?.notionPageId) {
-      const response = confirm(`Ya tenemos el id ${this.lesson.extras?.notionPageId} ¿Quieres usar este id?`);
-      if (!response) {
-        return;
-      }
-      notionPageId = this.lesson.extras?.notionPageId;
-    } else {
-      const response = prompt('Ingresa el url de notion para importar la lección, se guardará este id');
-      if (!response) {
-        return;
+      if (newContent !== null) {
+        // Update the lesson signal's textCoded property
+        this.updateLessonProperty('textCoded', newContent);
+        // Toast success is handled within the service now
       }
-      notionPageId = this.extractNotionPageId(response);
-      if (!notionPageId) return;
-      this.linkWithNotion(notionPageId);
-    }
-
-    this.toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
-
-    const md = await this.notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
-    console.log(md);
-    this.lesson.textCoded = md.content;
-    this.togleRender();
-    this.toastService.success({ title: 'Listo', subtitle: 'La lección se importó correctamente' });
-  }
-
-  extractNotionPageId(url: string) {
-    const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
-    const match = url.match(notionIdRegex);
-    const notionId = match ? match[0] : null;
-    if (!notionId) {
-      this.toastService.error({
-        title: 'URL inválido',
-        subtitle: 'Por favor ingresa una URL válida de Notion',
-      });
+      // If newContent is null, the service handled errors/toasts
+    } finally {
+      // Ensure loading state is reset regardless of service outcome
+      // If observing service state: this.isLoadingLesson.set(this.#lessonNotionService.isLoading());
+      this.isLoadingLesson.set(false); // Keep local loading for now
     }
-    return notionId;
   }
 
-  public async linkWithNotion(notionPageId: string) {
-    const extra = this.lesson.extras || {};
-    extra.notionPageId = notionPageId;
-
-    await this.lessonService.postLesson({ ...this.lesson, extras: extra });
-    this.toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion' });
+  /**
+   * Calls the LessonNotionService to improve the lesson using AI based on Notion content.
+   */
+  public async improveNotionWithAI(): Promise<void> {
+    await this.#lessonNotionService.improveLessonWithNotionAI(this.lesson());
   }
 
-  public async improveNotionWithAI() {
-    const md = await this.notionService.getPageInSpecificFormat(this.lesson.extras.notionPageId, NotionExportType.HTML);
-    console.log(md);
-
-    // this.lesson.textCoded = md.content;
-
-    // this.togleRender();
-    // this.toastService.success({ title: 'Listo', subtitle: 'La lección se mejoró con AI' });
+  public showComponentDetails(data: any) {
+    alert('showComponentDetails' + JSON.stringify(data));
   }
 }

package/src/lib/components/dc-lessons/dc-lesson-metadata-editor/dc-lesson-metadata-editor.component.css

@@ -0,0 +1 @@
+/* Add any specific styles for the metadata editor here if needed */