cloud-ide-fees 0.0.18 → 0.0.20

package/fesm2022/cloud-ide-fees.mjs

@@ -8,12 +8,12 @@ import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent, CurrencyPipe } from 'cloud-ide-element';
 import { AppStateHelperService, CideLytSharedWrapperComponent, AppStateService } from 'cloud-ide-layout';
 import { ENTITY_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent } from 'cloud-ide-shared';
 import { CideCoreGeneralMasterService } from 'cloud-ide-core';
-import { forkJoin } from 'rxjs';
+import { forkJoin, startWith } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class CloudIdeFees {
@@ -5583,7 +5583,15 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
         return category.tags.filter(tag => tag.code.toLowerCase().includes(query) ||
             tag.description.toLowerCase().includes(query));
     }, ...(ngDevMode ? [{ debugName: "filteredTags" }] : []));
+    // Reactive signal for template HTML - tracks form control changes
+    templateHtmlSignal = toSignal(this.templateForm.get('template_html').valueChanges.pipe(startWith(this.templateForm.get('template_html')?.value || '')), { initialValue: this.templateForm.get('template_html')?.value || '' });
+    // Reactive signal for preview type - tracks preview type changes
+    previewTypeSignal = toSignal(this.templateForm.get('preview_type').valueChanges.pipe(startWith(this.templateForm.get('preview_type')?.value || 'STUDENT')), { initialValue: this.templateForm.get('preview_type')?.value || 'STUDENT' });
     previewHtml = computed(() => {
+        // Access both signals to make computed reactive to both changes
+        const templateHtml = this.templateHtmlSignal(); // Read to track dependency
+        const previewType = this.previewTypeSignal(); // Read to track dependency
+        // Use the reactive signal instead of reading directly from form
         const htmlContent = this.getPreviewWithSampleData();
         return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
     }, ...(ngDevMode ? [{ debugName: "previewHtml" }] : []));
@@ -5641,7 +5649,8 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
         }, 0);
     }
     getPreviewWithSampleData() {
-        let html = this.templateForm.get('template_html')?.value || '';
+        // Use the reactive signal to ensure preview updates when template changes
+        let html = this.templateHtmlSignal() || '';
         // Sample fee payment items data
         const sampleFeeItems = [
             {