cloud-ide-academics 0.0.9 → 0.0.20

package/fesm2022/{cloud-ide-academics-cloud-ide-academics-Cw2APcQg.mjs → cloud-ide-academics-cloud-ide-academics-SBTPvNBh.mjs}

@@ -11,7 +11,7 @@ import { of, forkJoin } from 'rxjs';
 import { switchMap, catchError, map } from 'rxjs/operators';
 import { CideInputComponent, CideTextareaComponent, CideEleButtonComponent, CideEleTabComponent, CideIconComponent, CideSelectComponent, CideFormFieldErrorComponent, ConfirmationService, NotificationService, CideEleDataGridComponent, CideEleDropdownComponent } from 'cloud-ide-element';
 import { HttpClient } from '@angular/common/http';
-import { generateStringFromObject, cidePath, hostManagerRoutesUrl, academicsRoutesUrl, generateObjectFromString } from 'cloud-ide-lms-model';
+import { generateStringFromObject, cidePath, hostManagerRoutesUrl, academicsRoutesUrl, generateObjectFromString, AcaClassPrgBranchListPayload } from 'cloud-ide-lms-model';
 import { ENTITY_SERVICE_TOKEN, CideCoreGeneralMasterService } from 'cloud-ide-shared';
 import { AppStateHelperService, CideLytSharedWrapperComponent } from 'cloud-ide-layout';
 
@@ -59,7 +59,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-class-management',
-        loadComponent: () => import('./cloud-ide-academics-program-class-list.component-B4-1_XST.mjs').then(c => c.ProgramClassListComponent),
+        loadComponent: () => import('./cloud-ide-academics-program-class-list.component-Cbt7ptxQ.mjs').then(c => c.ProgramClassListComponent),
         title: 'Program Class Management',
         canActivate: [authGuard],
         data: {
@@ -69,7 +69,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-class-management/create',
-        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-B97IgzP1.mjs').then(c => c.ProgramClassCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-C1FnWsj4.mjs').then(c => c.ProgramClassCreateComponent),
         title: 'Create Program Class',
         canActivate: [authGuard],
         data: {
@@ -79,7 +79,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-class-management/edit/:query',
-        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-B97IgzP1.mjs').then(c => c.ProgramClassCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-C1FnWsj4.mjs').then(c => c.ProgramClassCreateComponent),
         title: 'Edit Program Class',
         canActivate: [authGuard],
         data: {
@@ -89,7 +89,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-class-management/view/:query',
-        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-B97IgzP1.mjs').then(c => c.ProgramClassCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-C1FnWsj4.mjs').then(c => c.ProgramClassCreateComponent),
         title: 'View Program Class',
         canActivate: [authGuard],
         data: {
@@ -99,7 +99,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-term-management/create',
-        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DKn6Q38-.mjs').then(c => c.ClassProgramTermCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DiWhmhG_.mjs').then(c => c.ClassProgramTermCreateComponent),
         title: 'Create Class Program Term',
         canActivate: [authGuard],
         data: {
@@ -109,7 +109,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-term-management/edit/:query',
-        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DKn6Q38-.mjs').then(c => c.ClassProgramTermCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DiWhmhG_.mjs').then(c => c.ClassProgramTermCreateComponent),
         title: 'Edit Class Program Term',
         canActivate: [authGuard],
         data: {
@@ -119,7 +119,7 @@ const academicsRoutes = [
     },
     {
         path: 'program-term-management/view/:query',
-        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DKn6Q38-.mjs').then(c => c.ClassProgramTermCreateComponent),
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-DiWhmhG_.mjs').then(c => c.ClassProgramTermCreateComponent),
         title: 'View Class Program Term',
         canActivate: [authGuard],
         data: {
@@ -1786,6 +1786,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }] });
 
+class CideLytProgramClassService {
+    http = inject(HttpClient);
+    /**
+     * Get list of program classes
+     * @param payload - Query parameters for filtering/pagination
+     * @returns Observable of program class list response
+     */
+    getProgramClassList(payload) {
+        console.log("Program Class List Payload:", payload);
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Get program class by ID
+     * @param payload - Program class ID payload
+     * @returns Observable of program class data
+     */
+    getProgramClassById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            'byId',
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Create or update program class
+     * @param data - Program class data to save
+     * @returns Observable of the save response
+     */
+    saveProgramClass(data) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster
+        ]);
+        return this.http.post(url, data);
+    }
+    /**
+     * Delete program class
+     * @param payload - Program class delete payload
+     * @returns Observable of the delete response
+     */
+    deleteProgramClass(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            query
+        ]);
+        return this.http.delete(url);
+    }
+    /**
+     * Toggle program class status (active/inactive)
+     * @param payload - Program class toggle status payload
+     * @returns Observable of the toggle status response
+     */
+    toggleProgramClassStatus(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            'toggleStatus',
+            query
+        ]);
+        return this.http.put(url, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class CideLytClassProgramBranchListComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
@@ -1795,12 +1883,15 @@ class CideLytClassProgramBranchListComponent {
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
     classProgramBranchService = inject(CideLytClassProgramBranchService);
+    programClassService = inject(CideLytProgramClassService);
     // State management
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
     totalCount = signal(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
     programId = signal(null, ...(ngDevMode ? [{ debugName: "programId" }] : []));
+    programClasses = signal([], ...(ngDevMode ? [{ debugName: "programClasses" }] : []));
+    selectedProgramClassId = signal(null, ...(ngDevMode ? [{ debugName: "selectedProgramClassId" }] : []));
     // Signal for breadcrumb data that will be passed to shared wrapper
     breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
     // Template renderers
@@ -1920,7 +2011,7 @@ class CideLytClassProgramBranchListComponent {
         striped: true,
         bordered: true,
         compact: false,
-        tableClass: 'tw-table-fixed tw-w-full tw-rounded-lg',
+        tableClass: 'tw-table-fixed tw-w-full',
         dragDrop: {
             enabled: true
         },
@@ -1946,6 +2037,7 @@ class CideLytClassProgramBranchListComponent {
     ngOnInit() {
         console.log('🏢 Class Program Branch List Component initialized');
         this.initializeBreadcrumbData();
+        this.loadProgramClasses();
         this.checkRouteParams();
         // Load branches will be called when programId is set in checkRouteParams
     }
@@ -1953,6 +2045,10 @@ class CideLytClassProgramBranchListComponent {
      * Initialize breadcrumb data for list view
      */
     initializeBreadcrumbData() {
+        // The shared wrapper will automatically add:
+        // 1. Module (Academics) from app state
+        // 2. Current page (Class Program Branch Management) from page config
+        // We can add additional items here if needed
         this.breadcrumbData.set([
             {
                 id: 'list',
@@ -1962,6 +2058,48 @@ class CideLytClassProgramBranchListComponent {
             }
         ]);
     }
+    /**
+     * Load program classes for dropdown
+     */
+    loadProgramClasses() {
+        const payload = {
+            pagination: false,
+            acacpm_isactive: true
+        };
+        this.programClassService.getProgramClassList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('✅ Program classes loaded:', response);
+                if (response?.success && response.data) {
+                    this.programClasses.set(response.data);
+                }
+                else {
+                    console.warn('⚠️ No program class data received');
+                    this.programClasses.set([]);
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error loading program classes:', error);
+                this.programClasses.set([]);
+            }
+        });
+    }
+    /**
+     * Handle Program Class selection change
+     */
+    onProgramClassChange(programClassId) {
+        const programId = typeof programClassId === 'string' ? programClassId : (programClassId ? String(programClassId) : null);
+        console.log('🔄 Program Class changed:', programId);
+        if (!programId) {
+            // Class program is required, show error if cleared
+            this.notificationService.warning('Class Program is required to view branches');
+            return;
+        }
+        this.selectedProgramClassId.set(programId);
+        this.programId.set(programId);
+        this.loadBranches();
+    }
     /**
      * Check route parameters for program ID
      */
@@ -1974,11 +2112,10 @@ class CideLytClassProgramBranchListComponent {
                 const queryData = generateObjectFromString(queryParams);
                 console.log('🏢 Query data from route:', queryData);
                 // Check for programId in various possible formats
-                const programId = queryData?.programId ||
-                    queryData?.acacpm_id ||
-                    queryData?.acabrn_class_program_id_acacpm;
+                const programId = queryData?.programId;
                 if (programId) {
                     this.programId.set(programId);
+                    this.selectedProgramClassId.set(programId);
                     console.log('🏢 Program Class ID extracted from route:', programId);
                     console.log('🏢 Will filter branches by acabrn_class_program_id_acacpm:', programId);
                     this.loadBranches();
@@ -1999,20 +2136,22 @@ class CideLytClassProgramBranchListComponent {
      */
     checkQueryParams() {
         const queryParams = this.route.snapshot.queryParams;
-        const programId = queryParams['programId'] ||
-            queryParams['acacpm_id'] ||
-            queryParams['acabrn_class_program_id_acacpm'];
+        const programId = queryParams['programId'];
         if (programId) {
             this.programId.set(programId);
+            this.selectedProgramClassId.set(programId);
             console.log('🏢 Program Class ID from query params:', programId);
             console.log('🏢 Will filter branches by acabrn_class_program_id_acacpm:', programId);
             this.loadBranches();
         }
         else {
-            // Load all branches if no program ID is provided
-            console.log('🏢 No program class ID provided, loading all branches');
-            this.programId.set(null); // Clear any previous program ID
-            this.loadBranches();
+            // No program ID provided - class program is required
+            console.log('🏢 No program class ID provided - class program is required');
+            this.programId.set(null);
+            this.selectedProgramClassId.set(null);
+            // Don't load branches if no program ID - wait for user selection
+            this.branches.set([]);
+            this.updateGridData();
         }
     }
     /**
@@ -2021,13 +2160,22 @@ class CideLytClassProgramBranchListComponent {
     loadBranches() {
         this.loading.set(true);
         this.error.set(null);
-        // Build payload with program ID filter if available
-        const payload = {
+        // Build payload with program ID - required field
+        const currentProgramId = this.programId();
+        // Class program is required, so we must have a program ID
+        if (!currentProgramId) {
+            this.loading.set(false);
+            this.error.set('Class Program is required');
+            this.branches.set([]);
+            this.updateGridData();
+            return;
+        }
+        const payload = new AcaClassPrgBranchListPayload({
+            acabrn_class_program_id_acacpm: currentProgramId,
             pagination: true,
             pageIndex: 0,
-            pageSize: 10,
-            acabrn_class_program_id_acacpm: this.programId()
-        };
+            pageSize: 10
+        });
         console.log('🏢 API Payload:', payload);
         this.classProgramBranchService.getClassProgramBranchList(payload)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -2132,17 +2280,24 @@ class CideLytClassProgramBranchListComponent {
     /**
      * Navigate to create branch
      */
-    onCreateBranch() {
+    onCreateBranch(event) {
+        console.log('🏢 Create Branch button clicked', event);
         const currentProgramId = this.programId();
-        if (currentProgramId) {
-            // Use generateStringFromObject to pass programId as route parameter
-            const queryParams = generateStringFromObject({ programId: currentProgramId });
-            this.router.navigate(['/control-panel/program_specialization/create', queryParams]);
-        }
-        else {
-            // No program ID, navigate to create without parameters
-            this.router.navigate(['/control-panel/program_specialization/create']);
+        console.log('🏢 Current Program ID:', currentProgramId);
+        if (!currentProgramId) {
+            // Class program is required
+            this.notificationService.warning('Please select a Class Program first before creating a branch');
+            return;
         }
+        // Use generateStringFromObject to pass programId as route parameter
+        const queryParams = generateStringFromObject({ programId: currentProgramId });
+        console.log('🏢 Navigating to create with programId:', queryParams);
+        this.router.navigate(['/control-panel/program_specialization/create', queryParams]).then((success) => {
+            console.log('✅ Navigation successful:', success);
+        }, (error) => {
+            console.error('❌ Navigation failed:', error);
+            this.notificationService.error('Failed to navigate to create branch page');
+        });
     }
     /**
      * Navigate to view branch
@@ -2359,18 +2514,20 @@ class CideLytClassProgramBranchListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: CideLytClassProgramBranchListComponent, isStandalone: true, selector: "cide-academics-class-program-branch-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Class Program Branch List Component -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Header Section with Actions -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">account_tree</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Class Program Branch Management</h5>\r\n          </div>\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"onCreateBranch()\">\r\n              Create Branch\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Data Grid Section -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-p-0\">\r\n        <cide-ele-data-grid\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\r\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #classProgramRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-text-sm tw-text-gray-900\">\r\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-relative tw-inline-block\">\r\n    <cide-ele-dropdown \r\n      [items]=\"getBranchActionDropdownItems(row)\" \r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: CideLytClassProgramBranchListComponent, isStandalone: true, selector: "cide-academics-class-program-branch-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Class Program Branch List Component -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\" (btnClick)=\"onCreateBranch($event)\">\n      Create Branch\n    </button>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"tw-table tw-w-full tw-h-full\">\n    <!-- Filter Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-items-center tw-gap-4\">\n          <div class=\"tw-w-64\">\n            <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 tw-mb-2\">Class Program *</label>\n            <cide-ele-select\n              [options]=\"programClasses()\"\n              [ngModel]=\"selectedProgramClassId() || ''\"\n              (ngModelChange)=\"onProgramClassChange($event)\"\n              placeholder=\"Select Class Program\"\n              valueKey=\"_id\"\n              labelKey=\"acacpm_alise_title\"\n              [required]=\"true\">\n            </cide-ele-select>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Data Grid Section -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-p-0\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\n  </div>\n</ng-template>\n\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n  <div class=\"tw-text-sm tw-text-gray-900\">\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\n  </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <div class=\"tw-relative tw-inline-block\">\n    <cide-ele-dropdown \n      [items]=\"getBranchActionDropdownItems(row)\" \n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </div>\n</ng-template>\n\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-academics-class-program-branch-list', standalone: true, imports: [
                         CommonModule,
+                        FormsModule,
                         CideEleDataGridComponent,
                         CideIconComponent,
                         CideEleButtonComponent,
                         CideEleDropdownComponent,
+                        CideSelectComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Class Program Branch List Component -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Header Section with Actions -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">account_tree</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Class Program Branch Management</h5>\r\n          </div>\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"onCreateBranch()\">\r\n              Create Branch\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Data Grid Section -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-p-0\">\r\n        <cide-ele-data-grid\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\r\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #classProgramRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-text-sm tw-text-gray-900\">\r\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-relative tw-inline-block\">\r\n    <cide-ele-dropdown \r\n      [items]=\"getBranchActionDropdownItems(row)\" \r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"] }]
+                    ], template: "<!-- Class Program Branch List Component -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\" (btnClick)=\"onCreateBranch($event)\">\n      Create Branch\n    </button>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"tw-table tw-w-full tw-h-full\">\n    <!-- Filter Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-items-center tw-gap-4\">\n          <div class=\"tw-w-64\">\n            <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 tw-mb-2\">Class Program *</label>\n            <cide-ele-select\n              [options]=\"programClasses()\"\n              [ngModel]=\"selectedProgramClassId() || ''\"\n              (ngModelChange)=\"onProgramClassChange($event)\"\n              placeholder=\"Select Class Program\"\n              valueKey=\"_id\"\n              labelKey=\"acacpm_alise_title\"\n              [required]=\"true\">\n            </cide-ele-select>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Data Grid Section -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-p-0\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\n  </div>\n</ng-template>\n\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n  <div class=\"tw-text-sm tw-text-gray-900\">\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\n  </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <div class=\"tw-relative tw-inline-block\">\n    <cide-ele-dropdown \n      [items]=\"getBranchActionDropdownItems(row)\" \n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </div>\n</ng-template>\n\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"] }]
         }] });
 
 var classProgramBranchList_component = /*#__PURE__*/Object.freeze({
@@ -2378,94 +2535,6 @@ var classProgramBranchList_component = /*#__PURE__*/Object.freeze({
     CideLytClassProgramBranchListComponent: CideLytClassProgramBranchListComponent
 });
 
-class CideLytProgramClassService {
-    http = inject(HttpClient);
-    /**
-     * Get list of program classes
-     * @param payload - Query parameters for filtering/pagination
-     * @returns Observable of program class list response
-     */
-    getProgramClassList(payload) {
-        console.log("Program Class List Payload:", payload);
-        const query = generateStringFromObject(payload);
-        const url = cidePath.join([
-            hostManagerRoutesUrl.cideSuiteHost,
-            academicsRoutesUrl.module,
-            academicsRoutesUrl.classProgramMaster,
-            query
-        ]);
-        return this.http.get(url);
-    }
-    /**
-     * Get program class by ID
-     * @param payload - Program class ID payload
-     * @returns Observable of program class data
-     */
-    getProgramClassById(payload) {
-        const query = generateStringFromObject(payload);
-        const url = cidePath.join([
-            hostManagerRoutesUrl.cideSuiteHost,
-            academicsRoutesUrl.module,
-            academicsRoutesUrl.classProgramMaster,
-            'byId',
-            query
-        ]);
-        return this.http.get(url);
-    }
-    /**
-     * Create or update program class
-     * @param data - Program class data to save
-     * @returns Observable of the save response
-     */
-    saveProgramClass(data) {
-        const url = cidePath.join([
-            hostManagerRoutesUrl.cideSuiteHost,
-            academicsRoutesUrl.module,
-            academicsRoutesUrl.classProgramMaster
-        ]);
-        return this.http.post(url, data);
-    }
-    /**
-     * Delete program class
-     * @param payload - Program class delete payload
-     * @returns Observable of the delete response
-     */
-    deleteProgramClass(payload) {
-        const query = generateStringFromObject(payload);
-        const url = cidePath.join([
-            hostManagerRoutesUrl.cideSuiteHost,
-            academicsRoutesUrl.module,
-            academicsRoutesUrl.classProgramMaster,
-            query
-        ]);
-        return this.http.delete(url);
-    }
-    /**
-     * Toggle program class status (active/inactive)
-     * @param payload - Program class toggle status payload
-     * @returns Observable of the toggle status response
-     */
-    toggleProgramClassStatus(payload) {
-        const query = generateStringFromObject(payload);
-        const url = cidePath.join([
-            hostManagerRoutesUrl.cideSuiteHost,
-            academicsRoutesUrl.module,
-            academicsRoutesUrl.classProgramMaster,
-            'toggleStatus',
-            query
-        ]);
-        return this.http.put(url, {});
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class CideLytClassProgramBranchFormComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
@@ -2491,6 +2560,8 @@ class CideLytClassProgramBranchFormComponent {
     branchMasters = signal([], ...(ngDevMode ? [{ debugName: "branchMasters" }] : []));
     // Signal for breadcrumb data that will be passed to shared wrapper
     breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
+    // Signal to control Program Class dropdown visibility
+    showProgramClassDropdown = signal(true, ...(ngDevMode ? [{ debugName: "showProgramClassDropdown" }] : []));
     // Flag to prevent auto-populate during data load
     isLoadingData = false;
     constructor() {
@@ -2522,6 +2593,27 @@ class CideLytClassProgramBranchFormComponent {
                 this.onBranchMasterChange(sygmsId);
             }
         });
+        // Listen to Program Class field changes
+        this.branchForm.get('acabrn_class_program_id_acacpm')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((programClassId) => {
+            // Only trigger if not loading existing data and dropdown is visible
+            if (programClassId && !this.isLoadingData && this.showProgramClassDropdown()) {
+                this.onProgramClassChange(programClassId);
+            }
+        });
+    }
+    /**
+     * Handle Program Class selection change
+     * This can be used to filter or update dependent lists
+     */
+    onProgramClassChange(programClassId) {
+        if (!programClassId) {
+            return;
+        }
+        console.log('🔄 Program Class changed:', programClassId);
+        // Add any logic here to update dependent lists based on Program Class selection
+        // For example, you could filter branch masters or load additional data
     }
     ngOnDestroy() {
         console.log('🏢 Class Program Branch Form Component destroyed');
@@ -2541,19 +2633,29 @@ class CideLytClassProgramBranchFormComponent {
         const queryParams = this.route.snapshot.queryParams;
         const routeParams = this.route.snapshot.params;
         // Check for program ID from route parameters or query parameters
-        // Also check route parameters for programId (for create operations)
-        let programId = {};
+        let programId = null;
+        // Check route parameters for programId or acacpm_id (for create operations)
         if (routeParams['query']) {
             const params = generateObjectFromString(routeParams['query']);
             console.log('🏢 Params:generateObjectFromString', params);
-            programId = params?.programId;
+            programId = params?.programId || params?.acacpm_id || null;
+        }
+        // Also check queryParams for programId or acacpm_id
+        if (!programId) {
+            programId = queryParams['programId'] || queryParams['acacpm_id'] || null;
         }
         if (programId) {
-            console.log('🏢 Program ID from route:', programId);
-            // Pre-select the program in the form
+            console.log('🏢 Program Class Management ID from URL:', programId);
+            // Hide the dropdown and set the value
+            this.showProgramClassDropdown.set(false);
             this.branchForm.patchValue({
                 acabrn_class_program_id_acacpm: programId
             });
+            // Keep the field enabled so it's included in form.value, but it will be hidden
+        }
+        else {
+            // Show the dropdown if no ID from URL
+            this.showProgramClassDropdown.set(true);
         }
         if (url.includes('/view/')) {
             this.isViewMode.set(true);
@@ -2724,12 +2826,27 @@ class CideLytClassProgramBranchFormComponent {
             next: (response) => {
                 if (response?.success && response.data) {
                     const branchData = response.data;
+                    // Check if program class ID is in URL - if so, hide dropdown
+                    const routeParams = this.route.snapshot.params;
+                    const queryParams = this.route.snapshot.queryParams;
+                    let programIdFromUrl = null;
+                    if (routeParams['query']) {
+                        const params = generateObjectFromString(routeParams['query']);
+                        programIdFromUrl = params?.programId || params?.acacpm_id || null;
+                    }
+                    if (!programIdFromUrl) {
+                        programIdFromUrl = queryParams['programId'] || queryParams['acacpm_id'] || null;
+                    }
+                    if (programIdFromUrl) {
+                        this.showProgramClassDropdown.set(false);
+                        // Keep the field enabled so it's included in form.value
+                    }
                     // Populate form with branch data
                     this.branchForm.patchValue({
                         acabrn_name: branchData.acabrn_name,
                         acabrn_code: branchData.acabrn_code,
                         acabrn_sequence: branchData.acabrn_sequence,
-                        acabrn_class_program_id_acacpm: branchData.acabrn_class_program_id_acacpm?._id,
+                        acabrn_class_program_id_acacpm: branchData.acabrn_class_program_id_acacpm?._id || branchData.acabrn_class_program_id_acacpm,
                         acabrn_branch_id_sygms: branchData.acabrn_branch_id_sygms?._id || branchData.acabrn_branch_id_sygms || '',
                         acabrn_isactive: (branchData).acabrn_isactive,
                         acabrn_islocked: branchData.acabrn_islocked
@@ -2930,7 +3047,7 @@ class CideLytClassProgramBranchFormComponent {
         this.breadcrumbData.set(additionalItems);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytClassProgramBranchFormComponent, isStandalone: true, selector: "cide-academics-class-program-branch-form", ngImport: i0, template: "<!-- \r\n  CLASS PROGRAM BRANCH FORM COMPONENT\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <div class=\"tw-w-full tw-h-full\">\r\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\r\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <!-- Form Content -->\r\n      <div class=\"tw-table-row\">\r\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n\r\n            <!-- Error Message -->\r\n            @if (error()) {\r\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n              <div class=\"tw-flex tw-items-start\">\r\n                <cide-ele-icon name=\"error\"\r\n                  class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n                <div class=\"tw-ml-3\">\r\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n            <!-- Basic Branch Information -->\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Class Program Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n                <div class=\"tw-space-y-2\">\r\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\r\n                  <cide-ele-select formControlName=\"acabrn_class_program_id_acacpm\" placeholder=\"Select class program\"\r\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"acacpm_alise_title\" [options]=\"programClasses()\">\r\n                  </cide-ele-select>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                    Sequence will be automatically assigned based on the order in the listing\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Standard Branch Name (SYGMS) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n                <div class=\"tw-space-y-2\">\r\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Standard Branch Name</label>\r\n                  <cide-ele-select formControlName=\"acabrn_branch_id_sygms\" placeholder=\"Select standard branch name\"\r\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"sygms_title\" [options]=\"branchMasters()\">\r\n                  </cide-ele-select>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                    Selecting a standard branch will auto-populate the branch name and code\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch Name and Code -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n                <div>\r\n                  <cide-ele-input label=\"Branch Name *\" formControlName=\"acabrn_name\"\r\n                    placeholder=\"e.g., Computer Science Branch\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <div>\r\n                  <cide-ele-input label=\"Branch Code *\" formControlName=\"acabrn_code\" placeholder=\"e.g., CS\" size=\"md\"\r\n                    leadingIcon=\"code\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Status and Lock Options -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n                <div\r\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\r\n                  (click)=\"onActiveCardClick()\">\r\n                  <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                  <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\r\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\r\n                  (click)=\"onLockedCardClick()\">\r\n                  <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                  <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\r\n                    <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n      <div class=\"tw-table-row tw-h-0\">\r\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-justify-end tw-gap-4\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n              [disabled]=\"loading()\">\r\n              Reset Form\r\n            </button>\r\n\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n              [disabled]=\"loading()\">\r\n              {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n            </button>\r\n\r\n            @if (!isViewMode()) {\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\r\n              [loading]=\"loading()\" leftIcon=\"save\">\r\n              {{ submitButtonText }}\r\n            </button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytClassProgramBranchFormComponent, isStandalone: true, selector: "cide-academics-class-program-branch-form", ngImport: i0, template: "<!-- \n  CLASS PROGRAM BRANCH FORM COMPONENT\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n      <!-- Form Content -->\n      <div class=\"tw-table-row\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n\n            <!-- Error Message -->\n            @if (error()) {\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n              <div class=\"tw-flex tw-items-start\">\n                <cide-ele-icon name=\"error\"\n                  class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n                <div class=\"tw-ml-3\">\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n                </div>\n              </div>\n            </div>\n            }\n\n            <!-- Basic Branch Information -->\n            <div class=\"tw-space-y-6\">\n              <!-- Class Program Selection -->\n              @if (showProgramClassDropdown()) {\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\n                <div class=\"tw-space-y-2\">\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\n                  <cide-ele-select formControlName=\"acabrn_class_program_id_acacpm\" placeholder=\"Select class program\"\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"acacpm_alise_title\" [options]=\"programClasses()\">\n                  </cide-ele-select>\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\n                    Sequence will be automatically assigned based on the order in the listing\n                  </p>\n                </div>\n              </div>\n              }\n\n              <!-- Standard Branch Name (SYGMS) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\n                <div class=\"tw-space-y-2\">\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Standard Branch Name</label>\n                  <cide-ele-select formControlName=\"acabrn_branch_id_sygms\" placeholder=\"Select standard branch name\"\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"sygms_title\" [options]=\"branchMasters()\">\n                  </cide-ele-select>\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\n                    Selecting a standard branch will auto-populate the branch name and code\n                  </p>\n                </div>\n              </div>\n\n              <!-- Branch Name and Code -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <div>\n                  <cide-ele-input label=\"Branch Name *\" formControlName=\"acabrn_name\"\n                    placeholder=\"e.g., Computer Science Branch\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                </div>\n\n                <div>\n                  <cide-ele-input label=\"Branch Code *\" formControlName=\"acabrn_code\" placeholder=\"e.g., CS\" size=\"md\"\n                    leadingIcon=\"code\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Status and Lock Options -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <div\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\n                  (click)=\"onActiveCardClick()\">\n                  <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\n                  </div>\n                </div>\n\n                <div\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\n                  (click)=\"onLockedCardClick()\">\n                  <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Form Actions -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-justify-end tw-gap-4\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n              [disabled]=\"loading()\">\n              Reset Form\n            </button>\n\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              {{ isViewMode() ? 'Close' : 'Cancel' }}\n            </button>\n\n            @if (!isViewMode()) {\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\n              [loading]=\"loading()\" leftIcon=\"save\">\n              {{ submitButtonText }}\n            </button>\n            }\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchFormComponent, decorators: [{
             type: Component,
@@ -2942,7 +3059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideSelectComponent,
                         CideLytSharedWrapperComponent,
-                    ], template: "<!-- \r\n  CLASS PROGRAM BRANCH FORM COMPONENT\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <div class=\"tw-w-full tw-h-full\">\r\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\r\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <!-- Form Content -->\r\n      <div class=\"tw-table-row\">\r\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n\r\n            <!-- Error Message -->\r\n            @if (error()) {\r\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n              <div class=\"tw-flex tw-items-start\">\r\n                <cide-ele-icon name=\"error\"\r\n                  class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n                <div class=\"tw-ml-3\">\r\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n            <!-- Basic Branch Information -->\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Class Program Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n                <div class=\"tw-space-y-2\">\r\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\r\n                  <cide-ele-select formControlName=\"acabrn_class_program_id_acacpm\" placeholder=\"Select class program\"\r\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"acacpm_alise_title\" [options]=\"programClasses()\">\r\n                  </cide-ele-select>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                    Sequence will be automatically assigned based on the order in the listing\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Standard Branch Name (SYGMS) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n                <div class=\"tw-space-y-2\">\r\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Standard Branch Name</label>\r\n                  <cide-ele-select formControlName=\"acabrn_branch_id_sygms\" placeholder=\"Select standard branch name\"\r\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"sygms_title\" [options]=\"branchMasters()\">\r\n                  </cide-ele-select>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                    Selecting a standard branch will auto-populate the branch name and code\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch Name and Code -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n                <div>\r\n                  <cide-ele-input label=\"Branch Name *\" formControlName=\"acabrn_name\"\r\n                    placeholder=\"e.g., Computer Science Branch\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <div>\r\n                  <cide-ele-input label=\"Branch Code *\" formControlName=\"acabrn_code\" placeholder=\"e.g., CS\" size=\"md\"\r\n                    leadingIcon=\"code\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Status and Lock Options -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n                <div\r\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\r\n                  (click)=\"onActiveCardClick()\">\r\n                  <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                  <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\r\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\r\n                  (click)=\"onLockedCardClick()\">\r\n                  <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                  </cide-ele-input>\r\n                  <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\r\n                    <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n      <div class=\"tw-table-row tw-h-0\">\r\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-justify-end tw-gap-4\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n              [disabled]=\"loading()\">\r\n              Reset Form\r\n            </button>\r\n\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n              [disabled]=\"loading()\">\r\n              {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n            </button>\r\n\r\n            @if (!isViewMode()) {\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\r\n              [loading]=\"loading()\" leftIcon=\"save\">\r\n              {{ submitButtonText }}\r\n            </button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</cide-lyt-shared-wrapper>" }]
+                    ], template: "<!-- \n  CLASS PROGRAM BRANCH FORM COMPONENT\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'class_program_branch' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n      <!-- Form Content -->\n      <div class=\"tw-table-row\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n\n            <!-- Error Message -->\n            @if (error()) {\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n              <div class=\"tw-flex tw-items-start\">\n                <cide-ele-icon name=\"error\"\n                  class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n                <div class=\"tw-ml-3\">\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n                </div>\n              </div>\n            </div>\n            }\n\n            <!-- Basic Branch Information -->\n            <div class=\"tw-space-y-6\">\n              <!-- Class Program Selection -->\n              @if (showProgramClassDropdown()) {\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\n                <div class=\"tw-space-y-2\">\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\n                  <cide-ele-select formControlName=\"acabrn_class_program_id_acacpm\" placeholder=\"Select class program\"\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"acacpm_alise_title\" [options]=\"programClasses()\">\n                  </cide-ele-select>\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\n                    Sequence will be automatically assigned based on the order in the listing\n                  </p>\n                </div>\n              </div>\n              }\n\n              <!-- Standard Branch Name (SYGMS) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\n                <div class=\"tw-space-y-2\">\n                  <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Standard Branch Name</label>\n                  <cide-ele-select formControlName=\"acabrn_branch_id_sygms\" placeholder=\"Select standard branch name\"\n                    [disabled]=\"isViewMode()\" valueKey=\"_id\" labelKey=\"sygms_title\" [options]=\"branchMasters()\">\n                  </cide-ele-select>\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\n                    <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\n                    Selecting a standard branch will auto-populate the branch name and code\n                  </p>\n                </div>\n              </div>\n\n              <!-- Branch Name and Code -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <div>\n                  <cide-ele-input label=\"Branch Name *\" formControlName=\"acabrn_name\"\n                    placeholder=\"e.g., Computer Science Branch\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                </div>\n\n                <div>\n                  <cide-ele-input label=\"Branch Code *\" formControlName=\"acabrn_code\" placeholder=\"e.g., CS\" size=\"md\"\n                    leadingIcon=\"code\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Status and Lock Options -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <div\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\n                  (click)=\"onActiveCardClick()\">\n                  <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\n                  </div>\n                </div>\n\n                <div\n                  class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\n                  [class.tw-cursor-not-allowed]=\"isViewMode()\" [class.tw-opacity-60]=\"isViewMode()\"\n                  (click)=\"onLockedCardClick()\">\n                  <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Form Actions -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-justify-end tw-gap-4\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n              [disabled]=\"loading()\">\n              Reset Form\n            </button>\n\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              {{ isViewMode() ? 'Close' : 'Cancel' }}\n            </button>\n\n            @if (!isViewMode()) {\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\n              [loading]=\"loading()\" leftIcon=\"save\">\n              {{ submitButtonText }}\n            </button>\n            }\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</cide-lyt-shared-wrapper>" }]
         }], ctorParameters: () => [] });
 
 var classProgramBranchForm_component = /*#__PURE__*/Object.freeze({
@@ -2963,4 +3080,4 @@ var classProgramBranchForm_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AcademicYearCreateComponent as A, CideLytProgramClassService as C, CideLytAcademicYearService as a, CideLytClassProgramBranchService as b, academicsRoutes as c, AcademicYearListComponent as d, CideLytAcademicYearMappingService as e, CideLytClassProgramBranchListComponent as f, CideLytClassProgramBranchFormComponent as g };
-//# sourceMappingURL=cloud-ide-academics-cloud-ide-academics-Cw2APcQg.mjs.map
+//# sourceMappingURL=cloud-ide-academics-cloud-ide-academics-SBTPvNBh.mjs.map